init

src/components/sheet/sheet.tsx

@@ -0,0 +1,30 @@
+import { PropsWithChildren, useCallback } from "react";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+import Drawer from "./drawer";
+import Modal from "./modal";
+import { Box, ScrollArea } from "@mantine/core";
+
+interface SheetProps extends PropsWithChildren {
+  title?: string;
+  opened: boolean;
+  onChange: (next: boolean) => void;
+}
+
+const Sheet: React.FC<SheetProps> = ({ title, children, opened, onChange }) => {
+  const isMobile = useIsMobile();
+  const handleClose = useCallback(() => onChange(false), [onChange]);
+
+  const SheetComponent = isMobile ? Drawer : Modal;
+
+  return (
+    <SheetComponent title={title} opened={opened} onChange={onChange} onClose={handleClose}>
+      <ScrollArea style={{ flex: 1 }} scrollbarSize={8} scrollbars='y' type='scroll'>
+        <Box mah='70vh'>
+          {children}
+        </Box>
+      </ScrollArea>
+    </SheetComponent>
+  );
+};
+
+export default Sheet;