gitscope
← marzneshin / v0.5.3 / dashboard/src/components/settings-dialog/index.tsx
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/components/settings-dialog/index.tsx · TypeScript
Blame Raw
 1import { type FC, type PropsWithChildren, useEffect } from "react";
 2import {
 3  ScrollArea,
 4  Sheet,
 5  SheetContent,
 6  SheetHeader,
 7  SheetTitle,
 8} from "@marzneshin/components";
 9import { useTranslation } from "react-i18next";
10
11export interface SettingsDialogProps {
12  onOpenChange: (state: boolean) => void;
13  open: boolean;
14  onClose?: () => void;
15}
16
17export const SettingsDialog: FC<SettingsDialogProps & PropsWithChildren> = ({
18  open,
19  onOpenChange,
20  children,
21  onClose = () => null,
22}) => {
23  const { t } = useTranslation();
24
25  useEffect(() => {
26    if (!open) onClose();
27  }, [open, onClose]);
28
29  return (
30    <Sheet open={open} onOpenChange={onOpenChange}>
31      <SheetContent className="sm:min-w-full md:min-w-[700px] space-y-5">
32        <SheetHeader>
33          <SheetTitle>{t("settings")}</SheetTitle>
34        </SheetHeader>
35        <ScrollArea className="flex flex-col gap-4 h-[calc(100vh-100px)] max-h-full">
36          {children}
37        </ScrollArea>
38      </SheetContent>
39    </Sheet>
40  );
41};