import Head from "next/head"; import * as React from "react"; import * as SVG from "~/common/svg"; import * as Constants from "~/common/constants"; import { css } from "@emotion/react"; import { GoogleScript } from "~/common/analytics"; const STYLES_PAGE = css` background-color: ${Constants.system.foreground}; `; const STYLES_BODY = css` max-width: 960px; width: 100%; margin: 0 auto 0 auto; padding: 88px 24px 128px 336px; @media (max-width: 568px) { padding: 88px 24px 128px 24px; } `; const STYLES_ICON_ELEMENT = css` height: 48px; width: 48px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); display: inline-flex; align-items: center; justify-content: center; background-color: ${Constants.system.brand}; background-image: url("/static/social.png"); background-size: cover; color: ${Constants.system.white}; user-select: none; `; const STYLES_SIDEBAR = css` padding: 88px 24px 128px 24px; position: fixed; top: 0; left: 0; bottom: 0; width: 312px; 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}; } @media (max-width: 568px) { width: 100%; position: relative; overflow-y: auto; } `; const STYLES_LINK = css` font-family: ${Constants.font.semiBold}; color: ${Constants.system.pitchBlack}; text-decoration: none; font-weight: 400; display: block; margin-top: 8px; :hover { color: ${Constants.system.brand}; } `; const STYLES_LINK_ACTIVE = css` font-family: ${Constants.font.semiBold}; color: ${Constants.system.brand}; text-decoration: none; font-weight: 400; display: block; margin-top: 8px; `; const STYLES_DESCRIPTION = css` font-weight: 400; margin-top: 4px; display: block; margin-bottom: 16px; `; const STYLES_LABEL = css` font-family: ${Constants.font.semiBold}; display: block; font-size: 11px; text-transform: uppercase; color: ${Constants.system.darkGray}; letter-spacing: 0.6px; `; const SidebarLink = (props) => { return ( {props.title} {props.children ? (
{props.children}
) : null} ); }; const STYLES_SMALL_LINK = css` padding: 0 16px 0 0px; font-size: 14px; font-family: "inter-semi-bold"; margin-top: 11px; color: #666; transition: 200ms ease all; cursor: pointer; :hover { color: ${Constants.system.brand}; } `; export default class SystemPage extends React.Component { render() { const { title, description, url, children } = this.props; return (
{title}
{children}


Experiences

Components
{ window.open("https://github.com/filecoin-project/slate"); }} > View source
{ window.open( "https://github.com/filecoin-shipyard/js-lotus-client" ); }} > JS Lotus Client
{ window.open("https://github.com/textileio/js-powergate-client"); }} > JS Powergate Client
{ window.open("https://docs.textile.io/"); }} > Textile Documentation
{ window.open("https://docs.lotu.sh/"); }} > Lotus Documentation
{ window.open("https://docs.filecoin.io/"); }} > Filecoin Documentation
{ window.open("https://filecoin.io/#community"); }} > Community
); } }