79 lines
2.6 KiB
TypeScript
79 lines
2.6 KiB
TypeScript
|
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||
|
|
import { useState } from "react";
|
||
|
|
import ExpandIcon from "./icons/ExpandIcon";
|
||
|
|
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
header: string;
|
||
|
|
text: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function CustomAccordion({ header, text }: Props) {
|
||
|
|
const theme = useTheme();
|
||
|
|
const upMd = useMediaQuery(theme.breakpoints.up("md"));
|
||
|
|
const [isExpanded, setIsExpanded] = useState<boolean>(false);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Box
|
||
|
|
sx={{
|
||
|
|
backgroundColor: "white",
|
||
|
|
"&:first-of-type": {
|
||
|
|
borderTopLeftRadius: "12px",
|
||
|
|
borderTopRightRadius: "12px",
|
||
|
|
},
|
||
|
|
"&:last-of-type": {
|
||
|
|
borderBottomLeftRadius: "12px",
|
||
|
|
borderBottomRightRadius: "12px",
|
||
|
|
},
|
||
|
|
"&:not(:last-of-type)": {
|
||
|
|
borderBottom: `1px solid ${theme.palette.grey2.main}`,
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Box
|
||
|
|
onClick={() => setIsExpanded(prev => !prev)}
|
||
|
|
sx={{
|
||
|
|
height: "72px",
|
||
|
|
px: "20px",
|
||
|
|
pt: upMd ? "29px" : "26px",
|
||
|
|
pb: upMd ? "21px" : "20px",
|
||
|
|
display: "flex",
|
||
|
|
alignItems: "center",
|
||
|
|
justifyContent: "space-between",
|
||
|
|
cursor: "pointer",
|
||
|
|
userSelect: "none",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Typography
|
||
|
|
sx={{
|
||
|
|
fontSize: upMd ? undefined : "16px",
|
||
|
|
lineHeight: upMd ? undefined : "19px",
|
||
|
|
fontWeight: 500,
|
||
|
|
color: theme.palette.grey3.main,
|
||
|
|
px: 0,
|
||
|
|
}}
|
||
|
|
>{header}</Typography>
|
||
|
|
<ExpandIcon isExpanded={isExpanded} />
|
||
|
|
</Box>
|
||
|
|
{isExpanded &&
|
||
|
|
<Box
|
||
|
|
sx={{
|
||
|
|
px: "20px",
|
||
|
|
py: upMd ? "25px" : undefined,
|
||
|
|
pt: upMd ? undefined : "15px",
|
||
|
|
pb: upMd ? undefined : "25px",
|
||
|
|
backgroundColor: "#F1F2F6"
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Typography
|
||
|
|
sx={{
|
||
|
|
fontSize: upMd ? undefined : "16px",
|
||
|
|
lineHeight: upMd ? undefined : "19px",
|
||
|
|
color: theme.palette.grey3.main,
|
||
|
|
}}
|
||
|
|
>{text}</Typography>
|
||
|
|
</Box>
|
||
|
|
}
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
}
|