127 lines
4.7 KiB
TypeScript
127 lines
4.7 KiB
TypeScript
|
import { Box, IconButton, Typography, useTheme } from "@mui/material";
|
|||
|
|
import ChartIcon from "./icons/ChartIcon";
|
|||
|
|
import CustomButton from "./CustomButton";
|
|||
|
|
import LinkIcon from "./icons/LinkIcon";
|
|||
|
|
import PencilIcon from "./icons/PencilIcon";
|
|||
|
|
import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
|
|||
|
|
|
|||
|
|
|
|||
|
|
interface Props {
|
|||
|
|
name: string;
|
|||
|
|
openCount?: number;
|
|||
|
|
applicationCount?: number;
|
|||
|
|
conversionPercent?: number;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default function QuizCard({ name, openCount = 0, applicationCount = 0, conversionPercent = 0 }: Props) {
|
|||
|
|
const theme = useTheme();
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
display: "flex",
|
|||
|
|
flexDirection: "column",
|
|||
|
|
backgroundColor: "white",
|
|||
|
|
width: "560px",
|
|||
|
|
height: "280px",
|
|||
|
|
p: "20px",
|
|||
|
|
borderRadius: "12px",
|
|||
|
|
boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
|
|||
|
|
0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
|
|||
|
|
0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
|
|||
|
|
0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
|
|||
|
|
0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
|
|||
|
|
0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`,
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Typography variant="h5">{name}</Typography>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
display: "flex",
|
|||
|
|
alignItems: "center",
|
|||
|
|
mt: "10px",
|
|||
|
|
gap: "10px",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<LinkIcon bgcolor="#EEE4FC" color={theme.palette.brightPurple.main} />
|
|||
|
|
<Typography color={theme.palette.grey3.main}>быстрая ссылка ...</Typography>
|
|||
|
|
</Box>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
display: "flex",
|
|||
|
|
mt: "32px",
|
|||
|
|
mr: "22px",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Box sx={{flex: "1 1 0"}}>
|
|||
|
|
<Typography variant="h5">{openCount}</Typography>
|
|||
|
|
<Typography color={theme.palette.grey3.main}>Открытий</Typography>
|
|||
|
|
</Box>
|
|||
|
|
<Box sx={{flex: "1 1 0"}}>
|
|||
|
|
<Typography variant="h5">{openCount}</Typography>
|
|||
|
|
<Typography color={theme.palette.grey3.main}>Заявок</Typography>
|
|||
|
|
</Box>
|
|||
|
|
<Box sx={{flex: "1 1 0"}}>
|
|||
|
|
<Typography variant="h5">{openCount} %</Typography>
|
|||
|
|
<Typography color={theme.palette.grey3.main}>Конверсия</Typography>
|
|||
|
|
</Box>
|
|||
|
|
</Box>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
mt: "auto",
|
|||
|
|
display: "flex",
|
|||
|
|
gap: "20px",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<CustomButton
|
|||
|
|
variant="contained"
|
|||
|
|
sx={{
|
|||
|
|
backgroundColor: theme.palette.brightPurple.main,
|
|||
|
|
width: "140px",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
Заявки
|
|||
|
|
</CustomButton>
|
|||
|
|
<CustomButton
|
|||
|
|
variant="outlined"
|
|||
|
|
startIcon={<PencilIcon />}
|
|||
|
|
sx={{
|
|||
|
|
borderColor: theme.palette.brightPurple.main,
|
|||
|
|
color: theme.palette.brightPurple.main,
|
|||
|
|
px: "21px",
|
|||
|
|
py: "9px",
|
|||
|
|
width: "auto",
|
|||
|
|
"& .MuiButton-startIcon": {
|
|||
|
|
mr: "4px",
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
Редактировать
|
|||
|
|
</CustomButton>
|
|||
|
|
<CustomButton
|
|||
|
|
variant="outlined"
|
|||
|
|
startIcon={<ChartIcon />}
|
|||
|
|
sx={{
|
|||
|
|
borderColor: theme.palette.brightPurple.main,
|
|||
|
|
color: theme.palette.brightPurple.main,
|
|||
|
|
p: "9px",
|
|||
|
|
width: "auto",
|
|||
|
|
minWidth: 0,
|
|||
|
|
"& .MuiButton-startIcon": {
|
|||
|
|
mr: 0,
|
|||
|
|
ml: 0,
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
<IconButton
|
|||
|
|
sx={{
|
|||
|
|
color: theme.palette.brightPurple.main,
|
|||
|
|
ml: "auto",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<MoreHorizIcon sx={{ transform: "scale(1.75)" }} />
|
|||
|
|
</IconButton>
|
|||
|
|
</Box>
|
|||
|
|
</Box >
|
|||
|
|
);
|
|||
|
|
}
|