62 lines
2.4 KiB
TypeScript
62 lines
2.4 KiB
TypeScript
|
import Accordion from "@mui/material/Accordion";
|
||
|
|
import AccordionSummary from "@mui/material/AccordionSummary";
|
||
|
|
import AccordionDetails from "@mui/material/AccordionDetails";
|
||
|
|
import { Typography } from "@mui/material";
|
||
|
|
import ExpandIcon from "./ExpandIcon";
|
||
|
|
import { useState } from "react";
|
||
|
|
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
content: [string, string][];
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function AccordionWrapper({ content }: Props) {
|
||
|
|
const [expandedId, setExpandedId] = useState<number | null>(null);
|
||
|
|
|
||
|
|
const handleChange = (panelId: number) => (event: React.SyntheticEvent, newExpanded: boolean) => {
|
||
|
|
setExpandedId(newExpanded ? panelId : null);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
{content.map((accordionItem, index) => (
|
||
|
|
<Accordion
|
||
|
|
expanded={expandedId === index}
|
||
|
|
onChange={handleChange(index)}
|
||
|
|
disableGutters
|
||
|
|
key={index}
|
||
|
|
sx={{
|
||
|
|
boxShadow: "none",
|
||
|
|
"&.MuiAccordion-rounded:first-of-type": {
|
||
|
|
borderTopLeftRadius: "12px",
|
||
|
|
borderTopRightRadius: "12px",
|
||
|
|
},
|
||
|
|
"&.MuiAccordion-rounded:last-of-type": {
|
||
|
|
borderBottomLeftRadius: "12px",
|
||
|
|
borderBottomRightRadius: "12px",
|
||
|
|
},
|
||
|
|
"&.MuiAccordion-root:before": {
|
||
|
|
backgroundColor: "#9A9AAF",
|
||
|
|
opacity: 1,
|
||
|
|
}
|
||
|
|
}}>
|
||
|
|
<AccordionSummary
|
||
|
|
expandIcon={<ExpandIcon isExpanded={expandedId === index} />}
|
||
|
|
sx={{
|
||
|
|
height: "72px",
|
||
|
|
px: "20px",
|
||
|
|
pt: "29px",
|
||
|
|
pb: "21px",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Typography sx={{ fontWeight: 500, color: "#4D4D4D", px: 0 }}>{accordionItem[0]}</Typography>
|
||
|
|
</AccordionSummary>
|
||
|
|
<AccordionDetails sx={{ px: "20px", py: "25px", backgroundColor: "#F1F2F6" }}>
|
||
|
|
<Typography sx={{ color: "#4D4D4D" }}>{accordionItem[1]}</Typography>
|
||
|
|
</AccordionDetails>
|
||
|
|
</Accordion>
|
||
|
|
))}
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
|
||
|
|
}
|