packages/instant/src/components/standard_panel_content.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
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>
);