Accordion Borders

1// shadcn
2import {
3  Accordion,
4  AccordionContent,
5  AccordionItem,
6  AccordionTrigger
7} from "@/components/ui/accordion";
8
9// constants
10const items = [
11  {
12    value: "billing",
13    trigger: "How does billing work?",
14    content:
15      "We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members."
16  },
17  {
18    value: "security",
19    trigger: "Is my data secure?",
20    content:
21      "Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols."
22  },
23  {
24    value: "integration",
25    trigger: "What integrations do you support?",
26    content:
27      "We integrate with 500+ popular tools including Slack, Zapier, Salesforce, HubSpot, and more. You can also build custom integrations using our REST API and webhooks."
28  }
29];
30
31//  ------------------------------ | ACCORDION BORDERS | ------------------------------  //
32
33export default function AccordionBorders() {
34  return (
35    <Accordion
36      className="max-w-lg rounded-lg border border-border"
37      defaultValue={["billing"]}
38    >
39      {items.map((item) => (
40        <AccordionItem
41          key={item.value}
42          value={item.value}
43          className="border-b px-4 last:border-b-0"
44        >
45          <AccordionTrigger>{item.trigger}</AccordionTrigger>
46          <AccordionContent>{item.content}</AccordionContent>
47        </AccordionItem>
48      ))}
49    </Accordion>
50  );
51}