84 lines
2.9 KiB
TypeScript
84 lines
2.9 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 upXs = useMediaQuery(theme.breakpoints.up("xs"));
|
|
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:upMd ? "72px" : undefined,
|
|
px: "20px",
|
|
pt: upMd ? "29px" : "26px",
|
|
pb: upMd ? "21px" : "20px",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
cursor: "pointer",
|
|
userSelect: "none",
|
|
rowGap:"10px",
|
|
flexDirection: upXs ? undefined :"column",
|
|
}}
|
|
>
|
|
<Typography
|
|
sx={{
|
|
fontSize: upMd ? undefined : "16px",
|
|
lineHeight: upMd ? undefined : "19px",
|
|
fontWeight: 500,
|
|
color: theme.palette.grey3.main,
|
|
px: 0,
|
|
}}
|
|
>{header}</Typography>
|
|
<Box sx={{width:"32px", height:"33px"}}>
|
|
<ExpandIcon isExpanded={isExpanded} />
|
|
</Box>
|
|
</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>
|
|
);
|
|
} |