54 lines
1.8 KiB
TypeScript
54 lines
1.8 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { Link as I18nLink, usePathname, useRouter } from "@/i18n/routing";
|
||
|
|
import { cn } from "@/lib/utils";
|
||
|
|
import { HeaderLink } from "@/types/common";
|
||
|
|
import { useTranslations } from "next-intl";
|
||
|
|
|
||
|
|
const HeaderLinks = () => {
|
||
|
|
const tHeader = useTranslations("Header");
|
||
|
|
const pathname = usePathname();
|
||
|
|
const router = useRouter();
|
||
|
|
|
||
|
|
const headerLinks: HeaderLink[] = tHeader.raw("links");
|
||
|
|
const localePrefix = `/${(pathname || "/zh").split("/")[1] || "zh"}`;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="hidden md:flex flex-row items-center gap-x-2 text-sm font-medium text-muted-500">
|
||
|
|
{headerLinks.map((link) => {
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div key={link.name} className="relative group">
|
||
|
|
<I18nLink
|
||
|
|
href={link.href}
|
||
|
|
title={link.name}
|
||
|
|
prefetch={true}
|
||
|
|
className={cn(
|
||
|
|
"rounded-xl px-4 py-2 flex items-center gap-x-1 hover:bg-accent-foreground/10 hover:text-accent-foreground",
|
||
|
|
pathname === link.href && "font-semibold text-accent-foreground"
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
{link.name}
|
||
|
|
</I18nLink>
|
||
|
|
{
|
||
|
|
link?.children && (
|
||
|
|
<div className="absolute left-0 top-full hidden group-hover:block z-50 pt-2">
|
||
|
|
<div className="w-56 rounded-md border bg-white shadow-md overflow-hidden">
|
||
|
|
{link.children.map((child) => (
|
||
|
|
<I18nLink key={child.name} prefetch={false} href={child.href} className="block px-4 py-2 hover:bg-red-600 hover:text-white">
|
||
|
|
{child.name}
|
||
|
|
</I18nLink>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default HeaderLinks;
|