63 lines
1.5 KiB
TypeScript
63 lines
1.5 KiB
TypeScript
import { ReactNode } from "react";
|
|
import { Typography, Box, SxProps, Theme } from "@mui/material";
|
|
|
|
|
|
interface Props {
|
|
icon: ReactNode;
|
|
headerText: string;
|
|
headerHeight?: string;
|
|
text?: string;
|
|
textColor: string;
|
|
headerColor: string;
|
|
backgroundColor: string;
|
|
sx?: SxProps<Theme>;
|
|
sxHeader?: SxProps<Theme>;
|
|
bottomText?: string;
|
|
bottomTextSx?: SxProps<Theme>;
|
|
}
|
|
|
|
export default function IconTextCard({
|
|
icon,
|
|
headerText,
|
|
headerHeight = "56px",
|
|
text,
|
|
textColor,
|
|
backgroundColor,
|
|
sx,
|
|
sxHeader,
|
|
headerColor,
|
|
bottomText,
|
|
bottomTextSx,
|
|
}: Props) {
|
|
|
|
return (
|
|
<Box sx={{
|
|
borderRadius: "12px",
|
|
backgroundColor,
|
|
p: "20px",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
...sx,
|
|
}}>
|
|
{icon}
|
|
<Typography variant="h4" sx={{
|
|
mt: "14px",
|
|
mb: "10px",
|
|
minHeight: headerHeight,
|
|
color: headerColor,
|
|
...sxHeader
|
|
}}>{headerText}</Typography>
|
|
<Typography variant="t1" sx={{ color: textColor, flexGrow: 1 }}>{text}</Typography>
|
|
{bottomText &&
|
|
<Typography sx={{
|
|
mt: "32px",
|
|
fontWeight: 500,
|
|
fontSize: "16px",
|
|
lineHeight: "20px",
|
|
color: "#7E2AEA",
|
|
...bottomTextSx,
|
|
}}>{bottomText}</Typography>
|
|
}
|
|
</Box>
|
|
);
|
|
} |