mirror of
https://github.com/massbug/judge4c.git
synced 2025-05-18 07:16:34 +00:00
feat: fix bugs in avatar-button.tsx and settings-dialog.tsx because of wrong translation coding
This commit is contained in:
parent
3bd2b5f075
commit
06b6032436
@ -1,106 +1,107 @@
|
||||
//avatar-button
|
||||
import {
|
||||
BadgeCheck,
|
||||
Bell,
|
||||
LogIn,
|
||||
LogOut,
|
||||
BadgeCheck,
|
||||
Bell,
|
||||
LogIn,
|
||||
LogOut,
|
||||
} from "lucide-react";
|
||||
import {
|
||||
Avatar,
|
||||
AvatarImage,
|
||||
Avatar,
|
||||
AvatarImage,
|
||||
} from "@/components/ui/avatar";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { auth, signOut } from "@/lib/auth";
|
||||
import { redirect } from "next/navigation";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { SettingsButton } from "@/components/settings-button";
|
||||
import { useTranslations } from 'next-intl';
|
||||
//import { useTranslations } from 'next-intl';
|
||||
import { getTranslations } from "next-intl/server";
|
||||
|
||||
const UserAvatar = ({ image, name }: { image: string; name: string }) => (
|
||||
<Avatar className="h-8 w-8 rounded-lg">
|
||||
<AvatarImage src={image} alt={name} />
|
||||
<Skeleton className="h-full w-full" />
|
||||
</Avatar>
|
||||
<Avatar className="h-8 w-8 rounded-lg">
|
||||
<AvatarImage src={image} alt={name} />
|
||||
<Skeleton className="h-full w-full" />
|
||||
</Avatar>
|
||||
);
|
||||
|
||||
async function handleSignIn() {
|
||||
"use server";
|
||||
redirect("/sign-in");
|
||||
"use server";
|
||||
redirect("/sign-in");
|
||||
}
|
||||
|
||||
async function handleSignOut() {
|
||||
"use server";
|
||||
await signOut();
|
||||
"use server";
|
||||
await signOut();
|
||||
}
|
||||
|
||||
export async function AvatarButton() {
|
||||
const session = await auth();
|
||||
const isLoggedIn = !!session?.user;
|
||||
const image = session?.user?.image ?? "https://github.com/shadcn.png";
|
||||
const name = session?.user?.name ?? "unknown";
|
||||
const email = session?.user?.email ?? "unknwon@example.com";
|
||||
const t = useTranslations('avatar-button');
|
||||
const session = await auth();
|
||||
const isLoggedIn = !!session?.user;
|
||||
const image = session?.user?.image ?? "https://github.com/shadcn.png";
|
||||
const name = session?.user?.name ?? "unknown";
|
||||
const email = session?.user?.email ?? "unknwon@example.com";
|
||||
const t = await getTranslations('avatar-button');
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<UserAvatar image={image} name={name} />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
|
||||
align="end"
|
||||
sideOffset={8}
|
||||
>
|
||||
{!isLoggedIn ? (
|
||||
<DropdownMenuGroup>
|
||||
<SettingsButton />
|
||||
<DropdownMenuItem onClick={handleSignIn}>
|
||||
<LogIn />
|
||||
{t('log-in')}
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
) : (
|
||||
<>
|
||||
<DropdownMenuLabel className="p-0 font-normal">
|
||||
<div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<UserAvatar image={image} name={name} />
|
||||
<div className="grid flex-1 text-left text-sm leading-tight">
|
||||
<span className="truncate font-semibold">{name}</span>
|
||||
<span className="truncate text-xs">{email}</span>
|
||||
</div>
|
||||
</div>
|
||||
</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuItem>
|
||||
<BadgeCheck />
|
||||
{t('account')}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<Bell />
|
||||
Notifications
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuGroup>
|
||||
<SettingsButton />
|
||||
</DropdownMenuGroup>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem onClick={handleSignOut}>
|
||||
<LogOut />
|
||||
{t('log-out')}
|
||||
</DropdownMenuItem>
|
||||
</>
|
||||
)}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
|
||||
align="end"
|
||||
sideOffset={8}
|
||||
>
|
||||
{!isLoggedIn ? (
|
||||
<DropdownMenuGroup>
|
||||
<SettingsButton />
|
||||
<DropdownMenuItem onClick={handleSignIn}>
|
||||
<LogIn />
|
||||
{t('log-in')}
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
) : (
|
||||
<>
|
||||
<DropdownMenuLabel className="p-0 font-normal">
|
||||
<div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
|
||||
<UserAvatar image={image} name={name} />
|
||||
<div className="grid flex-1 text-left text-sm leading-tight">
|
||||
<span className="truncate font-semibold">{name}</span>
|
||||
<span className="truncate text-xs">{email}</span>
|
||||
</div>
|
||||
</div>
|
||||
</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuItem>
|
||||
<BadgeCheck />
|
||||
{t('account')}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<Bell />
|
||||
Notifications
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuGroup>
|
||||
<SettingsButton />
|
||||
</DropdownMenuGroup>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem onClick={handleSignOut}>
|
||||
<LogOut />
|
||||
{t('log-out')}
|
||||
</DropdownMenuItem>
|
||||
</>
|
||||
)}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
}
|
||||
|
||||
@ -31,84 +31,83 @@ import { useSettingsStore } from "@/stores/useSettingsStore";
|
||||
import { CodeXml, Globe, Paintbrush, Settings } from "lucide-react";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
const t = useTranslations('settings');
|
||||
const data = {
|
||||
nav: [
|
||||
{ name: t('appearance'), icon: Paintbrush },
|
||||
{ name: t('language-and-region'), icon: Globe },
|
||||
{ name: t('code-editor'), icon: CodeXml },
|
||||
{ name: t('advanced'), icon: Settings },
|
||||
],
|
||||
};
|
||||
|
||||
export function SettingsDialog() {
|
||||
const { isDialogOpen, activeSetting, setDialogOpen, setActiveSetting } = useSettingsStore();
|
||||
const { isDialogOpen, activeSetting, setDialogOpen, setActiveSetting } =
|
||||
useSettingsStore();
|
||||
const t = useTranslations("settings");
|
||||
|
||||
const navItems = [
|
||||
{ name: t("appearance"), icon: Paintbrush },
|
||||
{ name: t("language-and-region"), icon: Globe },
|
||||
{ name: t("code-editor"), icon: CodeXml },
|
||||
{ name: t("advanced"), icon: Settings },
|
||||
];
|
||||
|
||||
return (
|
||||
<Dialog open={isDialogOpen} onOpenChange={setDialogOpen}>
|
||||
<DialogContent className="overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]">
|
||||
<DialogTitle className="sr-only">{t('settings')}</DialogTitle>
|
||||
<DialogDescription className="sr-only">
|
||||
{t('customize-your-settings-here')}
|
||||
</DialogDescription>
|
||||
<SidebarProvider className="items-start">
|
||||
<Sidebar collapsible="none" className="hidden md:flex">
|
||||
<SidebarContent>
|
||||
<SidebarGroup>
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu className="pt-2">
|
||||
{data.nav.map((item) => (
|
||||
<SidebarMenuItem key={item.name}>
|
||||
<SidebarMenuButton
|
||||
asChild
|
||||
isActive={item.name === activeSetting}
|
||||
onClick={() => setActiveSetting(item.name)}
|
||||
>
|
||||
<a href="#">
|
||||
<item.icon />
|
||||
<span>{item.name}</span>
|
||||
</a>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
))}
|
||||
</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
</SidebarContent>
|
||||
</Sidebar>
|
||||
<main className="flex h-[480px] flex-1 flex-col overflow-hidden">
|
||||
<header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
|
||||
<div className="flex items-center gap-2 px-4">
|
||||
<Breadcrumb>
|
||||
<BreadcrumbList>
|
||||
<BreadcrumbItem className="hidden md:block">
|
||||
<BreadcrumbLink href="#">{t('settings')}</BreadcrumbLink>
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbSeparator className="hidden md:block" />
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbPage>{activeSetting}</BreadcrumbPage>
|
||||
</BreadcrumbItem>
|
||||
</BreadcrumbList>
|
||||
</Breadcrumb>
|
||||
</div>
|
||||
</header>
|
||||
<ScrollArea className="flex-1 overflow-y-auto p-4 pt-0">
|
||||
<div className="flex flex-col gap-4">
|
||||
{activeSetting === t('appearance') ? (
|
||||
<AppearanceSettings />
|
||||
) : (
|
||||
Array.from({ length: 10 }).map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="aspect-video max-w-3xl rounded-xl bg-muted/50"
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</main>
|
||||
</SidebarProvider>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<Dialog open={isDialogOpen} onOpenChange={setDialogOpen}>
|
||||
<DialogContent className="overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]">
|
||||
<DialogTitle className="sr-only">{t("settings")}</DialogTitle>
|
||||
<DialogDescription className="sr-only">
|
||||
{t("customize-your-settings-here")}
|
||||
</DialogDescription>
|
||||
<SidebarProvider className="items-start">
|
||||
<Sidebar collapsible="none" className="hidden md:flex">
|
||||
<SidebarContent>
|
||||
<SidebarGroup>
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu className="pt-2">
|
||||
{navItems.map((item) => (
|
||||
<SidebarMenuItem key={item.name}>
|
||||
<SidebarMenuButton
|
||||
asChild
|
||||
isActive={item.name === activeSetting}
|
||||
onClick={() => setActiveSetting(item.name)}
|
||||
>
|
||||
<a href="#">
|
||||
<item.icon />
|
||||
<span>{item.name}</span>
|
||||
</a>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
))}
|
||||
</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
</SidebarContent>
|
||||
</Sidebar>
|
||||
<main className="flex h-[480px] flex-1 flex-col overflow-hidden">
|
||||
<header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
|
||||
<div className="flex items-center gap-2 px-4">
|
||||
<Breadcrumb>
|
||||
<BreadcrumbList>
|
||||
<BreadcrumbItem className="hidden md:block">
|
||||
<BreadcrumbLink href="#">{t("settings")}</BreadcrumbLink>
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbSeparator className="hidden md:block" />
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbPage>{activeSetting}</BreadcrumbPage>
|
||||
</BreadcrumbItem>
|
||||
</BreadcrumbList>
|
||||
</Breadcrumb>
|
||||
</div>
|
||||
</header>
|
||||
<ScrollArea className="flex-1 overflow-y-auto p-4 pt-0">
|
||||
<div className="flex flex-col gap-4">
|
||||
{activeSetting === t("appearance") ? (
|
||||
<AppearanceSettings />
|
||||
) : (
|
||||
Array.from({ length: 10 }).map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="aspect-video max-w-3xl rounded-xl bg-muted/50"
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</main>
|
||||
</SidebarProvider>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user