Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 | 1x 3x 1x 3x 3x 1x 3x 3x 3x | import { CaretDown } from "@assets/icons";
import { Text } from "@common/Text";
import {
Accordion,
AccordionDetails,
AccordionProps,
AccordionSummary,
AccordionSummaryProps,
Grid,
Stack,
SxProps,
styled,
} from "@mui/material";
import { palette } from "@palette";
import { ReactNode } from "react";
type Props = {
children: ReactNode | JSX.Element;
icon?: ReactNode;
title: string | ReactNode;
sx?: SxProps;
withExpandIcon?: boolean;
};
const CollapsableComponent = ({
children,
icon,
title,
sx,
withExpandIcon = true,
}: Props) => {
return (
<Stack position="relative" sx={sx}>
<CustomAccordion slotProps={{ transition: { unmountOnExit: true } }}>
<CustomSummary withExpandIcon={withExpandIcon}>
{typeof title === "string" ? (
<Stack direction="row" sx={{ gap: "8px" }} alignItems="center">
{icon}
<Text
fontSize="18px"
color="#575353"
sx={{
lineHeight: "120%",
}}
>
{title}
</Text>
</Stack>
) : (
<>{title}</>
)}
</CustomSummary>
<CustomDetails>
<Grid
container
rowSpacing="24px"
sx={{
marginTop: 0,
"&> div:first-of-type": {
padding: 0,
},
}}
>
{children}
</Grid>
</CustomDetails>
</CustomAccordion>
</Stack>
);
};
const CustomAccordion = styled((props: AccordionProps) => (
<Accordion elevation={0} disableGutters {...props} />
))(() => ({
boxShadow: `1px 1px 15px 0px rgba(161, 175, 180, 0.10)`,
border: "1px solid transparent",
borderRadius: "8px",
"&:not(:last-child)": {
borderBottom: 0,
},
"&:before": {
display: "none",
},
position: "initial"
}));
const CustomSummary = styled(
({
withExpandIcon,
...props
}: AccordionSummaryProps & { withExpandIcon?: boolean }) => (
<AccordionSummary
expandIcon={withExpandIcon ? <CaretDown /> : null}
{...props}
/>
),
)(({ withExpandIcon }) => ({
backgroundColor: palette.neutral.white,
flexDirection: "row",
"& .MuiAccordionSummary-content": {
margin: "0 !important",
paddingBlock: "8px",
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
},
"& .MuiAccordionSummary-expandIconWrapper.Mui-expanded": {
transform: "rotate(180deg)",
},
...(!withExpandIcon && {
"& .MuiAccordionSummary-expandIconWrapper": {
display: "none",
},
}),
}));
const CustomDetails = styled(AccordionDetails)(() => ({
padding: "16px 16px 8px",
}));
export default CollapsableComponent;
|