Accordion

import { Accordion, AccordionItem } from "@/registry/ds/accordion";
import { Button } from "@/registry/ds/button";
import { ArrowUpRight } from "@/registry/ds/icons";

export default function AccordionCards() {
  return (
    <div className="w-full max-w-xl">
      <Accordion variant="cards" toggle="capsule" defaultValue={["01"]}>
        <AccordionItem
          value="01"
          number="01"
          title="Elegí tu carrera"
          action={<Button variant="text" size="sm" iconRight={<ArrowUpRight />}>Ver carreras</Button>}
        >
          Compará planes de estudio, duración y salida laboral de las 24 carreras.
        </AccordionItem>
        <AccordionItem value="02" number="02" title="Completá la inscripción">
          Cargá tus datos y la documentación. Te lleva unos 10 minutos.
        </AccordionItem>
        <AccordionItem value="03" number="03" title="Conocé el campus">
          Sumate a una visita guiada o recorrelo en 360° desde tu casa.
        </AccordionItem>
      </Accordion>
    </div>
  );
}

import { Accordion, AccordionItem } from "@/registry/ds/accordion";

export default function AccordionToggles() {
  return (
    <div className="grid w-full max-w-2xl gap-4 sm:grid-cols-3">
      {(["chevron", "plus", "capsule"] as const).map((toggle) => (
        <Accordion key={toggle} toggle={toggle} size="sm" accent={false}>
          <AccordionItem value="a" title={toggle}>
            El indicador cambia al abrir; nunca es una ✕.
          </AccordionItem>
        </Accordion>
      ))}
    </div>
  );
}