54 lines
1.3 KiB
TypeScript
54 lines
1.3 KiB
TypeScript
|
import { Box, ContainerColor, Text } from 'folds';
|
||
|
|
import React, { ReactNode } from 'react';
|
||
|
|
import classNames from 'classnames';
|
||
|
|
import { BreakWord } from '../../styles/Text.css';
|
||
|
|
import { ContainerColor as ContainerClr } from '../../styles/ContainerColor.css';
|
||
|
|
import * as css from './styles.css';
|
||
|
|
|
||
|
|
type InfoCardProps = {
|
||
|
|
variant?: ContainerColor;
|
||
|
|
title?: ReactNode;
|
||
|
|
description?: ReactNode;
|
||
|
|
before?: ReactNode;
|
||
|
|
after?: ReactNode;
|
||
|
|
children?: ReactNode;
|
||
|
|
};
|
||
|
|
export function InfoCard({
|
||
|
|
variant = 'Primary',
|
||
|
|
title,
|
||
|
|
description,
|
||
|
|
before,
|
||
|
|
after,
|
||
|
|
children,
|
||
|
|
}: InfoCardProps) {
|
||
|
|
return (
|
||
|
|
<Box
|
||
|
|
direction="Column"
|
||
|
|
className={classNames(css.InfoCard, ContainerClr({ variant }))}
|
||
|
|
gap="300"
|
||
|
|
>
|
||
|
|
<Box gap="200" alignItems="Center">
|
||
|
|
{before && (
|
||
|
|
<Box shrink="No" alignSelf="Start">
|
||
|
|
{before}
|
||
|
|
</Box>
|
||
|
|
)}
|
||
|
|
<Box grow="Yes" direction="Column" gap="100">
|
||
|
|
{title && (
|
||
|
|
<Text size="L400" className={BreakWord}>
|
||
|
|
{title}
|
||
|
|
</Text>
|
||
|
|
)}
|
||
|
|
{description && (
|
||
|
|
<Text size="T200" className={BreakWord}>
|
||
|
|
{description}
|
||
|
|
</Text>
|
||
|
|
)}
|
||
|
|
</Box>
|
||
|
|
{after && <Box shrink="No">{after}</Box>}
|
||
|
|
</Box>
|
||
|
|
{children}
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
}
|