39 lines
967 B
TypeScript
39 lines
967 B
TypeScript
import { PropsWithChildren, useCallback } from "react";
|
|
import { useIsMobile } from "@/hooks/use-is-mobile";
|
|
import Drawer from "./drawer";
|
|
import Modal from "./modal";
|
|
import { 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.Autosize
|
|
style={{ flex: 1, maxHeight: '75dvh' }}
|
|
scrollbarSize={8}
|
|
scrollbars="y"
|
|
type="scroll"
|
|
>
|
|
{children}
|
|
</ScrollArea.Autosize>
|
|
</SheetComponent>
|
|
);
|
|
};
|
|
|
|
export default Sheet;
|