diff options
Diffstat (limited to 'packages/instant/src/components/standard_panel_content.tsx')
-rw-r--r-- | packages/instant/src/components/standard_panel_content.tsx | 61 |
1 files changed, 61 insertions, 0 deletions
diff --git a/packages/instant/src/components/standard_panel_content.tsx b/packages/instant/src/components/standard_panel_content.tsx new file mode 100644 index 000000000..da851b232 --- /dev/null +++ b/packages/instant/src/components/standard_panel_content.tsx @@ -0,0 +1,61 @@ +import * as React from 'react'; + +import { ColorOption } from '../style/theme'; + +import { Container } from './ui/container'; +import { Flex } from './ui/flex'; +import { Text } from './ui/text'; + +export interface MoreInfoSettings { + text: string; + href: string; +} + +export interface StandardPanelContentProps { + image: React.ReactNode; + title: string; + description: string; + moreInfoSettings?: MoreInfoSettings; + action: React.ReactNode; +} + +const spacingBetweenPx = '20px'; + +export const StandardPanelContent: React.StatelessComponent<StandardPanelContentProps> = ({ + image, + title, + description, + moreInfoSettings, + action, +}) => ( + <Container height="100%"> + <Flex direction="column" height="calc(100% - 55px)"> + <Container marginBottom={spacingBetweenPx}>{image}</Container> + <Container marginBottom={spacingBetweenPx}> + <Text fontSize="20px" fontWeight={700} fontColor={ColorOption.black}> + {title} + </Text> + </Container> + <Container marginBottom={spacingBetweenPx}> + <Text fontSize="14px" fontColor={ColorOption.grey} center={true}> + {description} + </Text> + </Container> + <Container marginBottom={spacingBetweenPx}> + {moreInfoSettings && ( + <a href={moreInfoSettings.href}> + <Text + center={true} + fontSize="13px" + textDecorationLine="underline" + fontColor={ColorOption.lightGrey} + > + {moreInfoSettings.text}> + </Text> + </a> + )} + </Container> + </Flex> + <Container>{action}</Container> + </Container> +); |