feat: web i18n (#1286)

This commit is contained in:
David Nguyen
2024-08-27 20:34:39 +09:00
committed by GitHub
parent 0829311214
commit 75c8772a02
294 changed files with 14846 additions and 2229 deletions

View File

@ -3,6 +3,8 @@
import { useRouter } from 'next/navigation';
import { zodResolver } from '@hookform/resolvers/zod';
import { Trans, msg } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { useForm } from 'react-hook-form';
import type { z } from 'zod';
@ -28,7 +30,9 @@ const ZUserFormSchema = ZAdminUpdateProfileMutationSchema.omit({ id: true });
type TUserFormSchema = z.infer<typeof ZUserFormSchema>;
export default function UserPage({ params }: { params: { id: number } }) {
const { _ } = useLingui();
const { toast } = useToast();
const router = useRouter();
const { data: user } = trpc.profile.getUser.useQuery(
@ -65,14 +69,14 @@ export default function UserPage({ params }: { params: { id: number } }) {
router.refresh();
toast({
title: 'Profile updated',
description: 'Your profile has been updated.',
title: _(msg`Profile updated`),
description: _(msg`Your profile has been updated.`),
duration: 5000,
});
} catch (e) {
toast({
title: 'Error',
description: 'An error occurred while updating your profile.',
title: _(msg`Error`),
description: _(msg`An error occurred while updating your profile.`),
variant: 'destructive',
});
}
@ -80,7 +84,9 @@ export default function UserPage({ params }: { params: { id: number } }) {
return (
<div>
<h2 className="text-4xl font-semibold">Manage {user?.name}'s profile</h2>
<h2 className="text-4xl font-semibold">
<Trans>Manage {user?.name}'s profile</Trans>
</h2>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)}>
<fieldset className="mt-6 flex w-full flex-col gap-y-4">
@ -89,7 +95,9 @@ export default function UserPage({ params }: { params: { id: number } }) {
name="name"
render={({ field }) => (
<FormItem>
<FormLabel className="text-muted-foreground">Name</FormLabel>
<FormLabel className="text-muted-foreground">
<Trans>Name</Trans>
</FormLabel>
<FormControl>
<Input type="text" {...field} value={field.value ?? ''} />
</FormControl>
@ -102,7 +110,9 @@ export default function UserPage({ params }: { params: { id: number } }) {
name="email"
render={({ field }) => (
<FormItem>
<FormLabel className="text-muted-foreground">Email</FormLabel>
<FormLabel className="text-muted-foreground">
<Trans>Email</Trans>
</FormLabel>
<FormControl>
<Input type="text" {...field} />
</FormControl>
@ -117,7 +127,9 @@ export default function UserPage({ params }: { params: { id: number } }) {
render={({ field: { onChange } }) => (
<FormItem>
<fieldset className="flex flex-col gap-2">
<FormLabel className="text-muted-foreground">Roles</FormLabel>
<FormLabel className="text-muted-foreground">
<Trans>Roles</Trans>
</FormLabel>
<FormControl>
<MultiSelectRoleCombobox
listValues={roles}
@ -132,7 +144,7 @@ export default function UserPage({ params }: { params: { id: number } }) {
<div className="mt-4">
<Button type="submit" loading={form.formState.isSubmitting}>
Update user
<Trans>Update user</Trans>
</Button>
</div>
</fieldset>