Button Popover

Template di dropdown ricco: un bottone “Menu” che apre un pannello a griglia con voci fatte di icona, titolo e descrizione. Non ha logica di business — è il punto di partenza da copiare per un mega-menu di navigazione o un selettore di prodotti. Client component basato su Popover di Headless UI.

File

components/ButtonPopover.tsx

Uso base

import ButtonPopover from "@/components/ButtonPopover";

<ButtonPopover />

Nessuna prop. Le tre voci di esempio (“Inizia subito”, “Premi”, “Formazione”) sono un array scritto direttamente dentro il JSX, con copy placeholder da sostituire.

Com'è fatto

• Popover.Button — classe btn-brutal, con un chevron SVG che ruota di 180° quando open è true.
• Transition — scale + opacity, 100ms in entrata, 75ms in uscita.
• Popover.Panel — absolute left-0 mt-3, larghezza che cresce con il breakpoint (max-w-full sm:max-w-sm lg:max-w-2xl), contenuto in un card-brutal con griglia a 2 colonne da lg in su.
• Ogni voce è un card-brutal-flat con il quadrato icona in var(--mustard), titolo in headline-serif e copy al 70% di opacità.

Personalizzare

• Estrai l'array: spostalo fuori dal JSX per renderlo leggibile e riusabile.

const items = [
  {
    title: "Documentazione",
    copy: "Ogni modulo, spiegato",
    href: "/docs",
    icon: <path strokeLinecap="round" d="M12 6.042A8.967..." />,
  },
  // ...
];

• Rendi le voci cliccabili: oggi sono <div> con cursor-pointer ma senza destinazione. Avvolgili in un <Link href={item.href}> (e in Popover.Button as={Link} se vuoi che il pannello si chiuda al click).
• Etichetta del trigger: sostituisci “Menu” con il nome della sezione.
• Allineamento: left-0 → right-0 se il bottone sta sul lato destro della navbar.
• Icone: sono <path> Heroicons inline dentro un <svg viewBox="0 0 24 24"> condiviso — incolli solo il path, non tutto l'SVG.