diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-11-30 05:45:40 +0800 |
---|---|---|
committer | Fred Carlsen <fred@sjelfull.no> | 2018-12-06 18:53:46 +0800 |
commit | a20d54781468c38c1dc524e976db93b80ad2a043 (patch) | |
tree | dc62ce96390373d1ed22f327a72e59fbe5265b14 /packages/website/ts/pages/instant/configurator.tsx | |
parent | 3dcb874e08389f82d66e8b3458863509ec525a02 (diff) | |
download | dexon-sol-tools-a20d54781468c38c1dc524e976db93b80ad2a043.tar dexon-sol-tools-a20d54781468c38c1dc524e976db93b80ad2a043.tar.gz dexon-sol-tools-a20d54781468c38c1dc524e976db93b80ad2a043.tar.bz2 dexon-sol-tools-a20d54781468c38c1dc524e976db93b80ad2a043.tar.lz dexon-sol-tools-a20d54781468c38c1dc524e976db93b80ad2a043.tar.xz dexon-sol-tools-a20d54781468c38c1dc524e976db93b80ad2a043.tar.zst dexon-sol-tools-a20d54781468c38c1dc524e976db93b80ad2a043.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> ); |