Created a reusable page wrapper for docs pages
This commit is contained in:
Piotr Janosz
committed by
fabioberger
fabioberger
parent
27832741e4
commit
bb33609164
@@ -8,28 +8,18 @@ import { colors } from 'ts/style/colors';
|
||||
interface IHeroProps {
|
||||
isHome?: boolean;
|
||||
title?: string;
|
||||
description?: string;
|
||||
subtitle?: string;
|
||||
}
|
||||
|
||||
export const Hero: React.FC<IHeroProps> = ({ description, isHome, title }) => {
|
||||
return (
|
||||
export const Hero: React.FC<IHeroProps> = ({ isHome = false, subtitle, title }) => (
|
||||
<HeroWrapper isHome={isHome}>
|
||||
<Heading
|
||||
size={isHome ? 'large' : 'medium'}
|
||||
isCentered={true}
|
||||
marginBottom={isHome || description ? '30px' : '0'}
|
||||
>
|
||||
<Heading size={isHome ? 'large' : 'medium'} isCentered={true} marginBottom={isHome || subtitle ? '30px' : '0'}>
|
||||
{title}
|
||||
</Heading>
|
||||
{description && <Paragraph isCentered={true}>{description}</Paragraph>}
|
||||
{subtitle && <Paragraph isCentered={true}>{subtitle}</Paragraph>}
|
||||
{isHome && <SearchInput isHome={true} />}
|
||||
</HeroWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
Hero.defaultProps = {
|
||||
isHome: false,
|
||||
};
|
||||
);
|
||||
|
||||
const HeroWrapper = styled.div<{ isHome: boolean }>`
|
||||
background-color: ${colors.backgroundLight};
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import CircularProgress from 'material-ui/CircularProgress';
|
||||
|
||||
import { Hero } from 'ts/components/docs/hero';
|
||||
import { SiteWrap } from 'ts/components/docs/siteWrap';
|
||||
import { DocumentTitle } from 'ts/components/document_title';
|
||||
import { Section } from 'ts/components/newLayout';
|
||||
|
||||
import { documentConstants } from 'ts/utils/document_meta_constants';
|
||||
|
||||
import { colors } from 'ts/style/colors';
|
||||
|
||||
interface IDocsPageLayoutProps {
|
||||
children: React.ReactNode;
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
loading?: boolean;
|
||||
isHome?: boolean;
|
||||
}
|
||||
|
||||
export const DocsPageLayout: React.FC<IDocsPageLayoutProps> = props => {
|
||||
return (
|
||||
<SiteWrap theme="light">
|
||||
<DocumentTitle {...documentConstants.DOCS} />
|
||||
<Hero title={props.title} subtitle={props.subtitle} isHome={props.isHome} />
|
||||
<Section maxWidth="1150px" isPadded={false} overflow="visible">
|
||||
{props.loading ? (
|
||||
<LoaderWrapper>
|
||||
<CircularProgress size={40} thickness={2} color={colors.brandLight} />
|
||||
</LoaderWrapper>
|
||||
) : (
|
||||
props.children
|
||||
)}
|
||||
</Section>
|
||||
</SiteWrap>
|
||||
);
|
||||
};
|
||||
|
||||
const LoaderWrapper = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 300px;
|
||||
`;
|
||||
|
||||
// const Columns = styled.div`
|
||||
// display: grid;
|
||||
// grid-template-columns: 130px 0 1fr;
|
||||
// grid-column-gap: 60px;
|
||||
|
||||
// @media (min-width: 1440px) {
|
||||
// grid-template-columns: 230px 0 1fr;
|
||||
// }
|
||||
|
||||
// @media (max-width: 900px) {
|
||||
// grid-template-columns: 1fr;
|
||||
// }
|
||||
// `;
|
||||
@@ -3,7 +3,7 @@ import CopyToClipboard from 'react-copy-to-clipboard';
|
||||
import SyntaxHighlighter from 'react-syntax-highlighter';
|
||||
|
||||
import { Button } from 'ts/components/button';
|
||||
import { CodeRun } from 'ts/components/docs/code_run';
|
||||
import { CodeRun } from 'ts/components/docs/mdx/code_run';
|
||||
|
||||
import { colors } from 'ts/style/colors';
|
||||
import { styled } from 'ts/style/theme';
|
||||
@@ -1,14 +1,9 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { Hero } from 'ts/components/docs/hero';
|
||||
import { DocsPageLayout } from 'ts/components/docs/layout/docs_page_layout';
|
||||
import { Resource } from 'ts/components/docs/resource/resource';
|
||||
import { Filters } from 'ts/components/docs/sidebar/filters';
|
||||
import { SiteWrap } from 'ts/components/docs/siteWrap';
|
||||
import { DocumentTitle } from 'ts/components/document_title';
|
||||
import { Section } from 'ts/components/newLayout';
|
||||
|
||||
import { documentConstants } from 'ts/utils/document_meta_constants';
|
||||
|
||||
import { Hits, InstantSearch } from 'react-instantsearch-dom';
|
||||
|
||||
@@ -17,18 +12,14 @@ import algoliasearch from 'algoliasearch/lite';
|
||||
const searchClient = algoliasearch('39X6WOJZKW', '6acba761a34d99781628c6178af1e16c');
|
||||
|
||||
export const DocsGuides: React.FC = () => (
|
||||
<SiteWrap theme="light">
|
||||
<DocumentTitle {...documentConstants.DOCS} />
|
||||
<Hero title="Guides" />
|
||||
<Section maxWidth="1030px" isPadded={false}>
|
||||
<DocsPageLayout title="Guides">
|
||||
<InstantSearch searchClient={searchClient} indexName="0x_guides_test">
|
||||
<Columns>
|
||||
<Filters filters={filters} />
|
||||
<Hits hitComponent={Resource} />
|
||||
</Columns>
|
||||
</InstantSearch>
|
||||
</Section>
|
||||
</SiteWrap>
|
||||
</DocsPageLayout>
|
||||
);
|
||||
|
||||
const Columns = styled.div`
|
||||
|
||||
@@ -3,26 +3,19 @@ import styled from 'styled-components';
|
||||
|
||||
import { CommunityLink, ICommunityLinkProps } from 'ts/components/docs/community_link';
|
||||
import { GetStartedLink, IGetStartedLinkProps } from 'ts/components/docs/get_started_link';
|
||||
import { Hero } from 'ts/components/docs/hero';
|
||||
import { Separator } from 'ts/components/docs/separator';
|
||||
import { IShortcutLinkProps, ShortcutLink } from 'ts/components/docs/shortcut_link';
|
||||
import { SiteWrap } from 'ts/components/docs/siteWrap';
|
||||
import { IStepLinkConfig } from 'ts/components/docs/step_link';
|
||||
import { StepLinks } from 'ts/components/docs/step_links';
|
||||
import { DocumentTitle } from 'ts/components/document_title';
|
||||
import { Section } from 'ts/components/newLayout';
|
||||
import { Heading } from 'ts/components/text';
|
||||
|
||||
import { documentConstants } from 'ts/utils/document_meta_constants';
|
||||
import { DocsPageLayout } from 'ts/components/docs/layout/docs_page_layout';
|
||||
|
||||
const SEPARATOR_MARGIN = '60px 0';
|
||||
|
||||
export const DocsHome: React.FC = () => {
|
||||
return (
|
||||
<SiteWrap theme="light">
|
||||
<DocumentTitle {...documentConstants.DOCS} />
|
||||
<Hero isHome={true} title="0x Docs" />
|
||||
<Section maxWidth="1150px" isPadded={false}>
|
||||
<DocsPageLayout isHome={true} title="0x Docs">
|
||||
<ShortcutsWrapper>
|
||||
{shortcuts.map((shortcut, index) => (
|
||||
<ShortcutLink key={`shortcut-${index}`} {...shortcut} />
|
||||
@@ -47,8 +40,7 @@ export const DocsHome: React.FC = () => {
|
||||
<CommunityLink key={`communityLink-${index}`} {...shortcut} />
|
||||
))}
|
||||
</CommunityWrapper>
|
||||
</Section>
|
||||
</SiteWrap>
|
||||
</DocsPageLayout>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,38 +1,30 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { Code } from 'ts/components/docs/code';
|
||||
import { Tab, TabList, TabPanel, Tabs } from 'ts/components/docs/code_tabs';
|
||||
import { FeatureLink } from 'ts/components/docs/feature_link';
|
||||
import { HelpCallout } from 'ts/components/docs/help_callout';
|
||||
import { HelpfulCta } from 'ts/components/docs/helpful_cta';
|
||||
import { Hero } from 'ts/components/docs/hero';
|
||||
import { DocsPageLayout } from 'ts/components/docs/layout/docs_page_layout';
|
||||
import { NewsletterWidget } from 'ts/components/docs/newsletter_widget';
|
||||
import { Note } from 'ts/components/docs/note';
|
||||
import { Notification } from 'ts/components/docs/notification';
|
||||
import { OrderedList } from 'ts/components/docs/ordered_list';
|
||||
import { Resource } from 'ts/components/docs/resource/resource';
|
||||
import { Separator } from 'ts/components/docs/separator';
|
||||
import { Filters } from 'ts/components/docs/sidebar/filters';
|
||||
import { SiteWrap } from 'ts/components/docs/siteWrap';
|
||||
import { IStepLinkConfig } from 'ts/components/docs/step_link';
|
||||
import { StepLinks } from 'ts/components/docs/step_links';
|
||||
import { Table } from 'ts/components/docs/table';
|
||||
import { UnorderedList } from 'ts/components/docs/unordered_list';
|
||||
import { DocumentTitle } from 'ts/components/document_title';
|
||||
import { Section } from 'ts/components/newLayout';
|
||||
import { Heading, Paragraph } from 'ts/components/text';
|
||||
|
||||
import { documentConstants } from 'ts/utils/document_meta_constants';
|
||||
import { Code } from 'ts/components/docs/mdx/code';
|
||||
import { Tab, TabList, TabPanel, Tabs } from 'ts/components/docs/mdx/code_tabs';
|
||||
import { HelpCallout } from 'ts/components/docs/mdx/help_callout';
|
||||
import { HelpfulCta } from 'ts/components/docs/mdx/helpful_cta';
|
||||
import { Notification } from 'ts/components/docs/mdx/notification';
|
||||
import { OrderedList } from 'ts/components/docs/mdx/ordered_list';
|
||||
import { Table } from 'ts/components/docs/mdx/table';
|
||||
import { UnorderedList } from 'ts/components/docs/mdx/unordered_list';
|
||||
import { Heading, Paragraph } from 'ts/components/text';
|
||||
|
||||
export const DocsPageTemplate: React.FC = () => {
|
||||
return (
|
||||
<SiteWrap theme="light">
|
||||
<DocumentTitle {...documentConstants.DOCS} />
|
||||
<Hero title={`Page Template`} description="This a subheader for the page" />
|
||||
<Section maxWidth="1150px" isPadded={false} overflow="visible">
|
||||
<DocsPageLayout title="Page template" subtitle="Test subtitle">
|
||||
<Columns>
|
||||
<Filters filters={filters} />
|
||||
<h1>test</h1>
|
||||
<Separator />
|
||||
<ContentWrapper>
|
||||
<LargeHeading>Large Heading</LargeHeading>
|
||||
@@ -56,13 +48,13 @@ export const DocsPageTemplate: React.FC = () => {
|
||||
</Heading>
|
||||
<Paragraph>This would be paragraph text.</Paragraph>
|
||||
<Paragraph>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat velit in nisl
|
||||
varius malesuada. Morbi at porttitor enim. Donec vel tristique dolor, quis convallis sapien.
|
||||
Nam et massa tempus, dignissim leo vitae, ultricies libero. Vivamus eu enim tellus.
|
||||
Phasellus eu mattis elit. Proin ut eleifend urna, sed tincidunt nunc. Sed eu dapibus metus,
|
||||
in congue ipsum. Duis volutpat sem et sem faucibus blandit. Nullam ultricies ante eu elit
|
||||
auctor, id mattis nunc euismod. Curabitur arcu enim, cursus ac pellentesque quis, accumsan
|
||||
sit amet turpis. Praesent dignissim mi a maximus euismod
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat velit in nisl varius
|
||||
malesuada. Morbi at porttitor enim. Donec vel tristique dolor, quis convallis sapien. Nam et
|
||||
massa tempus, dignissim leo vitae, ultricies libero. Vivamus eu enim tellus. Phasellus eu mattis
|
||||
elit. Proin ut eleifend urna, sed tincidunt nunc. Sed eu dapibus metus, in congue ipsum. Duis
|
||||
volutpat sem et sem faucibus blandit. Nullam ultricies ante eu elit auctor, id mattis nunc
|
||||
euismod. Curabitur arcu enim, cursus ac pellentesque quis, accumsan sit amet turpis. Praesent
|
||||
dignissim mi a maximus euismod
|
||||
</Paragraph>
|
||||
<Paragraph>And here is a table:</Paragraph>
|
||||
<Table>
|
||||
@@ -83,38 +75,36 @@ export const DocsPageTemplate: React.FC = () => {
|
||||
<tr>
|
||||
<td>takerAddress</td>
|
||||
<td>
|
||||
Address that is allowed to fill the order. If set to 0, anyone is allowed to
|
||||
fill the order. This field allows makers to decide who can fill an order,
|
||||
rendering it useless to eavesdroppers or outside parties.
|
||||
Address that is allowed to fill the order. If set to 0, anyone is allowed to fill
|
||||
the order. This field allows makers to decide who can fill an order, rendering it
|
||||
useless to eavesdroppers or outside parties.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>feeRecipientAddress</td>
|
||||
<td>
|
||||
The address that will receive the fees stipulated by the order. This is
|
||||
typically used to incentivize off-chain order relay.
|
||||
The address that will receive the fees stipulated by the order. This is typically
|
||||
used to incentivize off-chain order relay.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>senderAddress</td>
|
||||
<td>
|
||||
Is an advanced feature that can be defaulted to the 0 address. It allows the
|
||||
maker to enforce that the order must flow through some additional logic residing
|
||||
in an additional Ethereum smart contract before it can be filled (e.g a KYC
|
||||
whitelist contract) -- more on "extension contracts" later.
|
||||
Is an advanced feature that can be defaulted to the 0 address. It allows the maker
|
||||
to enforce that the order must flow through some additional logic residing in an
|
||||
additional Ethereum smart contract before it can be filled (e.g a KYC whitelist
|
||||
contract) -- more on "extension contracts" later.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>makerAssetAmount</td>
|
||||
<td>
|
||||
Amount of the maker'sAsset being offered by the maker. Must be greater than 0.
|
||||
</td>
|
||||
<td>Amount of the maker'sAsset being offered by the maker. Must be greater than 0.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>makerFee</td>
|
||||
<td>
|
||||
The fee to be paid by the order maker to the <code>feeRecipientAddress</code> in
|
||||
the event of an order fill. Partial fills result in partial fees.
|
||||
The fee to be paid by the order maker to the <code>feeRecipientAddress</code> in the
|
||||
event of an order fill. Partial fills result in partial fees.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@@ -160,13 +150,13 @@ export const DocsPageTemplate: React.FC = () => {
|
||||
|
||||
<H3>Subheading</H3>
|
||||
<Paragraph>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat velit in nisl
|
||||
varius malesuada. Morbi at porttitor enim. Donec vel tristique dolor, quis convallis sapien.
|
||||
Nam et massa tempus, dignissim leo vitae, ultricies libero. Vivamus eu enim tellus.
|
||||
Phasellus eu mattis elit. Proin ut eleifend urna, sed tincidunt nunc. Sed eu dapibus metus,
|
||||
in congue ipsum. Duis volutpat sem et sem faucibus blandit. Nullam ultricies ante eu elit
|
||||
auctor, id mattis nunc euismod. Curabitur arcu enim, cursus ac pellentesque quis, accumsan
|
||||
sit amet turpis. Praesent dignissim mi a maximus euismod
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat velit in nisl varius
|
||||
malesuada. Morbi at porttitor enim. Donec vel tristique dolor, quis convallis sapien. Nam et
|
||||
massa tempus, dignissim leo vitae, ultricies libero. Vivamus eu enim tellus. Phasellus eu mattis
|
||||
elit. Proin ut eleifend urna, sed tincidunt nunc. Sed eu dapibus metus, in congue ipsum. Duis
|
||||
volutpat sem et sem faucibus blandit. Nullam ultricies ante eu elit auctor, id mattis nunc
|
||||
euismod. Curabitur arcu enim, cursus ac pellentesque quis, accumsan sit amet turpis. Praesent
|
||||
dignissim mi a maximus euismod
|
||||
</Paragraph>
|
||||
<div>
|
||||
<Note
|
||||
@@ -175,12 +165,12 @@ export const DocsPageTemplate: React.FC = () => {
|
||||
/>
|
||||
<Paragraph>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat velit in nisl
|
||||
varius malesuada. Morbi at porttitor enim. Donec vel tristique dolor, quis convallis
|
||||
sapien. Nam et massa tempus, dignissim leo vitae, ultricies libero. Vivamus eu enim
|
||||
tellus. Phasellus eu mattis elit. Proin ut eleifend urna, sed tincidunt nunc. Sed eu
|
||||
dapibus metus, in congue ipsum. Duis volutpat sem et sem faucibus blandit. Nullam
|
||||
ultricies ante eu elit auctor, id mattis nunc euismod. Curabitur arcu enim, cursus ac
|
||||
pellentesque quis, accumsan sit amet turpis. Praesent dignissim mi a maximus euismod
|
||||
varius malesuada. Morbi at porttitor enim. Donec vel tristique dolor, quis convallis sapien.
|
||||
Nam et massa tempus, dignissim leo vitae, ultricies libero. Vivamus eu enim tellus.
|
||||
Phasellus eu mattis elit. Proin ut eleifend urna, sed tincidunt nunc. Sed eu dapibus metus,
|
||||
in congue ipsum. Duis volutpat sem et sem faucibus blandit. Nullam ultricies ante eu elit
|
||||
auctor, id mattis nunc euismod. Curabitur arcu enim, cursus ac pellentesque quis, accumsan
|
||||
sit amet turpis. Praesent dignissim mi a maximus euismod
|
||||
</Paragraph>
|
||||
</div>
|
||||
<UnorderedList>
|
||||
@@ -229,8 +219,7 @@ export const DocsPageTemplate: React.FC = () => {
|
||||
<NewsletterWidget />
|
||||
</ContentWrapper>
|
||||
</Columns>
|
||||
</Section>
|
||||
</SiteWrap>
|
||||
</DocsPageLayout>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -286,36 +275,7 @@ const usefulLinks: IStepLinkConfig[] = [
|
||||
},
|
||||
];
|
||||
|
||||
const filters = [
|
||||
{
|
||||
attribute: 'Topic',
|
||||
heading: 'Topic',
|
||||
},
|
||||
{
|
||||
attribute: 'Difficulty',
|
||||
heading: 'Level',
|
||||
},
|
||||
];
|
||||
|
||||
const codeSample = `import { TruffleArtifactAdapter } from '@0x/sol-coverage';
|
||||
const projectRoot = '.';
|
||||
const solcVersion = '0.5.0';
|
||||
const artifactAdapter = new TruffleArtifactAdapter(projectRoot, solcVersion);`;
|
||||
|
||||
const resources = [
|
||||
{
|
||||
heading: '0x Mesh - your gateway to networked liquidity',
|
||||
description:
|
||||
'Learn about the 0x peer-to-peer network for sharing orders and how you can use it to tap into networked liquidity.',
|
||||
tags: ['Relayer'],
|
||||
url: 'https://0x.org',
|
||||
isCommunity: true,
|
||||
},
|
||||
{
|
||||
heading: '0x Mesh - your gateway to networked liquidity',
|
||||
description:
|
||||
'The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs',
|
||||
tags: ['Api explorer', 'Relayer'],
|
||||
url: 'https://0x.org',
|
||||
},
|
||||
];
|
||||
|
||||
@@ -2,16 +2,11 @@ import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { FeatureLink } from 'ts/components/docs/feature_link';
|
||||
import { Hero } from 'ts/components/docs/hero';
|
||||
import { DocsPageLayout } from 'ts/components/docs/layout/docs_page_layout';
|
||||
import { Resource } from 'ts/components/docs/resource/resource';
|
||||
import { Filters } from 'ts/components/docs/sidebar/filters';
|
||||
import { SiteWrap } from 'ts/components/docs/siteWrap';
|
||||
import { DocumentTitle } from 'ts/components/document_title';
|
||||
import { Section } from 'ts/components/newLayout';
|
||||
import { Heading } from 'ts/components/text';
|
||||
|
||||
import { documentConstants } from 'ts/utils/document_meta_constants';
|
||||
|
||||
import { Hits, InstantSearch } from 'react-instantsearch-dom';
|
||||
|
||||
import algoliasearch from 'algoliasearch/lite';
|
||||
@@ -20,10 +15,7 @@ const searchClient = algoliasearch('39X6WOJZKW', '6acba761a34d99781628c6178af1e1
|
||||
|
||||
export const DocsTools: React.FC = () => {
|
||||
return (
|
||||
<SiteWrap theme="light">
|
||||
<DocumentTitle {...documentConstants.DOCS} />
|
||||
<Hero title="Tools" />
|
||||
<Section maxWidth="1030px" isPadded={false}>
|
||||
<DocsPageLayout title="Tools">
|
||||
<InstantSearch searchClient={searchClient} indexName="0x_tools_test">
|
||||
<Columns>
|
||||
<Filters filters={filters} />
|
||||
@@ -67,8 +59,7 @@ export const DocsTools: React.FC = () => {
|
||||
</article>
|
||||
</Columns>
|
||||
</InstantSearch>
|
||||
</Section>
|
||||
</SiteWrap>
|
||||
</DocsPageLayout>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -112,21 +103,3 @@ const featuredLinks = [
|
||||
url: 'https://0x.org',
|
||||
},
|
||||
];
|
||||
|
||||
const resources = [
|
||||
{
|
||||
heading: '0x Mesh - your gateway to networked liquidity',
|
||||
description:
|
||||
'Learn about the 0x peer-to-peer network for sharing orders and how you can use it to tap into networked liquidity.',
|
||||
tags: ['Relayer', 'Dogs', 'Bells and whistles', 'Interstellar', 'Maharaji'],
|
||||
url: 'https://0x.org',
|
||||
isCommunity: true,
|
||||
},
|
||||
{
|
||||
heading: '0x Mesh - your gateway to networked liquidity',
|
||||
description:
|
||||
'The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs',
|
||||
tags: ['Api explorer', 'Relayer'],
|
||||
url: 'https://0x.org',
|
||||
},
|
||||
];
|
||||
|
||||
@@ -7,31 +7,24 @@ import capitalize from 'lodash/capitalize';
|
||||
|
||||
import { MDXProvider } from '@mdx-js/react';
|
||||
|
||||
import CircularProgress from 'material-ui/CircularProgress';
|
||||
import { Code } from 'ts/components/docs/mdx/code';
|
||||
import { CodeTabs } from 'ts/components/docs/mdx/code_tabs';
|
||||
import { H1, H2, H3, H4 } from 'ts/components/docs/mdx/headings';
|
||||
import { HelpCallout } from 'ts/components/docs/mdx/help_callout';
|
||||
import { HelpfulCta } from 'ts/components/docs/mdx/helpful_cta';
|
||||
import { InlineCode } from 'ts/components/docs/mdx/inline_code';
|
||||
import { InlineLink } from 'ts/components/docs/mdx/inline_link';
|
||||
import { Notification } from 'ts/components/docs/mdx/notification';
|
||||
import { OrderedList } from 'ts/components/docs/mdx/ordered_list';
|
||||
import { Table } from 'ts/components/docs/mdx/table';
|
||||
import { UnorderedList } from 'ts/components/docs/mdx/unordered_list';
|
||||
|
||||
import { Code } from 'ts/components/docs/code';
|
||||
import { CodeTabs } from 'ts/components/docs/code_tabs';
|
||||
import { H1, H2, H3, H4 } from 'ts/components/docs/headings';
|
||||
import { HelpCallout } from 'ts/components/docs/help_callout';
|
||||
import { HelpfulCta } from 'ts/components/docs/helpful_cta';
|
||||
import { Hero } from 'ts/components/docs/hero';
|
||||
import { InlineCode } from 'ts/components/docs/inline_code';
|
||||
import { InlineLink } from 'ts/components/docs/inline_link';
|
||||
import { Notification } from 'ts/components/docs/notification';
|
||||
import { OrderedList } from 'ts/components/docs/ordered_list';
|
||||
import { DocsPageLayout } from 'ts/components/docs/layout/docs_page_layout';
|
||||
import { Separator } from 'ts/components/docs/separator';
|
||||
import { IContents, TableOfContents } from 'ts/components/docs/sidebar/table_of_contents';
|
||||
import { SiteWrap } from 'ts/components/docs/siteWrap';
|
||||
import { Table } from 'ts/components/docs/table';
|
||||
import { UnorderedList } from 'ts/components/docs/unordered_list';
|
||||
import { DocumentTitle } from 'ts/components/document_title';
|
||||
import { Section } from 'ts/components/newLayout';
|
||||
|
||||
import { Paragraph } from 'ts/components/text';
|
||||
|
||||
import { documentConstants } from 'ts/utils/document_meta_constants';
|
||||
|
||||
import { colors } from 'ts/style/colors';
|
||||
|
||||
interface IDocsViewProps {
|
||||
match: match<any>;
|
||||
}
|
||||
@@ -68,15 +61,11 @@ export const DocsView: React.FC<IDocsViewProps> = props => {
|
||||
contents: component.tableOfContents(),
|
||||
});
|
||||
}
|
||||
// @TODO: add error handling if needed
|
||||
// @INFO: add error handling if needed
|
||||
};
|
||||
|
||||
return (
|
||||
<SiteWrap theme="light">
|
||||
<DocumentTitle {...documentConstants.DOCS} />
|
||||
<Hero title={title} />
|
||||
<Section maxWidth="1150px" isPadded={false} overflow="visible">
|
||||
{Component ? (
|
||||
<DocsPageLayout title={title} loading={!Component}>
|
||||
<Columns>
|
||||
<TableOfContents contents={contents} />
|
||||
<Separator />
|
||||
@@ -90,23 +79,10 @@ export const DocsView: React.FC<IDocsViewProps> = props => {
|
||||
<HelpfulCta page={page} />
|
||||
</ContentWrapper>
|
||||
</Columns>
|
||||
) : (
|
||||
<LoaderWrapper>
|
||||
<CircularProgress size={40} thickness={2} color={colors.brandLight} />
|
||||
</LoaderWrapper>
|
||||
)}
|
||||
</Section>
|
||||
</SiteWrap>
|
||||
</DocsPageLayout>
|
||||
);
|
||||
};
|
||||
|
||||
const LoaderWrapper = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 300px;
|
||||
`;
|
||||
|
||||
const Columns = styled.div`
|
||||
display: grid;
|
||||
grid-template-columns: 130px 0 1fr;
|
||||
|
||||
Reference in New Issue
Block a user