diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-11-30 05:45:40 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-11-30 05:45:40 +0800 |
commit | a41dfa9ae0924a342324e49d9a3eba22fb255667 (patch) | |
tree | ca8edd3898edd8af477dde0e7c8248dea4150f54 /packages/website/ts/pages/instant/configurator.tsx | |
parent | 09e2157639ad2d986b80f5480a1e9188a56ff3f9 (diff) | |
download | dexon-0x-contracts-a41dfa9ae0924a342324e49d9a3eba22fb255667.tar dexon-0x-contracts-a41dfa9ae0924a342324e49d9a3eba22fb255667.tar.gz dexon-0x-contracts-a41dfa9ae0924a342324e49d9a3eba22fb255667.tar.bz2 dexon-0x-contracts-a41dfa9ae0924a342324e49d9a3eba22fb255667.tar.lz dexon-0x-contracts-a41dfa9ae0924a342324e49d9a3eba22fb255667.tar.xz dexon-0x-contracts-a41dfa9ae0924a342324e49d9a3eba22fb255667.tar.zst dexon-0x-contracts-a41dfa9ae0924a342324e49d9a3eba22fb255667.zip |
feat: implement configurator layout
Diffstat (limited to 'packages/website/ts/pages/instant/configurator.tsx')
-rw-r--r-- | packages/website/ts/pages/instant/configurator.tsx | 27 |
1 files changed, 24 insertions, 3 deletions
diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx index 09a51d0bb..29a3e2b1e 100644 --- a/packages/website/ts/pages/instant/configurator.tsx +++ b/packages/website/ts/pages/instant/configurator.tsx @@ -1,6 +1,8 @@ import * as React from 'react'; 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 { colors } from 'ts/style/colors'; @@ -9,8 +11,27 @@ export interface ConfiguratorProps { } export const Configurator = (props: ConfiguratorProps) => ( - <Container className="flex" id={props.hash} height="400px" backgroundColor={colors.instantTertiaryBackground}> - <Container> Forms </Container> - <CodeDemo /> + <Container + className="flex justify-center py4 px3" + 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> ); |