EpicNext-Cms/src/components/navbar-color-picker.tsx

"use client";

import { useEffect, useState } from "react";

const COLORS = [
  { name: "Wit", value: "#ffffff", text: "#1e293b" },
  { name: "Zwart", value: "#0f172a", text: "#f8fafc" },
  { name: "Donker", value: "#1e293b", text: "#f8fafc" },
  { name: "Grijs", value: "#f1f5f9", text: "#1e293b" },
  { name: "Amber", value: "#f59e0b", text: "#1e293b" },
  { name: "Goud", value: "#eab308", text: "#1e293b" },
  { name: "Oranje", value: "#ea580c", text: "#ffffff" },
  { name: "Rood", value: "#ef4444", text: "#ffffff" },
  { name: "Roze", value: "#ec4899", text: "#ffffff" },
  { name: "Paars", value: "#8b5cf6", text: "#ffffff" },
  { name: "Indigo", value: "#6366f1", text: "#ffffff" },
  { name: "Blauw", value: "#3b82f6", text: "#ffffff" },
  { name: "Cyaan", value: "#06b6d4", text: "#ffffff" },
  { name: "Groen", value: "#22c55e", text: "#1e293b" },
  { name: "Olijf", value: "#84cc16", text: "#1e293b" },
];

export function NavbarColorPicker() {
  const [open, setOpen] = useState(false);
  const [active, setActive] = useState(0);
  const [mounted, setMounted] = useState(false);

  function apply(index: number) {
    const c = COLORS[index];
    if (!c) return;
    document.documentElement.style.setProperty("--color-navbar", c.value);
    document.documentElement.style.setProperty("--color-navbar-text", c.text);
    try {
      localStorage.setItem("navbarColor", c.value);
      localStorage.setItem("navbarTextColor", c.text);
    } catch { }
    setActive(index);
    setOpen(false);
  }

  useEffect(() => {
    const saved = localStorage.getItem("navbarColor");
    const savedText = localStorage.getItem("navbarTextColor");
    if (saved) {
      const idx = COLORS.findIndex((c) => c.value === saved);
      if (idx >= 0) setActive(idx);
      document.documentElement.style.setProperty("--color-navbar", saved);
    }
    if (savedText) {
      document.documentElement.style.setProperty("--color-navbar-text", savedText);
    }
    setMounted(true);
  }, []);

  return (
    <div className="relative">
      <button
        type="button"
        onClick={() => setOpen(!open)}
        className="nav-item cursor-pointer px-2"
        aria-label="Navbar kleur"
        title="Navbar kleur"
      >
        <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="13.5" cy="6.5" r="0.5" fill="currentColor" />
          <circle cx="17.5" cy="10.5" r="0.5" fill="currentColor" />
          <circle cx="8.5" cy="7.5" r="0.5" fill="currentColor" />
          <circle cx="6.5" cy="12.5" r="0.5" fill="currentColor" />
          <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.93 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-1 0-.83.67-1.5 1.5-1.5H16c3.31 0 6-2.69 6-6 0-5.5-4.5-10-10-10z" />
        </svg>
      </button>

      {mounted && open && (
        <div
          className="glass-dropdown absolute right-0 top-full mt-0.5 min-w-[200px] rounded-xl z-50 py-3 px-2"
        >
          <div className="text-xs font-semibold uppercase tracking-wider mb-2 px-2" style={{ color: "var(--color-text-muted)" }}>Navbar kleur</div>
          <div className="grid grid-cols-5 gap-1.5">
            {COLORS.map((c, i) => (
              <button
                key={c.name}
                type="button"
                onClick={() => apply(i)}
                className="flex flex-col items-center gap-1 p-1.5 rounded-lg transition-all duration-100"
                title={c.name}
                style={{
                  background: i === active ? "color-mix(in srgb, var(--color-primary) 12%, transparent)" : "transparent",
                  border: "none",
                  cursor: "pointer",
                }}
                onMouseEnter={(e) => {
                  if (i !== active) e.currentTarget.style.backgroundColor = "color-mix(in srgb, var(--color-text-muted) 8%, transparent)";
                }}
                onMouseLeave={(e) => {
                  if (i !== active) e.currentTarget.style.backgroundColor = "transparent";
                }}
              >
                <span className="block w-6 h-6 rounded-full border-2 shrink-0" style={{ backgroundColor: c.value, borderColor: i === active ? "var(--color-primary)" : "color-mix(in srgb, var(--color-text-muted) 20%, transparent)" }} />
                <span className="text-[10px] font-medium leading-tight text-center" style={{ color: "var(--color-text-muted)" }}>{c.name}</span>
              </button>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}