ZeroToShip

Docs/Componenti

// componente

FAQ

Accordion editoriale a due colonne: a sinistra il titolo serif con squiggle, a destra la lista di domande apribili una alla volta. Client component per gestire lo stato di apertura.

File

components/FAQ.tsx

Uso base

app/page.tsx
tsx
import FAQ from "@/components/FAQ";

<FAQ />

Personalizzare

Le domande vivono in faqList, un array di { question, answer } in cima al file. answer è un JSX.Element — puoi metterci liste, link, <code>, immagini.

components/FAQ.tsx
tsx
const faqList: FAQItemProps[] = [
  {
    question: "Come ottengo l'accesso dopo il pagamento?",
    answer: (
      <p>
        All'istante. Dopo il checkout, ricevi un invito
        al repo GitHub privato all'email con cui hai pagato.
      </p>
    ),
  },
  // ...aggiungi le tue
];

L'icona +/− è un SVG disegnato inline in PlusMinusIcon — se vuoi cambiare stile, la trovi nello stesso file.