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(false); return ( 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", }} > {headerText} {isExpanded && {children} } ); }