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'; 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 276px; `; const STYLES_ICON_ELEMENT = css` height: 40px; width: 40px; border-radius: 40px; 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}; } `; const STYLES_LINK = css` font-family: 'inter-semi-bold'; 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: 'inter-semi-bold'; 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: 'inter-semi-bold'; display: block; font-size: 11px; text-transform: uppercase; color: ${Constants.system.darkGray}; letter-spacing: 0.6px; `; const SidebarLink = (props) => { console.log(props.url) 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}


Tutorials Upload data to IPFS and Filecoin on the Lotus DevNet in under 5 minutes. A guide to integrate Powergate into your web client.

Components
{ window.open('https://filscan.io/'); }} style={{ marginTop: 48 }}> Block Explorer
{ window.open('https://github.com/filecoin-project/filecoin-client'); }}> 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
{children}
); } }