{title}

import Head from "next/head"; import * as React from "react"; import * as SVG from "~/common/svg"; import * as SVGLogo from "~/common/logo"; import * as Constants from "~/common/constants"; import { css } from "@emotion/react"; 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_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}

Components

{ window.open("https://github.com/filecoin-project/slate"); }} > View source

); } }