Accordion

1import {
2  Example,
3  ExampleWrapper,
4} from "@/registry/radix-sera/components/example"
5import {
6  Accordion,
7  AccordionContent,
8  AccordionItem,
9  AccordionTrigger,
10} from "@/registry/radix-sera/ui/accordion"
11import { Button } from "@/registry/radix-sera/ui/button"
12import {
13  Card,
14  CardContent,
15  CardDescription,
16  CardHeader,
17  CardTitle,
18} from "@/registry/radix-sera/ui/card"
19import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
20 
21export default function AccordionExample() {
22  return (
23    <ExampleWrapper className="w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1">
24      <AccordionBasic />
25      <AccordionMultiple />
26      <AccordionWithBorders />
27      <AccordionInCard />
28      <AccordionWithDisabled />
29    </ExampleWrapper>
30  )
31}
32 
33function AccordionBasic() {
34  const items = [
35    {
36      value: "item-1",
37      trigger: "Is it accessible?",
38      content: "Yes. It adheres to the WAI-ARIA design pattern.",
39    },
40    {
41      value: "item-2",
42      trigger: "Is it styled?",
43      content:
44        "Yes. It comes with default styles that matches the other components' aesthetic.",
45    },
46    {
47      value: "item-3",
48      trigger: "Is it animated?",
49      content:
50        "Yes. It's animated by default, but you can disable it if you prefer.",
51    },
52  ]
53 
54  return (
55    <Example title="Basic">
56      <Accordion type="single" collapsible className="mx-auto max-w-lg">
57        {items.map((item) => (
58          <AccordionItem key={item.value} value={item.value}>
59            <AccordionTrigger>{item.trigger}</AccordionTrigger>
60            <AccordionContent>{item.content}</AccordionContent>
61          </AccordionItem>
62        ))}
63      </Accordion>
64    </Example>
65  )
66}
67 
68function AccordionMultiple() {
69  const items = [
70    {
71      value: "item-1",
72      trigger:
73        "What are the key considerations when implementing a comprehensive enterprise-level authentication system?",
74      content:
75        "Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.",
76    },
77    {
78// … truncated