aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/components/standard_panel_content.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/instant/src/components/standard_panel_content.tsx')
-rw-r--r--packages/instant/src/components/standard_panel_content.tsx62
1 files changed, 62 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..582b3318e
--- /dev/null
+++ b/packages/instant/src/components/standard_panel_content.tsx
@@ -0,0 +1,62 @@
+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 SPACING_BETWEEN_PX = '20px';
+
+export const StandardPanelContent: React.StatelessComponent<StandardPanelContentProps> = ({
+ image,
+ title,
+ description,
+ moreInfoSettings,
+ action,
+}) => (
+ <Container height="100%">
+ <Flex direction="column" height="calc(100% - 58px)">
+ <Container marginBottom={SPACING_BETWEEN_PX}>{image}</Container>
+ {title && (
+ <Container marginBottom={SPACING_BETWEEN_PX}>
+ <Text fontSize="20px" fontWeight={700} fontColor={ColorOption.black}>
+ {title}
+ </Text>
+ </Container>
+ )}
+ <Container marginBottom={SPACING_BETWEEN_PX}>
+ <Text fontSize="14px" fontColor={ColorOption.grey} center={true}>
+ {description}
+ </Text>
+ </Container>
+ <Container marginBottom={SPACING_BETWEEN_PX}>
+ {moreInfoSettings && (
+ <Text
+ center={true}
+ fontSize="13px"
+ textDecorationLine="underline"
+ fontColor={ColorOption.lightGrey}
+ href={moreInfoSettings.href}
+ >
+ {moreInfoSettings.text}
+ </Text>
+ )}
+ </Container>
+ </Flex>
+ <Container>{action}</Container>
+ </Container>
+);