init

components/layout/view-switcher.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import Link from "next/link";
+import { Globe2, Map } from "lucide-react";
+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" },
+];
+
+interface ViewSwitcherProps {
+  activeContinent?: string;
+}
+
+export function ViewSwitcher({ activeContinent }: ViewSwitcherProps) {
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <Link
+        href="/"
+        className={cn(
+          "flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-medium transition-all",
+          !activeContinent
+            ? "border-[var(--accent-cyan)]/30 bg-[var(--accent-cyan)]/10 text-[var(--accent-cyan)]"
+            : "border-white/5 text-[var(--text-muted)] hover:border-white/10 hover:text-[var(--text-secondary)]"
+        )}
+      >
+        <Globe2 className="h-3 w-3" />
+        Global
+      </Link>
+      {continents.map((c) => (
+        <Link
+          key={c.slug}
+          href={`/continent/${c.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
+              ? "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}
+        </Link>
+      ))}
+    </div>
+  );
+}