88 lines
3.0 KiB
TypeScript
88 lines
3.0 KiB
TypeScript
|
import { Box, Chip, Typography, useTheme } from "@mui/material";
|
|||
|
|
|
|||
|
|
|
|||
|
|
interface Props {
|
|||
|
|
image: any;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default function QuizTemplateCard({ image }: Props) {
|
|||
|
|
const theme = useTheme();
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
borderRadius: "12px",
|
|||
|
|
height: "280px",
|
|||
|
|
width: "360px",
|
|||
|
|
minWidth: "200px",
|
|||
|
|
backgroundColor: "white",
|
|||
|
|
overflow: "hidden",
|
|||
|
|
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)`,
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
width: "100%",
|
|||
|
|
height: "219px",
|
|||
|
|
backgroundImage: `url(${image})`,
|
|||
|
|
backgroundRepeat: "no-repeat",
|
|||
|
|
backgroundPosition: "center",
|
|||
|
|
display: "flex",
|
|||
|
|
alignItems: "end",
|
|||
|
|
p: "20px",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
display: "flex",
|
|||
|
|
flexWrap: "wrap",
|
|||
|
|
gap: "20px",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Chip
|
|||
|
|
sx={{
|
|||
|
|
backgroundColor: theme.palette.brightPurple.main,
|
|||
|
|
color: "white",
|
|||
|
|
height: "auto",
|
|||
|
|
px: "10px",
|
|||
|
|
py: "2px",
|
|||
|
|
borderRadius: "8px",
|
|||
|
|
...theme.typography.button,
|
|||
|
|
"& .MuiChip-label":{
|
|||
|
|
px: 0,
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
label="Услуги"
|
|||
|
|
/>
|
|||
|
|
<Chip
|
|||
|
|
sx={{
|
|||
|
|
backgroundColor: theme.palette.brightPurple.main,
|
|||
|
|
color: "white",
|
|||
|
|
height: "auto",
|
|||
|
|
px: "10px",
|
|||
|
|
py: "2px",
|
|||
|
|
borderRadius: "8px",
|
|||
|
|
...theme.typography.button,
|
|||
|
|
"& .MuiChip-label":{
|
|||
|
|
px: 0,
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
label="Медицина"
|
|||
|
|
/>
|
|||
|
|
</Box>
|
|||
|
|
</Box>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
p: "20px",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Typography sx={{ color: "#4D4D4D" }}>Название шаблона</Typography>
|
|||
|
|
</Box>
|
|||
|
|
</Box>
|
|||
|
|
);
|
|||
|
|
}
|