95 lines
2.5 KiB
TypeScript
95 lines
2.5 KiB
TypeScript
'use client';
|
|
|
|
import { zodResolver } from '@hookform/resolvers/zod';
|
|
import { useLocale, useTranslations } from 'next-intl';
|
|
import { useTransition } from 'react';
|
|
import { useForm } from 'react-hook-form';
|
|
import { toast } from 'sonner';
|
|
|
|
import { Form, FormField } from '@/components/ui/common/Form';
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/common/Select';
|
|
import { CardContainer } from '@/components/ui/elements/CardContainer';
|
|
import { setCurrentLanguage } from '@/libs/i18n/language';
|
|
import {
|
|
changeLanguageSchema,
|
|
} from '@/schemas/user/change-language.schema';
|
|
|
|
import type { TypeChangeLanguageSchema } from '@/schemas/user/change-language.schema';
|
|
|
|
const languages = {
|
|
ru: 'Русский',
|
|
en: 'English',
|
|
};
|
|
|
|
export const ChangeLanguageForm = () => {
|
|
const t = useTranslations('dashboard.settings.appearance.language');
|
|
|
|
const [isPending, startTransition] = useTransition();
|
|
const locale = useLocale();
|
|
|
|
const form = useForm<TypeChangeLanguageSchema>({
|
|
resolver: zodResolver(changeLanguageSchema),
|
|
values: {
|
|
language: locale,
|
|
},
|
|
});
|
|
|
|
function onSubmit(data: TypeChangeLanguageSchema) {
|
|
startTransition(async () => {
|
|
try {
|
|
await setCurrentLanguage(data.language);
|
|
} catch (error) {
|
|
toast.success(t('successMessage'));
|
|
}
|
|
});
|
|
}
|
|
|
|
return (
|
|
<CardContainer
|
|
description={t('description')}
|
|
heading={t('heading')}
|
|
rightContent={(
|
|
<Form {...form}>
|
|
<FormField
|
|
control={form.control}
|
|
name="language"
|
|
render={({ field }) => (
|
|
<Select
|
|
value={field.value}
|
|
onValueChange={(value: string) => {
|
|
field.onChange(value);
|
|
void form.handleSubmit(onSubmit)();
|
|
}}
|
|
>
|
|
<SelectTrigger className="w-[180px]">
|
|
<SelectValue placeholder={t('selectPlaceholder')} />
|
|
</SelectTrigger>
|
|
|
|
<SelectContent>
|
|
{Object.entries(languages).map(
|
|
([code, name]) => (
|
|
<SelectItem
|
|
key={code}
|
|
disabled={isPending}
|
|
value={code}
|
|
>
|
|
{name}
|
|
</SelectItem>
|
|
),
|
|
)}
|
|
</SelectContent>
|
|
</Select>
|
|
)}
|
|
/>
|
|
</Form>
|
|
)}
|
|
/>
|
|
);
|
|
};
|