重构：将 "lobster" 重命名为 "claw" 并添加国际化支持 (i18n)

components/layout/view-switcher.tsx

@@ -1,22 +1,20 @@
 "use client";
 
-import Link from "next/link";
 import { Globe2, Map } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { Link } from "@/i18n/navigation";
 import { cn } from "@/lib/utils";
 
-const continents = [
-  { slug: "asia", label: "Asia" },
-  { slug: "europe", label: "Europe" },
-  { slug: "americas", label: "Americas" },
-  { slug: "africa", label: "Africa" },
-  { slug: "oceania", label: "Oceania" },
-];
+const continentSlugs = ["asia", "europe", "americas", "africa", "oceania"] as const;
 
 interface ViewSwitcherProps {
   activeContinent?: string;
 }
 
 export function ViewSwitcher({ activeContinent }: ViewSwitcherProps) {
+  const tSwitcher = useTranslations("viewSwitcher");
+  const tContinents = useTranslations("continents");
+
   return (
     <div className="flex flex-wrap items-center gap-2">
       <Link
@@ -29,21 +27,21 @@ export function ViewSwitcher({ activeContinent }: ViewSwitcherProps) {
         )}
       >
         <Globe2 className="h-3 w-3" />
-        Global
+        {tSwitcher("global")}
       </Link>
-      {continents.map((c) => (
+      {continentSlugs.map((slug) => (
         <Link
-          key={c.slug}
-          href={`/continent/${c.slug}`}
+          key={slug}
+          href={`/continent/${slug}`}
           className={cn(
             "flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-medium transition-all",
-            activeContinent === c.slug
+            activeContinent === slug
               ? "border-[var(--accent-purple)]/30 bg-[var(--accent-purple)]/10 text-[var(--accent-purple)]"
               : "border-white/5 text-[var(--text-muted)] hover:border-white/10 hover:text-[var(--text-secondary)]"
           )}
         >
           <Map className="h-3 w-3" />
-          {c.label}
+          {tContinents(slug)}
         </Link>
       ))}
     </div>