LumeWeb
/
skynet-webportal
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(dashboard-v2): introduce a page layout (#1737)

This commit is contained in:
Michał Leszczyk 2022-02-21 09:30:39 +01:00 committed by GitHub
parent d74df7cd68
commit 9ced352b16
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 138 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/dashboard-v2/gatsby-config.js
View File

@ -5,6 +5,7 @@ module.exports = {
},
plugins: [
"gatsby-plugin-image",
"gatsby-plugin-provide-react",
"gatsby-plugin-react-helmet",
"gatsby-plugin-sharp",
"gatsby-transformer-sharp",
@ -17,15 +18,5 @@ module.exports = {
},
__key: "images",
},
{
resolve: `gatsby-plugin-alias-imports`,
options: {
alias: {
// Allows npm link-ing skynet-storybook during development.
"styled-components": "./node_modules/styled-components",
},
extensions: ["js"],
},
},
],
};

1
packages/dashboard-v2/package.json
View File

@ -50,6 +50,7 @@
"eslint-plugin-storybook": "^0.5.6",
"gatsby-plugin-alias-imports": "^1.0.5",
"gatsby-plugin-image": "^2.6.0",
"gatsby-plugin-provide-react": "^1.0.2",
"gatsby-plugin-react-helmet": "^5.6.0",
"gatsby-plugin-sharp": "^4.6.0",
"gatsby-plugin-styled-components": "^5.7.0",

1
packages/dashboard-v2/src/components/DropdownMenu/DropdownMenuLink.js
View File

@ -21,5 +21,4 @@ DropdownMenuLink.propTypes = {
label: PropTypes.oneOfType([PropTypes.node, PropTypes.string]).isRequired,
active: PropTypes.bool,
icon: PropTypes.func,
children: PropTypes.node.isRequired,
};

8
packages/dashboard-v2/src/components/Footer/Footer.js Normal file
View File

@ -0,0 +1,8 @@
import * as React from "react";
import { PageContainer } from "../PageContainer";
export const Footer = () => (
<PageContainer className="font-content text-palette-300 py-4">
<p>© Skynet Labs Inc. All rights reserved.</p>
</PageContainer>
);

1
packages/dashboard-v2/src/components/Footer/index.js Normal file
View File

@ -0,0 +1 @@
export * from "./Footer";

2
packages/dashboard-v2/src/components/Tabs/Tab.js
View File

