feat(i18n): restructure translation files and update NavUser component for internationalization support

This commit is contained in:
ngc2207 2024-12-12 20:51:10 +08:00
parent cd842b3bdd
commit 8d2df7dc4a
4 changed files with 34 additions and 10 deletions

View File

@ -1,5 +1,16 @@
{ {
"Page": {
"DashboardPage": { "DashboardPage": {
"title": "Welcome to Judge4c!" "title": "Welcome to Judge4c!"
} }
},
"Components": {
"NavUser": {
"profile": "Profile",
"notifications": "Notifications",
"settings": "Settings",
"logout": "Log out",
"login": "Log in"
}
}
} }

View File

@ -1,5 +1,16 @@
{ {
"Page": {
"DashboardPage": { "DashboardPage": {
"title": "欢迎来到 Judge4c" "title": "欢迎使用Judge4c"
}
},
"Components": {
"NavUser": {
"profile": "个人资料",
"notifications": "通知",
"settings": "设置",
"logout": "登出",
"login": "登录"
}
} }
} }

View File

@ -1,7 +1,7 @@
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
export default function DashboardPage() { export default function DashboardPage() {
const t = useTranslations("DashboardPage"); const t = useTranslations("Page.DashboardPage");
return ( return (
<div className="flex flex-1 flex-col gap-4 p-4 pt-0"> <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
<div className="grid auto-rows-min gap-4 md:grid-cols-3"> <div className="grid auto-rows-min gap-4 md:grid-cols-3">

View File

@ -24,6 +24,7 @@ import {
DropdownMenuTrigger, DropdownMenuTrigger,
DropdownMenuSeparator, DropdownMenuSeparator,
} from "@/components/ui/dropdown-menu"; } from "@/components/ui/dropdown-menu";
import { useTranslations } from "next-intl";
import useConfirmationStore from "@/store/confirmationStore"; import useConfirmationStore from "@/store/confirmationStore";
import { signIn, signOut, useSession } from "next-auth/react"; import { signIn, signOut, useSession } from "next-auth/react";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
@ -46,6 +47,7 @@ export const NavUser = ({
}) => { }) => {
const { isMobile } = useSidebar(); const { isMobile } = useSidebar();
const { data: session } = useSession(); const { data: session } = useSession();
const t = useTranslations("Components.NavUser");
const { openConfirmation } = useConfirmationStore(); const { openConfirmation } = useConfirmationStore();
const currentUser = useMemo(() => { const currentUser = useMemo(() => {
@ -106,18 +108,18 @@ export const NavUser = ({
<DropdownMenuGroup> <DropdownMenuGroup>
<DropdownMenuItem> <DropdownMenuItem>
<CircleUserRound /> <CircleUserRound />
Profile {t("profile")}
</DropdownMenuItem> </DropdownMenuItem>
</DropdownMenuGroup> </DropdownMenuGroup>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuGroup> <DropdownMenuGroup>
<DropdownMenuItem> <DropdownMenuItem>
<Bell /> <Bell />
Notifications {t("notifications")}
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem> <DropdownMenuItem>
<Settings /> <Settings />
Settings {t("settings")}
</DropdownMenuItem> </DropdownMenuItem>
</DropdownMenuGroup> </DropdownMenuGroup>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
@ -137,7 +139,7 @@ export const NavUser = ({
}} }}
> >
<LogOut /> <LogOut />
Log out {t("logout")}
</DropdownMenuItem> </DropdownMenuItem>
</DropdownMenuGroup> </DropdownMenuGroup>
</> </>
@ -145,7 +147,7 @@ export const NavUser = ({
<DropdownMenuGroup> <DropdownMenuGroup>
<DropdownMenuItem onClick={() => signIn()}> <DropdownMenuItem onClick={() => signIn()}>
<LogIn /> <LogIn />
Log in {t("login")}
</DropdownMenuItem> </DropdownMenuItem>
</DropdownMenuGroup> </DropdownMenuGroup>
)} )}