frontPanel/src/components/ExpandableQuizBlock.tsx

83 lines
2.6 KiB
TypeScript
Raw Normal View History

2022-12-09 11:48:15 +00:00
import { Box, IconButton, Typography, useTheme } from "@mui/material";
import ExpandIcon from "./icons/ExpandIcon";
import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
import CustomButton from "./CustomButton";
interface Props {
name: string;
}
export default function ExpandableQuizBlock({ name }: Props) {
const theme = useTheme();
return (
<Box
sx={{
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
}}
>
<Typography variant="h5" mb="5px">Название</Typography>
<Box
sx={{
flexGrow: 1,
width: "auto",
height: "10px",
borderBottom: "1px solid #9A9AAF",
mx: "5px",
mb: "0px",
}}
/>
<Typography color={theme.palette.grey3.main} mb="0px" >Все заявки проекта</Typography>
<IconButton
sx={{
height: "32px",
ml: "10px",
p: 0,
}}
><ExpandIcon /></IconButton>
<IconButton
sx={{
color: theme.palette.brightPurple.main,
ml: "16px",
}}
>
<MoreHorizIcon sx={{ transform: "scale(1.75)" }} />
</IconButton>
</Box>
<Box
sx={{
display: "flex",
gap: "16px",
mt: "25px",
}}
>
<CustomButton
variant="outlined"
sx={{
p: "9px",
flexGrow: 1,
borderColor: theme.palette.brightPurple.main,
backgroundColor: "#EEE4FC",
color: theme.palette.grey3.main,
}}
>Квизов нет</CustomButton>
<CustomButton
variant="contained"
sx={{
backgroundColor: theme.palette.brightPurple.main,
p: "10px",
width: "44px",
minWidth: "44px",
}}
>+</CustomButton>
</Box>
</Box>
);
}