blob: 79b7bff24b94251f291416c0b05995f0ce478d46 (
plain) (
blame)
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
62
63
64
65
66
67
68
69
70
71
72
73
|
import * as React from 'react';
import { ColorOption } from '../style/theme';
import { util } from '../util/util';
import { Container } from './ui/container';
import { Flex } from './ui/flex';
import { Text } from './ui/text';
export interface MoreInfoSettings {
text: string;
href: string;
onClick?: () => void;
}
export interface StandardPanelContentProps {
image: React.ReactNode;
title?: string;
description: string;
moreInfoSettings?: MoreInfoSettings;
action: React.ReactNode;
}
const SPACING_BETWEEN_PX = '20px';
const onMoreInfoClick = (href: string, onClick?: () => void) => {
return () => {
if (onClick) {
onClick();
}
util.createOpenUrlInNewWindow(href)();
};
};
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}
onClick={onMoreInfoClick(moreInfoSettings.href, moreInfoSettings.onClick)}
>
{moreInfoSettings.text}
</Text>
)}
</Container>
</Flex>
<Container>{action}</Container>
</Container>
);
|
