54 lines
1.1 KiB
TypeScript
54 lines
1.1 KiB
TypeScript
import { ReactNode, useState } from "react";
|
|
import { Box, Typography, useTheme } from "@mui/material";
|
|
import ExpandIcon from "./ExpandIcon";
|
|
|
|
interface Props {
|
|
headerText: string;
|
|
children: (callback: () => void) => 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(() => setIsExpanded(false))}
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|