latest changes

src/components/language-switcher.tsx

@@ -2,44 +2,90 @@
 
 import { useLocale } from "next-intl";
 import { useRouter } from "next/navigation";
-import { useTransition } from "react";
+import { useTransition, useState, useRef, useEffect } from "react";
 
-const LOCALES: { code: string; label: string }[] = [
-  { code: "en", label: "EN" },
-  { code: "it", label: "IT" },
+const LOCALES: { code: string; label: string; lang: string }[] = [
+  { code: "nl", label: "Nederlands", lang: "nl" },
+  { code: "en", label: "English", lang: "en" },
+  { code: "de", label: "Deutsch", lang: "de" },
+  { code: "fr", label: "Français", lang: "fr" },
+  { code: "es", label: "Español", lang: "es" },
+  { code: "it", label: "Italiano", lang: "it" },
 ];
 
-/**
- * Locale picker. Writes the chosen locale to the `NEXT_LOCALE` cookie (read by
- * src/i18n/request.ts on the server) and refreshes the route so server
- * components re-render with the new messages. No URL change — matches the
- * cookie-based, routing-free i18n setup.
- */
 export function LanguageSwitcher() {
   const locale = useLocale();
   const router = useRouter();
   const [pending, startTransition] = useTransition();
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  const current = LOCALES.find((l) => l.code === locale) ?? LOCALES[0];
 
-  function onChange(e: React.ChangeEvent<HTMLSelectElement>) {
-    const next = e.target.value;
-    document.cookie = `NEXT_LOCALE=${next};path=/;max-age=31536000;samesite=lax`;
+  useEffect(() => {
+    function handleClick(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    }
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, []);
+
+  function switchLocale(code: string) {
+    if (code === locale) return;
+    document.cookie = `NEXT_LOCALE=${code};path=/;max-age=31536000;samesite=lax`;
     startTransition(() => router.refresh());
+    setOpen(false);
   }
 
   return (
-    <select
-      value={locale}
-      onChange={onChange}
-      disabled={pending}
-      aria-label="Language"
-      className="nav-item cursor-pointer bg-transparent text-[13px]"
-      style={{ border: "none", padding: "0 0.25rem" }}
-    >
-      {LOCALES.map((l) => (
-        <option key={l.code} value={l.code}>
-          {l.label}
-        </option>
-      ))}
-    </select>
+    <div className="relative" ref={ref}>
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        disabled={pending}
+        className="nav-item flex items-center gap-1.5 bg-transparent text-[13px]"
+        style={{ border: "none", cursor: "pointer", padding: "0 0.25rem" }}
+      >
+        <img
+          src={`/assets/images/icons/flags/${current.code}.png`}
+          alt={current.lang}
+          className="inline-block h-4 w-auto"
+        />
+        <span>{current.code.toUpperCase()}</span>
+        <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+
+      {open && (
+        <div
+          className="absolute right-0 mt-1 min-w-[160px] rounded-md shadow-lg z-50 py-1"
+          style={{ backgroundColor: "var(--color-dropdown)" }}
+        >
+          {LOCALES.map((l) => (
+            <button
+              key={l.code}
+              type="button"
+              onClick={() => switchLocale(l.code)}
+              className={`flex w-full items-center gap-2 px-3 py-2 text-left text-sm font-semibold transition-colors ${
+                l.code === locale ? "opacity-100" : "opacity-70 hover:opacity-100"
+              }`}
+              style={{
+                color: "var(--color-text)",
+                background: "none",
+                border: "none",
+                cursor: "pointer",
+              }}
+            >
+              <img
+                src={`/assets/images/icons/flags/${l.code}.png`}
+                alt={l.lang}
+                className="inline-block h-4 w-auto"
+              />
+              {l.label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
   );
 }