filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-12-18 14:31:44 +03:00
Code Issues Packages Projects Releases Wiki Activity
afcf54c651
slate/components/system/SystemPage.js

322 lines
8.8 KiB
JavaScript
Raw Normal View History

rollup: adds rollup config to build component library
2020-07-02 09:38:39 +03:00
import Head from "next/head";
initial commit for the application prototype
2020-04-09 00:29:13 +03:00
rollup: adds rollup config to build component library
2020-07-02 09:38:39 +03:00
import * as React from "react";
import * as SVG from "~/common/svg";
import * as Constants from "~/common/constants";
initial commit for the application prototype
2020-04-09 00:29:13 +03:00
rollup: adds rollup config to build component library
2020-07-02 09:38:39 +03:00
import { css } from "@emotion/react";
initial commit for the application prototype
2020-04-09 00:29:13 +03:00
const STYLES_PAGE = css`
design system & tutorials: moves each component to its own page, adds tutorial pages
2020-06-22 14:00:51 +03:00
background-color: ${Constants.system.foreground};
initial commit for the application prototype
2020-04-09 00:29:13 +03:00
`;
const STYLES_BODY = css`
max-width: 960px;
width: 100%;
margin: 0 auto 0 auto;
design system & tutorials: moves each component to its own page, adds tutorial pages
2020-06-22 14:00:51 +03:00
padding: 88px 24px 128px 276px;
design system: removes mobile restriction
2020-07-02 12:39:57 +03:00
@media (max-width: 568px) {
padding: 88px 24px 128px 24px;
}
design system & tutorials: moves each component to its own page, adds tutorial pages
2020-06-22 14:00:51 +03:00
`;
const STYLES_ICON_ELEMENT = css`
removes filecoin brand
2020-07-11 00:02:10 +03:00
height: 88px;
width: 88px;
design system & tutorials: moves each component to its own page, adds tutorial pages
2020-06-22 14:00:51 +03:00
display: inline-flex;
align-items: center;
justify-content: center;
background-color: ${Constants.system.brand};
color: ${Constants.system.white};
user-select: none;
`;
const STYLES_SIDEBAR = css`
padding: 80px 24px 128px 24px;
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 252px;
background-color: ${Constants.system.foreground};
overflow-y: scroll;
::-webkit-scrollbar {
width: 4px;
}
::-webkit-scrollbar-track {
background: ${Constants.system.gray};
}
::-webkit-scrollbar-thumb {
background: ${Constants.system.darkGray};
}
::-webkit-scrollbar-thumb:hover {
background: ${Constants.system.brand};
}
design system: removes mobile restriction
2020-07-02 12:39:57 +03:00
@media (max-width: 568px) {
width: 100%;
position: relative;
overflow-y: auto;
}
design system & tutorials: moves each component to its own page, adds tutorial pages
2020-06-22 14:00:51 +03:00
`;
const STYLES_LINK = css`
fonts: adds sans-serif fall backs in case component library is used elsewhere
2020-07-02 11:24:14 +03:00
font-family: ${Constants.font.semiBold};
design system & tutorials: moves each component to its own page, adds tutorial pages
2020-06-22 14:00:51 +03:00
color: ${Constants.system.pitchBlack};
text-decoration: none;
font-weight: 400;
display: block;
margin-top: 8px;
:hover {
color: ${Constants.system.brand};
}
spelling edits and active navlink highlighting
2020-06-30 21:44:12 +03:00
`;
design system & tutorials: moves each component to its own page, adds tutorial pages
2020-06-22 14:00:51 +03:00
spelling edits and active navlink highlighting
2020-06-30 21:44:12 +03:00
const STYLES_LINK_ACTIVE = css`
fonts: adds sans-serif fall backs in case component library is used elsewhere
2020-07-02 11:24:14 +03:00
font-family: ${Constants.font.semiBold};
spelling edits and active navlink highlighting
2020-06-30 21:44:12 +03:00
color: ${Constants.system.brand};
text-decoration: none;
font-weight: 400;
display: block;
margin-top: 8px;
design system & tutorials: moves each component to its own page, adds tutorial pages
2020-06-22 14:00:51 +03:00
`;
const STYLES_DESCRIPTION = css`
font-weight: 400;
margin-top: 4px;
display: block;
margin-bottom: 16px;
`;
const STYLES_LABEL = css`
fonts: adds sans-serif fall backs in case component library is used elsewhere
2020-07-02 11:24:14 +03:00
font-family: ${Constants.font.semiBold};
design system & tutorials: moves each component to its own page, adds tutorial pages
2020-06-22 14:00:51 +03:00
display: block;
font-size: 11px;
text-transform: uppercase;
color: ${Constants.system.darkGray};
letter-spacing: 0.6px;
`;
const SidebarLink = (props) => {
return (
<React.Fragment>
sds: renaming things, removing tutorials, adds new pages for HackFS hackathon
2020-07-01 10:31:55 +03:00
<a
css={props.url.includes(props.href) ? STYLES_LINK_ACTIVE : STYLES_LINK}
href={props.href}
rollup: adds rollup config to build component library
2020-07-02 09:38:39 +03:00
target={props.target}
>
design system & tutorials: moves each component to its own page, adds tutorial pages
2020-06-22 14:00:51 +03:00
{props.title}
</a>
rollup: adds rollup config to build component library
2020-07-02 09:38:39 +03:00
{props.children ? (
<div css={STYLES_DESCRIPTION}>{props.children}</div>
) : null}
design system & tutorials: moves each component to its own page, adds tutorial pages
2020-06-22 14:00:51 +03:00
</React.Fragment>
);
};
const STYLES_SMALL_LINK = css`
padding: 0 16px 0 0px;
font-size: 14px;
rollup: adds rollup config to build component library
2020-07-02 09:38:39 +03:00
font-family: "inter-semi-bold";
design system & tutorials: moves each component to its own page, adds tutorial pages
2020-06-22 14:00:51 +03:00
margin-top: 11px;
color: #666;
transition: 200ms ease all;
cursor: pointer;
:hover {
color: ${Constants.system.brand};
}
initial commit for the application prototype
2020-04-09 00:29:13 +03:00
`;
export default class SystemPage extends React.Component {
render() {
const { title, description, url, children } = this.props;
return (
<div css={STYLES_PAGE}>
<Head>
<title>{title}</title>
<meta name="title" content={title} />
<meta name="description" content={description} />
<meta property="og:type" content="website" />
<meta property="og:url" content={url} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
removes filecoin brand
2020-07-11 00:02:10 +03:00
<meta property="og:image" content="/static/social.jpg" />
initial commit for the application prototype
2020-04-09 00:29:13 +03:00
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content={url} />
<meta property="twitter:title" content={title} />
<meta property="twitter:description" content={description} />
removes filecoin brand
2020-07-11 00:02:10 +03:00
<meta property="twitter:image" content="/static/social.jpg" />
initial commit for the application prototype
2020-04-09 00:29:13 +03:00
rollup: adds rollup config to build component library
2020-07-02 09:38:39 +03:00
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/static/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="96x96"
href="/static/favicon-96x96.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/static/favicon-16x16.png"
/>
initial commit for the application prototype
2020-04-09 00:29:13 +03:00
<link rel="shortcut icon" href="/static/favicon.ico" />
</Head>
design system: removes mobile restriction
2020-07-02 12:39:57 +03:00
<div css={STYLES_BODY}>{children}</div>
design system & tutorials: moves each component to its own page, adds tutorial pages
2020-06-22 14:00:51 +03:00
<div css={STYLES_SIDEBAR}>
removes filecoin brand
2020-07-11 00:02:10 +03:00
<a css={STYLES_ICON_ELEMENT} href="/system" />
design system & tutorials: moves each component to its own page, adds tutorial pages
2020-06-22 14:00:51 +03:00
<br />
<br />
sds: renaming things, removing tutorials, adds new pages for HackFS hackathon
2020-07-01 10:31:55 +03:00
<span css={STYLES_LABEL}>Experiences</span>
rollup: adds rollup config to build component library
2020-07-02 09:38:39 +03:00
<SidebarLink
url={url}
href="/experiences/create-address"
design system: cleanup, adds license
2020-07-16 20:41:49 +03:00
title="CreateFilecoinAddress"
rollup: adds rollup config to build component library
2020-07-02 09:38:39 +03:00
/>
<SidebarLink
url={url}
href="/experiences/make-storage-deal"
design system: cleanup, adds license
2020-07-16 20:41:49 +03:00
title="CreateFilecoinStorageDeal"
rollup: adds rollup config to build component library
2020-07-02 09:38:39 +03:00
/>
experiences: adds powergate token generation page
2020-07-06 23:29:17 +03:00
<SidebarLink
url={url}
href="/experiences/generate-powergate-token"
design system: cleanup, adds license
2020-07-16 20:41:49 +03:00
title="CreateToken"
experiences: adds powergate token generation page
2020-07-06 23:29:17 +03:00
/>
design system: adds SendAddressFilecoin to experiences
2020-07-10 08:30:52 +03:00
<SidebarLink
url={url}
design system: cleanup, adds license
2020-07-16 20:41:49 +03:00
href="/experiences/filecoin-wallet-balances"
title="FilecoinBalancesList"
design system: adds SendAddressFilecoin to experiences
2020-07-10 08:30:52 +03:00
/>
design system: adds filecoin balances list component for 0.0.4
2020-07-10 09:12:54 +03:00
<SidebarLink
url={url}
design system: cleanup, adds license
2020-07-16 20:41:49 +03:00
href="/experiences/peers-list"
title="PeersList"
/>
<SidebarLink
url={url}
href="/experiences/send-address-filecoin"
title="SendAddressFilecoin"
design system: adds filecoin balances list component for 0.0.4
2020-07-10 09:12:54 +03:00
/>
design system & tutorials: moves each component to its own page, adds tutorial pages
2020-06-22 14:00:51 +03:00
<span css={STYLES_LABEL}>
<br />
<br />
Components
</span>
rollup: adds rollup config to build component library
2020-07-02 09:38:39 +03:00
<SidebarLink url={url} href="/system/icons" title="Icons" />
<SidebarLink url={url} href="/system/colors" title="Colors" />
documentation standardization and new pages
2020-07-07 04:14:30 +03:00
<SidebarLink url={url} href="/system/globe" title="Globe" />
rollup: adds rollup config to build component library
2020-07-02 09:38:39 +03:00
<SidebarLink url={url} href="/system/tables" title="Tables" />
<SidebarLink url={url} href="/system/stats" title="Stats" />
documentation standardization and new pages
2020-07-07 04:14:30 +03:00
<SidebarLink url={url} href="/system/tooltips" title="Tooltips" />
rollup: adds rollup config to build component library
2020-07-02 09:38:39 +03:00
<SidebarLink url={url} href="/system/buttons" title="Buttons" />
<SidebarLink url={url} href="/system/checkboxes" title="Checkboxes" />
<SidebarLink url={url} href="/system/radios" title="Radios" />
<SidebarLink url={url} href="/system/toggles" title="Toggles" />
<SidebarLink url={url} href="/system/inputs" title="Inputs" />
<SidebarLink url={url} href="/system/dropdowns" title="Dropdowns" />
documentation standardization and new pages
2020-07-07 04:14:30 +03:00
<SidebarLink url={url} href="/system/datepicker" title="Datepicker" />
design system: adds SendAddressFilecoin to experiences
2020-07-10 08:30:52 +03:00
<SidebarLink
url={url}
href="/system/list-editor"
title="List Editor"
/>
documentation standardization and new pages
2020-07-07 04:14:30 +03:00
<SidebarLink url={url} href="/system/card-tabs" title="Card Tabs" />
<SidebarLink url={url} href="/system/tabs" title="Tabs" />
design system: adds SendAddressFilecoin to experiences
2020-07-10 08:30:52 +03:00
<SidebarLink
url={url}
href="/system/notifications"
title="Notifications"
/>
global modals and documentation
2020-07-15 00:55:52 +03:00
<SidebarLink url={url} href="/system/modals" title="Modals" />
design system & tutorials: moves each component to its own page, adds tutorial pages
2020-06-22 14:00:51 +03:00
<div
css={STYLES_SMALL_LINK}
rollup: adds rollup config to build component library
2020-07-02 09:38:39 +03:00
style={{ marginTop: 48 }}
design system & tutorials: moves each component to its own page, adds tutorial pages
2020-06-22 14:00:51 +03:00
onClick={() => {
navigation: removes links from client experience, fixes link on design system
2020-07-07 09:22:06 +03:00
window.open("https://github.com/filecoin-project/slate");
rollup: adds rollup config to build component library
2020-07-02 09:38:39 +03:00
}}
>
copy: adjusts copy and removes lorem ipsum, adds a few links
2020-06-22 14:28:14 +03:00
<SVG.ExpandBox height="12px" style={{ marginRight: 10 }} />
View source
</div>
design system: adds jim picks library on the external links list
2020-06-24 12:45:44 +03:00
<div
css={STYLES_SMALL_LINK}
onClick={() => {
rollup: adds rollup config to build component library
2020-07-02 09:38:39 +03:00
window.open(
"https://github.com/filecoin-shipyard/js-lotus-client"
);
}}
>
design system: adds jim picks library on the external links list
2020-06-24 12:45:44 +03:00
<SVG.ExpandBox height="12px" style={{ marginRight: 10 }} />
JS Lotus Client
</div>
copy: adjusts copy and removes lorem ipsum, adds a few links
2020-06-22 14:28:14 +03:00
<div
css={STYLES_SMALL_LINK}
onClick={() => {
rollup: adds rollup config to build component library
2020-07-02 09:38:39 +03:00
window.open("https://github.com/textileio/js-powergate-client");
}}
>
copy: adjusts copy and removes lorem ipsum, adds a few links
2020-06-22 14:28:14 +03:00
<SVG.ExpandBox height="12px" style={{ marginRight: 10 }} />
JS Powergate Client
</div>
<div
css={STYLES_SMALL_LINK}
onClick={() => {
rollup: adds rollup config to build component library
2020-07-02 09:38:39 +03:00
window.open("https://docs.textile.io/");
}}
>
copy: adjusts copy and removes lorem ipsum, adds a few links
2020-06-22 14:28:14 +03:00
<SVG.ExpandBox height="12px" style={{ marginRight: 10 }} />
Textile Documentation
</div>
<div
css={STYLES_SMALL_LINK}
onClick={() => {
rollup: adds rollup config to build component library
2020-07-02 09:38:39 +03:00
window.open("https://docs.lotu.sh/");
}}
>
copy: adjusts copy and removes lorem ipsum, adds a few links
2020-06-22 14:28:14 +03:00
<SVG.ExpandBox height="12px" style={{ marginRight: 10 }} />
Lotus Documentation
design system & tutorials: moves each component to its own page, adds tutorial pages
2020-06-22 14:00:51 +03:00
</div>
<div
css={STYLES_SMALL_LINK}
onClick={() => {
rollup: adds rollup config to build component library
2020-07-02 09:38:39 +03:00
window.open("https://docs.filecoin.io/");
}}
>
copy: adjusts copy and removes lorem ipsum, adds a few links
2020-06-22 14:28:14 +03:00
<SVG.ExpandBox height="12px" style={{ marginRight: 10 }} />
Filecoin Documentation
design system & tutorials: moves each component to its own page, adds tutorial pages
2020-06-22 14:00:51 +03:00
</div>
<div
css={STYLES_SMALL_LINK}
onClick={() => {
rollup: adds rollup config to build component library
2020-07-02 09:38:39 +03:00
window.open("https://filecoin.io/#community");
}}
>
copy: adjusts copy and removes lorem ipsum, adds a few links
2020-06-22 14:28:14 +03:00
<SVG.ExpandBox height="12px" style={{ marginRight: 10 }} />
design system & tutorials: moves each component to its own page, adds tutorial pages
2020-06-22 14:00:51 +03:00
Community
</div>
</div>
initial commit for the application prototype
2020-04-09 00:29:13 +03:00
</div>
);
}
}
Reference in New Issue Copy Permalink