accordion-disabled-state-demo

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