accordion-card-variant-demo

1import {
2  Accordion,
3  AccordionPanel,
4  AccordionItem,
5  AccordionTrigger,
6} from "@/registry/pure-ui/ui/accordion";
7
8export function AccordionCardVariantDemo() {
9  return (
10    <Accordion variant="card" className="w-full max-w-xl">
11      <AccordionItem value="item-1">
12        <AccordionTrigger className="flex items-center gap-2">
13          What Is Football?
14        </AccordionTrigger>
15        <AccordionPanel className="flex flex-col gap-4 text-balance">
16          <p className="text-[15px] text-muted-foreground">
17            A global sport where two teams aim to score goals by getting the
18            ball into the opponent’s net.
19          </p>
20        </AccordionPanel>
21      </AccordionItem>
22      <AccordionItem value="item-2">
23        <AccordionTrigger className="flex items-center gap-2">
24          Duration of the Game
25        </AccordionTrigger>
26        <AccordionPanel className="flex flex-col gap-4 text-balance">
27          <p className="text-[15px] text-muted-foreground">
28            A match lasts 90 minutes, divided into two halves, with added
29            stoppage time as needed.
30          </p>
31        </AccordionPanel>
32      </AccordionItem>
33      <AccordionItem value="item-3">
34        <AccordionTrigger className="flex items-center gap-2">
35          Basic Rules
36        </AccordionTrigger>
37        <AccordionPanel className="flex flex-col gap-4 text-balance">
38          <p className="text-[15px] text-muted-foreground">
39            Players can use any body part except their hands (goalkeepers
40            excluded). Fouls, offsides, and penalties shape the game.
41          </p>
42        </AccordionPanel>
43      </AccordionItem>
44      <AccordionItem value="item-4">
45        <AccordionTrigger className="flex items-center gap-2">
46          Player Positions
47        </AccordionTrigger>
48        <AccordionPanel className="flex flex-col gap-4 text-balance">
49          <p className="text-[15px] text-muted-foreground">
50            Teams have defenders, midfielders, forwards, and a goalkeeper—each
51            with specific responsibilities on the field.
52          </p>
53        </AccordionPanel>
54      </AccordionItem>
55    </Accordion>
56  );
57}