init

components/header/HeaderLinks.tsx

@@ -0,0 +1,53 @@
+"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;