add language switcher

Author: jedabero

app/[lang]/page.tsx

@@ -6,6 +6,7 @@ import { Projects } from '@/components/sections/projects';
 import { Navbar } from '@/components/sections/navbar';
 import { getDictionary, type Locale } from '@/lib/i18n';
 import { notFound } from 'next/navigation';
+import { LangRedirect } from '@/components/lang-redirect';
 
 type Params = { lang: Locale };
 
@@ -20,7 +21,8 @@ export default function LangPage({ params }: { params: Params }) {
   const dict = getDictionary(params.lang);
   return (
     <main className="min-h-screen">
-      <Navbar content={dict.nav} />
+      <LangRedirect currentLocale={params.lang} />
+      <Navbar content={dict.nav} currentLocale={params.lang} />
       <div className="bg-page-gradient">
         <Hero content={dict.hero} />
         <About content={dict.about} />

app/page.tsx

@@ -5,12 +5,14 @@ import { Hero } from '@/components/sections/hero';
 import { Projects } from '@/components/sections/projects';
 import { Navbar } from '@/components/sections/navbar';
 import { getDictionary } from '@/lib/i18n';
+import { LangRedirect } from '@/components/lang-redirect';
 
 export default function HomePage() {
   const dict = getDictionary('es');
   return (
     <main className="min-h-screen">
-      <Navbar content={dict.nav} />
+      <LangRedirect currentLocale="es" />
+      <Navbar content={dict.nav} currentLocale="es" />
       <div className="bg-page-gradient">
         <Hero content={dict.hero} />
         <About content={dict.about} />

components/lang-redirect.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { normalizeLocale, type Locale } from '@/lib/i18n';
+import { useEffect } from 'react';
+
+const STORAGE_KEY = 'preferred-lang';
+
+function pathForLocale(locale: Locale): string {
+  return locale === 'es' ? '/' : `/${locale}`;
+}
+
+export function LangRedirect({ currentLocale }: { currentLocale: Locale }) {
+  useEffect(() => {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored === 'en' || stored === 'es') {
+      if (stored !== currentLocale) {
+        window.location.assign(pathForLocale(stored));
+      }
+      return;
+    }
+
+    const navigatorLang =
+      typeof navigator !== 'undefined' ? navigator.language || navigator.languages?.[0] : undefined;
+    const detected = normalizeLocale(navigatorLang);
+
+    if (detected !== currentLocale) {
+      localStorage.setItem(STORAGE_KEY, detected);
+      window.location.assign(pathForLocale(detected));
+    }
+  }, [currentLocale]);
+
+  return null;
+}

components/lang-switcher.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import type { Locale } from '@/lib/i18n';
+import { cn } from '@/lib/utils';
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+
+const STORAGE_KEY = 'preferred-lang';
+
+function pathForLocale(locale: Locale): string {
+  return locale === 'es' ? '/' : `/${locale}`;
+}
+
+type Props = {
+  current: Locale;
+  className?: string;
+};
+
+export function LangSwitcher({ current, className }: Props) {
+  const router = useRouter();
+  const [active, setActive] = useState<Locale>(current);
+
+  useEffect(() => {
+    setActive(current);
+  }, [current]);
+
+  function handleChange(locale: Locale) {
+    if (locale === active) return;
+    setActive(locale);
+    localStorage.setItem(STORAGE_KEY, locale);
+    router.push(pathForLocale(locale));
+  }
+
+  return (
+    <div className={cn('flex items-center gap-1 rounded-full border border-white/10 bg-white/5 px-1 py-0.5', className)}>
+      {(['es', 'en'] as Locale[]).map((locale) => (
+        <button
+          key={locale}
+          type="button"
+          onClick={() => handleChange(locale)}
+          className={cn(
+            'px-2 py-1 text-xs rounded-full transition-colors',
+            active === locale
+              ? 'bg-accent-mint/20 text-accent-mint'
+              : 'text-base-muted hover:text-base-text'
+          )}
+          aria-pressed={active === locale}
+        >
+          {locale.toUpperCase()}
+        </button>
+      ))}
+    </div>
+  );
+}

components/sections/navbar.tsx

@@ -1,11 +1,14 @@
 import Link from 'next/link';
 import type { NavContent } from '@/lib/i18n';
+import { LangSwitcher } from '@/components/lang-switcher';
+import type { Locale } from '@/lib/i18n';
 
 type Props = {
   content: NavContent;
+  currentLocale: Locale;
 };
 
-export function Navbar({ content }: Props) {
+export function Navbar({ content, currentLocale }: Props) {
   return (
     <header className="sticky top-0 z-20 bg-base-bg/70 backdrop-blur-md border-b border-white/10">
       <div className="max-w-6xl mx-auto px-4 h-14 flex items-center justify-between">
@@ -18,6 +21,7 @@ export function Navbar({ content }: Props) {
               {link.label}
             </Link>
           ))}
+          <LangSwitcher current={currentLocale} />
         </nav>
       </div>
     </header>

lib/i18n.ts

@@ -1,5 +1,13 @@
 export type Locale = 'es' | 'en';
 
+export function normalizeLocale(input?: string): Locale {
+  if (!input) return 'es';
+  const lower = input.toLowerCase();
+  if (lower.startsWith('en')) return 'en';
+  if (lower.startsWith('es')) return 'es';
+  return 'es';
+}
+
 export type NavContent = {
   brand: string;
   links: { href: string; label: string }[];