47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
import { PropsWithChildren, Suspense, useCallback } from "react";
|
|
import { useIsMobile } from "@/hooks/use-is-mobile";
|
|
import Drawer from "./drawer";
|
|
import Modal from "./modal";
|
|
import { ScrollArea, Flex, Loader } 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;
|
|
|
|
if (!opened) return null;
|
|
|
|
return (
|
|
<SheetComponent
|
|
title={title}
|
|
opened={opened}
|
|
onChange={onChange}
|
|
onClose={handleClose}
|
|
>
|
|
<Suspense fallback={
|
|
<Flex justify='center' align='center' w='100%' style={{ minHeight: '25vh' }}>
|
|
<Loader size='lg' />
|
|
</Flex>
|
|
}>
|
|
<ScrollArea.Autosize
|
|
style={{ flex: 1, maxHeight: '75dvh' }}
|
|
scrollbarSize={8}
|
|
scrollbars="y"
|
|
type="scroll"
|
|
>
|
|
{children}
|
|
</ScrollArea.Autosize>
|
|
</Suspense>
|
|
</SheetComponent>
|
|
);
|
|
};
|
|
|
|
export default Sheet;
|