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

feat: implement configurator layout

Browse Source
This commit is contained in:
fragosti 2018-11-29 13:45:40 -08:00
parent 09e2157639
commit a41dfa9ae0
2 changed files with 29 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/website/ts/pages/instant/code_demo.tsx
View File

@ -9,6 +9,10 @@ import { Container } from 'ts/components/ui/container';
const CustomPre = styled.pre` const CustomPre = styled.pre`
margin: 0px; margin: 0px;
line-height: 24px; line-height: 24px;
overflow: hidden;
width: 600px;
height: 500px;
border-radius: 4px;
code { code {
background-color: inherit !important; background-color: inherit !important;
border-radius: 0px; border-radius: 0px;
@ -22,7 +26,7 @@ const CustomPre = styled.pre`
text-align: center; text-align: center;
padding-right: 5px !important; padding-right: 5px !important;
padding-left: 5px; padding-left: 5px;
margin-right: 5px; margin-right: 15px;
line-height: 25px; line-height: 25px;
padding-top: 10px; padding-top: 10px;
} }

27
packages/website/ts/pages/instant/configurator.tsx
View File

@ -1,6 +1,8 @@
import * as React from 'react'; import * as React from 'react';
import { Container } from 'ts/components/ui/container'; import { Container } from 'ts/components/ui/container';
import { Text } from 'ts/components/ui/text';
import { ActionLink } from 'ts/pages/instant/action_link';
import { CodeDemo } from 'ts/pages/instant/code_demo'; import { CodeDemo } from 'ts/pages/instant/code_demo';
import { colors } from 'ts/style/colors'; import { colors } from 'ts/style/colors';
@ -9,8 +11,27 @@ export interface ConfiguratorProps {
} }
export const Configurator = (props: ConfiguratorProps) => ( export const Configurator = (props: ConfiguratorProps) => (
<Container className="flex" id={props.hash} height="400px" backgroundColor={colors.instantTertiaryBackground}> <Container
<Container> Forms </Container> className="flex justify-center py4 px3"
<CodeDemo /> id={props.hash}
backgroundColor={colors.instantTertiaryBackground}
>
<Container className="mx3">
<Container className="mb3">
<Text fontSize="20px" lineHeight="28px" fontColor={colors.white} fontWeight={500}>
0x Instant Configurator
</Text>
</Container>
<Container height="400px" width="300px" backgroundColor="white" />
</Container>
<Container className="mx3">
<Container className="mb3 flex justify-between">
<Text fontSize="20px" lineHeight="28px" fontColor={colors.white} fontWeight={500}>
Code Snippet
</Text>
<ActionLink displayText="Explore the Docs" linkSrc="/docs/instant" color={colors.grey} />
</Container>
<CodeDemo />
</Container>
</Container> </Container>
); );