← 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};