Build New Optic website

components/LanguageSwitcher.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { languages, type Locale } from "@/config/business";
+import { cn } from "@/lib/utils";
+
+export default function LanguageSwitcher({ locale, onLocaleChange }: { locale: Locale; onLocaleChange: (locale: Locale) => void }) {
+  return (
+    <div className="flex rounded-full border border-ink/10 bg-white/65 p-1 shadow-sm backdrop-blur-xl" aria-label="Language switcher">
+      {languages.map((language) => (
+        <button
+          key={language.code}
+          type="button"
+          onClick={() => onLocaleChange(language.code)}
+          className={cn(
+            "rounded-full px-3 py-1.5 text-xs font-semibold transition-all duration-300",
+            locale === language.code ? "bg-ink text-white shadow-sm" : "text-ink/55 hover:text-ink"
+          )}
+          aria-pressed={locale === language.code}
+        >
+          {language.label}
+        </button>
+      ))}
+    </div>
+  );
+}