@ -3,7 +3,7 @@ import PropTypes from "prop-types";
import styled from "styled-components";
export const StyledTab = styled.button.attrs(({ active, variant }) => ({
className: `m-0 px-2 pb-2
className: `m-0 pr-2 pb-2
text-tab text-left font-sans
transition-colors hover:text-palette-500
${active ? "font-semibold text-palette-600" : "font-light text-palette-300"}

57
packages/dashboard-v2/src/layouts/DashboardLayout.js Normal file
View File

@ -0,0 +1,57 @@
import * as React from "react";
import { Link } from "gatsby";
import styled from "styled-components";
import { DropdownMenu, DropdownMenuLink } from "../components/DropdownMenu";
import { PageContainer } from "../components/PageContainer";
import { CogIcon, SkynetLogoIcon, LockClosedIcon } from "../components/Icons";
import { NavBar, NavBarLink, NavBarSection } from "../components/Navbar";
import { Footer } from "../components/Footer";
const Layout = styled.div.attrs({
className: "h-screen overflow-hidden",
})`
background-image: url(/images/dashboard-bg.svg);
background-position: -300px -280px;
.navbar {
grid-template-columns: auto max-content 1fr;
}
`;
const DashboardLayout = ({ children }) => {
return (
<>
<Layout>
<NavBar className="navbar">
<NavBarSection className="w-[110px] justify-start">
<SkynetLogoIcon size={48} />
</NavBarSection>
<NavBarSection>
<NavBarLink to="/" as={Link} activeClassName="!border-b-primary">
Dashboard
</NavBarLink>
<NavBarLink to="/files" as={Link} activeClassName="!border-b-primary">
Files
</NavBarLink>
<NavBarLink to="/payments" as={Link} activeClassName="!border-b-primary">
Payments
</NavBarLink>
</NavBarSection>
<NavBarSection className="justify-end">
<DropdownMenu title="My account">
<DropdownMenuLink href="/settings" icon={CogIcon} label="Settings" />
<DropdownMenuLink href="/logout" icon={LockClosedIcon} label="Log out" />
</DropdownMenu>
</NavBarSection>
</NavBar>
<PageContainer>
<main className="mt-14">{children}</main>
</PageContainer>
<Footer />
</Layout>
</>
);
};
export default DashboardLayout;

5
packages/dashboard-v2/src/pages/files.js
View File

@ -1,8 +1,11 @@
import * as React from "react";
// markup
import DashboardLayout from "../layouts/DashboardLayout";
const FilesPage = () => {
return <>FILES</>;
};
FilesPage.Layout = DashboardLayout;
export default FilesPage;

5
packages/dashboard-v2/src/pages/index.js
View File

@ -1,8 +1,11 @@
import * as React from "react";
// markup
import DashboardLayout from "../layouts/DashboardLayout";
const IndexPage = () => {
return <>Dashboard</>;
};
IndexPage.Layout = DashboardLayout;
export default IndexPage;

11
packages/dashboard-v2/src/pages/payments.js Normal file
View File

@ -0,0 +1,11 @@
import * as React from "react";
import DashboardLayout from "../layouts/DashboardLayout";
const PaymentsPage = () => {
return <>PAYMENTS HISTORY</>;
};
PaymentsPage.Layout = DashboardLayout;
export default PaymentsPage;

31
packages/dashboard-v2/src/styles/global.css
View File

@ -4,7 +4,14 @@
@layer base {
html {
@apply font-content bg-palette-200 bg-opacity-20;
@apply font-content bg-palette-200 bg-opacity-[.30] h-screen tracking-wide;
}
h1,
h2,
h3,
h4 {
@apply font-semibold;
}
h1,
@ -13,6 +20,26 @@
h4,
h5,
h6 {
@apply font-sans;
@apply font-sans tracking-normal;
}
h1 {
font-size: 3.75rem;
}
h2 {
font-size: 2.5rem;
}
h3 {
font-size: 1.875rem;
}
h4 {
font-size: 1.125rem;
}
h5 {
font-size: 1rem;
}
h6 {
@apply uppercase;
font-size: 0.875rem;
}
}

11
packages/dashboard-v2/static/images/dashboard-bg.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

15
packages/dashboard-v2/yarn.lock
View File

@ -6753,7 +6753,7 @@ enhanced-resolve@^4.5.0:
memory-fs "^0.5.0"
tapable "^1.0.0"
enhanced-resolve@^5.9.0:
enhanced-resolve@^5.8.3:
version "5.9.0"
resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.9.0.tgz#49ac24953ac8452ed8fed2ef1340fc8e043667ee"
integrity sha512-weDYmzbBygL7HzGGS26M3hGQx68vehdEg6VUmqSOaFzXExFqlnKuSvsEJCVGQHScS8CQMbrAqftT+AzzHNt/YA==
@ -8159,6 +8159,11 @@ gatsby-plugin-postcss@^5.7.0:
"@babel/runtime" "^7.15.4"
postcss-loader "^4.3.0"
gatsby-plugin-provide-react@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/gatsby-plugin-provide-react/-/gatsby-plugin-provide-react-1.0.2.tgz#e50bb311cd8ef5855c6d94f708266ab117c77a15"
integrity sha512-Zkbs0uiniXDvtGT86+bTCdj0cuT9REpGJxJTIKLQJW3AvmAdh/MAMwWzMdyMrX1cwjqDPZBFC7bw7A49iP/fyw==
gatsby-plugin-react-helmet@^5.6.0:
version "5.7.0"
resolved "https://registry.yarnpkg.com/gatsby-plugin-react-helmet/-/gatsby-plugin-react-helmet-5.7.0.tgz#4d038c8350796fbe1815e2cb238c0e97cb940b87"
@ -15517,9 +15522,9 @@ webpack@4:
webpack-sources "^1.4.1"
webpack@^5.61.0, webpack@^5.9.0:
version "5.69.0"
resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.69.0.tgz#c9eb607d4f6c49f1e5755492323a7b055c3450e3"
integrity sha512-E5Fqu89Gu8fR6vejRqu26h8ld/k6/dCVbeGUcuZjc+goQHDfCPU9rER71JmdtBYGmci7Ec2aFEATQ2IVXKy2wg==
version "5.69.1"
resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.69.1.tgz#8cfd92c192c6a52c99ab00529b5a0d33aa848dc5"
integrity sha512-+VyvOSJXZMT2V5vLzOnDuMz5GxEqLk7hKWQ56YxPW/PQRUuKimPqmEIJOx8jHYeyo65pKbapbW464mvsKbaj4A==
dependencies:
"@types/eslint-scope" "^3.7.3"
"@types/estree" "^0.0.51"
@ -15530,7 +15535,7 @@ webpack@^5.61.0, webpack@^5.9.0:
acorn-import-assertions "^1.7.6"
browserslist "^4.14.5"
chrome-trace-event "^1.0.2"
enhanced-resolve "^5.9.0"
enhanced-resolve "^5.8.3"
es-module-lexer "^0.9.0"
eslint-scope "5.1.1"
events "^3.2.0"