53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
|
import { ReactNode, useState } from "react";
|
||
|
|
import { Box, Typography, useTheme } from "@mui/material";
|
||
|
|
import ExpandIcon from "./ExpandIcon";
|
||
|
|
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
headerText: string;
|
||
|
|
children: ReactNode;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function Collapse({ headerText, children }: Props) {
|
||
|
|
const theme = useTheme();
|
||
|
|
const [isExpanded, setIsExpanded] = useState<boolean>(false);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Box
|
||
|
|
sx={{
|
||
|
|
position: "relative",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Box
|
||
|
|
onClick={() => setIsExpanded(prev => !prev)}
|
||
|
|
sx={{
|
||
|
|
height: "72px",
|
||
|
|
p: "16px",
|
||
|
|
backgroundColor: theme.palette.menu.main,
|
||
|
|
borderRadius: "12px",
|
||
|
|
|
||
|
|
display: "flex",
|
||
|
|
justifyContent: "space-between",
|
||
|
|
alignItems: "center",
|
||
|
|
cursor: "pointer",
|
||
|
|
userSelect: "none",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Typography variant="h4">{headerText}</Typography>
|
||
|
|
<ExpandIcon isExpanded={isExpanded} />
|
||
|
|
</Box>
|
||
|
|
{isExpanded &&
|
||
|
|
<Box sx={{
|
||
|
|
mt: "8px",
|
||
|
|
position: "absolute",
|
||
|
|
zIndex: 100,
|
||
|
|
backgroundColor: theme.palette.content.main,
|
||
|
|
width: "100%",
|
||
|
|
}}>
|
||
|
|
{children}
|
||
|
|
</Box>
|
||
|
|
}
|
||
|
|
</Box >
|
||
|
|
|
||
|
|
);
|
||
|
|
}
|