gitscope
← marzneshin / v0.3.1 / dashboard/src/features/users/components/dialogs/mutation/sections/expiration-method/index.tsx
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/features/users/components/dialogs/mutation/sections/expiration-method/index.tsx · TypeScript
Blame Raw
 1import { FC } from "react";
 2import {
 3    Tabs,
 4    TabsTrigger,
 5    TabsContent,
 6    FormLabel
 7} from '@marzneshin/components';
 8import type {
 9    UserMutationType,
10    ExpireStrategy,
11} from "@marzneshin/features/users";
12import {
13    ExpireDateField,
14    ActivationDeadlineField,
15    UsageDurationField,
16} from "@marzneshin/features/users/components/dialogs/mutation/fields";
17import { TabsList } from "@radix-ui/react-tabs";
18import { useTranslation } from "react-i18next";
19import {
20    useExpirationMethodTabs,
21} from "./use-expiration-method-tabs";
22
23interface ExpirationMethodProps {
24    entity: UserMutationType | null
25}
26
27export const ExpirationMethodFields: FC<ExpirationMethodProps> = ({ entity }) => {
28    const { t } = useTranslation();
29    const {
30        setSelectedExpirationMethodTab,
31        defaultExpirationMethodTab
32    } = useExpirationMethodTabs({ entity });
33
34    const handleTabChange = (value: string) => {
35        setSelectedExpirationMethodTab(value as ExpireStrategy);
36    };
37
38    return (
39        <>
40            <FormLabel className="text-md">
41                {t('page.users.expire_method')}
42            </FormLabel>
43            <Tabs
44                defaultValue={defaultExpirationMethodTab}
45                onValueChange={handleTabChange}
46                className="w-full"
47            >
48                <TabsList className="flex flex-row items-center p-1 w-full rounded-md bg-accent">
49                    <TabsTrigger
50                        className="w-full"
51                        value="fixed_date">
52                        {t('page.users.fixed_date')}
53                    </TabsTrigger>
54                    <TabsTrigger
55                        className="w-full"
56                        value="start_on_first_use">
57                        {t('page.users.on_first_use')}
58                    </TabsTrigger>
59                    <TabsTrigger
60                        className="w-full"
61                        value="never">
62                        {t('page.users.never')}
63                    </TabsTrigger>
64                </TabsList>
65                <TabsContent value="fixed_date">
66                    <ExpireDateField />
67                </TabsContent>
68                <TabsContent value="start_on_first_use">
69                    <UsageDurationField />
70                    <ActivationDeadlineField />
71                </TabsContent>
72            </Tabs>
73        </>
74    );
75};