59 lines
1.2 KiB
TypeScript
59 lines
1.2 KiB
TypeScript
|
import { Box, Typography } from '@mui/material'
|
||
|
|
import { ReactElement } from 'react'
|
||
|
|
|
||
|
|
import styles from './style.module.scss'
|
||
|
|
|
||
|
|
interface CardComponentProps {
|
||
|
|
icon: ReactElement
|
||
|
|
title: ReactElement
|
||
|
|
description: ReactElement
|
||
|
|
actions?: ReactElement
|
||
|
|
}
|
||
|
|
|
||
|
|
export const CardComponent = ({
|
||
|
|
icon,
|
||
|
|
title,
|
||
|
|
description,
|
||
|
|
actions
|
||
|
|
}: CardComponentProps) => {
|
||
|
|
return (
|
||
|
|
<div className={styles.card}>
|
||
|
|
<Box
|
||
|
|
className={styles.content}
|
||
|
|
display={'flex'}
|
||
|
|
gap={'20px'}
|
||
|
|
flexDirection={'row'}
|
||
|
|
>
|
||
|
|
<Box className={styles.icon}>{icon}</Box>
|
||
|
|
<Box>
|
||
|
|
<Typography
|
||
|
|
variant="h3"
|
||
|
|
sx={{
|
||
|
|
fontWeight: 'bold',
|
||
|
|
fontSize: '24px',
|
||
|
|
letterSpacing: '1px',
|
||
|
|
lineHeight: '1.2'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{title}
|
||
|
|
</Typography>
|
||
|
|
<Typography
|
||
|
|
sx={{
|
||
|
|
mt: '10px',
|
||
|
|
fontSize: '14px',
|
||
|
|
lineHeight: '25px',
|
||
|
|
letterSpacing: '1px',
|
||
|
|
fontWeight: '500'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{description}
|
||
|
|
</Typography>
|
||
|
|
</Box>
|
||
|
|
</Box>
|
||
|
|
<Box mt={'auto'} textAlign={'right'}>
|
||
|
|
{actions}
|
||
|
|
</Box>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|