38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
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';
|
|
|
|
export interface ConfiguratorProps {
|
|
hash: string;
|
|
}
|
|
|
|
export const Configurator = (props: ConfiguratorProps) => (
|
|
<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>
|
|
);
|