accordion-default-variant-demo

1import {
2  Accordion,
3  AccordionPanel,
4  AccordionItem,
5  AccordionTrigger,
6} from "@/registry/pure-ui/ui/accordion";
7
8export function AccordionDefaultVariantDemo() {
9  return (
10    <Accordion variant="default" className="w-full max-w-xl">
11      <AccordionItem value="item-1">
12        <AccordionTrigger className="flex items-center gap-2">
13          What Is Cricket?
14        </AccordionTrigger>
15        <AccordionPanel className="flex flex-col gap-4 text-balance">
16          <p className="text-[15px] text-muted-foreground">
17            A bat-and-ball sport played between two teams of eleven, focused on
18            scoring runs and taking wickets.
19          </p>
20        </AccordionPanel>
21      </AccordionItem>
22      <AccordionItem value="item-2">
23        <AccordionTrigger className="flex items-center gap-2">
24          Formats of the Game
25        </AccordionTrigger>
26        <AccordionPanel className="flex flex-col gap-4 text-balance">
27          <p className="text-[15px] text-muted-foreground">
28            Cricket has three main formats: Test, ODI, and T20—each with
29            different lengths and strategies.
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            Teams take turns batting and bowling. The batting side scores runs,
40            while the bowling side tries to dismiss batters.
41          </p>
42        </AccordionPanel>
43      </AccordionItem>
44      <AccordionItem value="item-4">
45        <AccordionTrigger className="flex items-center gap-2">
46          Key Player Roles
47        </AccordionTrigger>
48        <AccordionPanel className="flex flex-col gap-4 text-balance">
49          <p className="text-[15px] text-muted-foreground">
50            Players specialize as batters, bowlers, all-rounders, or
51            wicketkeepers—each contributing differently to the team.
52          </p>
53        </AccordionPanel>
54      </AccordionItem>
55    </Accordion>
56  );
57}