Accordion

 1import {
 2  Accordion,
 3  AccordionContent,
 4  AccordionItem,
 5  AccordionTrigger,
 6} from "@/components/wensity/accordion";
 7
 8export function AccordionBordered() {
 9  return (
10    <Accordion type="single" variant="bordered" defaultValue="item-1">
11      <AccordionItem value="item-1">
12        <AccordionTrigger>What is included in the free plan?</AccordionTrigger>
13        <AccordionContent>
14          Every primitive in the library, unlimited projects, and community support.
15        </AccordionContent>
16      </AccordionItem>
17    </Accordion>
18  );
19}

 1import {
 2  Accordion,
 3  AccordionContent,
 4  AccordionItem,
 5  AccordionTrigger,
 6} from "@/components/wensity/accordion";
 7
 8export function AccordionSeparated() {
 9  return (
10    <Accordion type="single" variant="separated" defaultValue="item-1">
11      <AccordionItem value="item-1">
12        <AccordionTrigger>What is included in the free plan?</AccordionTrigger>
13        <AccordionContent>
14          Every primitive in the library, unlimited projects, and community support.
15        </AccordionContent>
16      </AccordionItem>
17    </Accordion>
18  );
19}

 1import {
 2  Accordion,
 3  AccordionContent,
 4  AccordionItem,
 5  AccordionTrigger,
 6} from "@/components/wensity/accordion";
 7import {
 8  Card,
 9  CardContent,
10  CardDescription,
11  CardHeader,
12  CardTitle,
13} from "@/components/wensity/card";
14
15export function AccordionCard() {
16  return (
17    <Card className="max-w-md">
18      <CardHeader>
19        <CardTitle className="text-lg">Subscription & Billing</CardTitle>
20        <CardDescription className="text-[14px] leading-5">
21          Common questions about your account, plans, payments and cancellations.
22        </CardDescription>
23      </CardHeader>
24      <CardContent>
25        <Accordion type="single">
26          <AccordionItem value="item-1">
27            <AccordionTrigger>What subscription plans do you offer?</AccordionTrigger>
28            <AccordionContent>
29              We offer Starter, Pro, and Team plans billed monthly or annually.
30            </AccordionContent>
31          </AccordionItem>
32          <AccordionItem value="item-2">
33            <AccordionTrigger>How does billing work?</AccordionTrigger>
34            <AccordionContent>
35              You are billed automatically at the start of each cycle.
36            </AccordionContent>
37          </AccordionItem>
38          <AccordionItem value="item-3">
39            <AccordionTrigger>How do I cancel my subscription?</AccordionTrigger>
40            <AccordionContent>
41              Cancel anytime from your account settings.
42            </AccordionContent>
43          </AccordionItem>
44        </Accordion>
45      </CardContent>
46    </Card>
47  );
48}

 1import {
 2  Accordion,
 3  AccordionContent,
 4  AccordionItem,
 5  AccordionTrigger,
 6} from "@/components/wensity/accordion";
 7
 8export function AccordionFaq() {
 9  return (
10    <Accordion type="single" variant="faq" defaultValue="item-1">
11      <AccordionItem value="item-1">
12        <AccordionTrigger>What is included in the free plan?</AccordionTrigger>
13        <AccordionContent>
14          Every primitive in the library, unlimited projects, and community support.
15        </AccordionContent>
16      </AccordionItem>
17    </Accordion>
18  );
19}