gitscope
← marzneshin / v0.3.1 / dashboard/src/features/services/dialogs/settings.dialog.tsx
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/features/services/dialogs/settings.dialog.tsx · TypeScript
Blame Raw
 1import {
 2    Sheet,
 3    SheetContent,
 4    SheetHeader,
 5    SheetTitle,
 6    Tabs,
 7    TabsContent,
 8    TabsList,
 9    TabsTrigger,
10} from "@marzneshin/components"
11import { type FC, useEffect } from "react"
12import { useTranslation } from "react-i18next"
13import { ServiceType } from "..";
14import { ServiceInboundsTable } from "../tables/inbounds";
15import { ServicesUsersTable } from "../tables/users";
16
17interface ServicecSettingsDialogProps {
18    onOpenChange: (state: boolean) => void
19    open: boolean
20    entity: ServiceType
21    onClose: () => void;
22}
23
24export const ServiceSettingsDialog: FC<ServicecSettingsDialogProps> = ({
25    onOpenChange, open, entity, onClose
26}) => {
27    const { t } = useTranslation();
28
29    useEffect(() => {
30        if (!open) onClose();
31    }, [open, onClose]);
32
33    return (
34        <Sheet open={open} onOpenChange={onOpenChange}>
35            <SheetContent className="sm:min-w-full md:min-w-[700px]" >
36                <SheetHeader>
37                    <SheetTitle>
38                        {t('page.services.settings.title')}
39                    </SheetTitle>
40                </SheetHeader>
41                <Tabs className="my-3 w-full h-full" defaultValue="inbounds">
42                    <TabsList className="w-full">
43                        <TabsTrigger className="w-full" value="inbounds">{t('inbounds')}</TabsTrigger>
44                        <TabsTrigger className="w-full" value="users">{t('users')}</TabsTrigger>
45                    </TabsList>
46                    <TabsContent value="inbounds" className="h-full">
47                        <ServiceInboundsTable service={entity} />
48                    </TabsContent>
49                    <TabsContent value="users" className="h-full">
50                        <ServicesUsersTable service={entity} />
51                    </TabsContent>
52                </Tabs>
53            </SheetContent>
54        </Sheet>
55    )
56}