Initial commit: fristy.net personal site

components/language-switcher.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { LOCALES, LOCALE_LABELS, type Locale } from "@/lib/i18n/locales";
+import { setLocaleCookie } from "@/lib/i18n/set-locale-cookie";
+
+export function LanguageSwitcher({ current }: { current: Locale }) {
+    const router = useRouter();
+
+    async function switchTo(locale: Locale) {
+        if (locale === current) {
+            return;
+        }
+        await setLocaleCookie(locale);
+        router.refresh();
+    }
+
+    return (
+        <div
+            role="group"
+            aria-label="language"
+            className="flex items-center gap-1 rounded-full border border-white/10 bg-white/5 p-1"
+        >
+            {LOCALES.map((locale) => (
+                <button
+                    key={locale}
+                    type="button"
+                    onClick={() => switchTo(locale)}
+                    aria-pressed={locale === current}
+                    className={`rounded-full px-2.5 py-1 font-mono text-xs transition-colors ${
+                        locale === current
+                            ? "bg-blurple text-white"
+                            : "text-zinc-400 hover:text-white"
+                    }`}
+                >
+                    {LOCALE_LABELS[locale]}
+                </button>
+            ))}
+        </div>
+    );
+}