Build a Color Palette Generator in React

/* lib/color-utils.js */
export function hslToHex(h, s, l) {
  l /= 100;
  const a = s * Math.min(l, 1 - l) / 100;
  const f = n => {
    const k = (n + h / 30) % 12;
    const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
    return Math.round(255 * color).toString(16).padStart(2, '0');
  };
  return `#${f(0)}${f(8)}${f(4)}`;
}

"use client"

import { useState } from "react"
import { RefreshCw, Copy } from "lucide-react"

// Simple HSL wrapper for display
const hsl = (h: number, s: number, l: number) => `hsl(${h}, ${s}%, ${l}%)`

export default function PaletteGen() {
  const [hue, setHue] = useState(200)
  const [palette, setPalette] = useState<string[]>([])

  const generate = () => {
     const newHue = Math.floor(Math.random() * 360)
     setHue(newHue)
     
     // Generate 5 shades from Light to Dark
     // Saturation fixed at 70% for vibrancy
     const colors = [
        hsl(newHue, 70, 95), // Background
        hsl(newHue, 70, 85), // Surface
        hsl(newHue, 70, 60), // Primary
        hsl(newHue, 70, 40), // Hover
        hsl(newHue, 70, 20), // Text
     ]
     setPalette(colors)
  }

  return (
    <div className="max-w-xl mx-auto p-8">
       <button 
         onClick={generate}
         className="w-full mb-8 py-4 bg-black text-white rounded-xl font-bold flex items-center justify-center gap-2 hover:scale-[1.02] transition"
       >
         <RefreshCw size={20} /> GENERATE PALETTE
       </button>

       {palette.length > 0 ? (
         <div className="grid grid-cols-1 sm:grid-cols-5 h-64 rounded-2xl overflow-hidden shadow-2xl">
            {palette.map((color, i) => (
               <div 
                 key={i} 
                 className="h-full flex items-end justify-center pb-4 group cursor-pointer hover:flex-[1.5] transition-all duration-300"
                 style={{ backgroundColor: color }}
                 onClick={() => navigator.clipboard.writeText(color)}
               >
                  <div className="bg-white/90 px-2 py-1 rounded text-xs font-mono opacity-0 group-hover:opacity-100 transition-opacity flex items-center gap-1 shadow-sm">
                     {color} <Copy size={10} />
                  </div>
               </div>
            ))}
         </div>
       ) : (
         <div className="text-center text-slate-400 py-12 border-2 border-dashed rounded-xl">
            Click Generate to start
         </div>
       )}
       
       <div className="mt-8 text-center text-sm text-slate-500">
          <strong>Algorithm:</strong> Monochromatic Harmony (Hue {hue}°)
       </div>
    </div>
  )
}