crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added temp mapping content to section in tools

Browse Source
This commit is contained in:
Piotr Janosz
2019-07-10 12:23:47 +02:00
committed by fabioberger
parent 95b7ae3146
commit c7fbd6c64c
3 changed files with 90 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/website/ts/components/docs/sidebar/filters.tsx
View File

@@ -36,9 +36,9 @@ export const Filters: React.FC<IFiltersProps> = ({ groups }) => {
);
};
const FiltersWrapper = styled.div`
const FiltersWrapper = styled.aside`
position: relative;
max-width: 702px;
max-width: 700px;
`;
const FiltersGroupWrapper = styled.div`

6
packages/website/ts/pages/docs/guides.tsx
View File

@@ -13,12 +13,10 @@ export const DocsGuides: React.FC = () => {
return (
<SiteWrap theme="light">
<DocumentTitle {...documentConstants.DOCS} />
<Hero isHome={false} title={`Guides`} />
<Hero isHome={false} title="Guides" />
<Section maxWidth={'1030px'} isPadded={false} padding="0 0">
<Columns>
<aside>
<Filters groups={filterGroups} />
</aside>
<Filters groups={filterGroups} />
<article>
<Resource
heading="0x Mesh - your gateway to networked liquidity"

142
packages/website/ts/pages/docs/tools.tsx
View File

@@ -16,67 +16,57 @@ export const DocsTools: React.FC = () => {
return (
<SiteWrap theme="light">
<DocumentTitle {...documentConstants.DOCS} />
<Hero isHome={false} title={`Tools`} />
<Section maxWidth={'1030px'} isPadded={false} padding="0 0">
<Hero isHome={false} title="Tools" />
<Section maxWidth="1030px" isPadded={false}>
<Columns>
<aside>
<Filters groups={filterGroups} />
</aside>
<Filters groups={filterGroups} />
<article>
<Heading asElement="h2" size="default">
Featured Tools
</Heading>
<FeatureLink
heading="0x Code Sandbox"
description="A description could possibly go here but could be tight."
icon="flexibleIntegration"
url="https://0x.org"
/>
<FeatureLink
heading="RadarRelay SDK"
description="A description could possibly go here but could be tight."
icon="flexibleIntegration"
url="https://0x.org"
/>
<FeatureLink
heading="RadarRelay SDK"
description="A description could possibly go here but could be tight."
icon="flexibleIntegration"
url="https://0x.org"
/>
<Heading asElement="h2" size="default">
Docker Images
</Heading>
<FeaturedToolsWrapper>
<Heading asElement="h2" size="default">
Featured Tools
</Heading>
{featuredLinks.map((link, index) => (
<FeatureLink
key={`featuredLink-${index}`}
heading={link.heading}
description={link.description}
icon={link.icon}
url={link.url}
/>
))}
</FeaturedToolsWrapper>
<Resource
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={[{ label: 'Relayer' }]}
url="https://0x.org"
/>
<ResourcesWrapper>
<Heading asElement="h2" size="default">
Docker Images
</Heading>
<Resource
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={[{ label: 'Community Maintained', isInverted: true }, { label: 'Relayer' }]}
url="https://0x.org"
/>
<Heading asElement="h2" size="default">
TypeScript Libraries
</Heading>
{resources.map((resource, index) => (
<Resource
key={`resource-${index}`}
heading={resource.heading}
description={resource.description}
tags={resource.tags}
url={resource.url}
/>
))}
</ResourcesWrapper>
<Resource
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={[{ label: 'Relayer' }]}
url="https://0x.org"
/>
<Resource
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={[{ label: 'Community Maintained', isInverted: true }, { label: 'Relayer' }]}
url="https://0x.org"
/>
<ResourcesWrapper>
<Heading asElement="h2" size="default">
TypeScript Libraries
</Heading>
{resources.map((resource, index) => (
<Resource
key={`resource-${index}`}
heading={resource.heading}
description={resource.description}
tags={resource.tags}
url={resource.url}
/>
))}
</ResourcesWrapper>
</article>
</Columns>
</Section>
@@ -91,6 +81,14 @@ const Columns = styled.div`
grid-row-gap: 30px;
`;
const FeaturedToolsWrapper = styled.div`
margin-bottom: 50px;
`;
const ResourcesWrapper = styled.div`
margin-bottom: 40px;
`;
const filterGroups: FilterGroup[] = [
{
heading: 'Type',
@@ -173,3 +171,35 @@ const filterGroups: FilterGroup[] = [
],
},
];
const featuredLinks = [
{
heading: '0x Code Sandbox',
description: 'A description could possibly go here but could be tight.',
icon: 'flexibleIntegration',
url: 'https://0x.org',
},
{
heading: '0x Code Sandbox',
description: 'A description could possibly go here but could be tight.',
icon: 'flexibleIntegration',
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: [{ label: 'Relayer' }],
url: 'https://0x.org',
},
{
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: [{ label: 'Community Maintained', isInverted: true }, { label: 'Relayer' }],
url: 'https://0x.org',
},
];