Rich content

1import {
2  Accordion,
3  AccordionContent,
4  AccordionItem,
5  AccordionTrigger,
6} from '@/components/ui/accordion'
7import { Button } from '@/components/ui/button'
8import { ArrowRightIcon } from 'lucide-react'
9 
10export function Accordion09() {
11  return (
12    <Accordion defaultValue={['features']} className="w-full max-w-md">
13      <AccordionItem value="features">
14        <AccordionTrigger>What is included?</AccordionTrigger>
15        <AccordionContent className="text-muted-foreground">
16          <p>Every plan ships with the core toolkit:</p>
17          <ul className="list-disc space-y-1 pl-5">
18            <li>Unlimited projects and members</li>
19            <li>Role-based access control</li>
20            <li>Audit logs and exports</li>
21          </ul>
22          <p className="mt-4">
23            Read the full{' '}
24            <a href="#" className="text-foreground">
25              feature comparison
26            </a>{' '}
27            for details.
28          </p>
29        </AccordionContent>
30      </AccordionItem>
31      <AccordionItem value="contact">
32        <AccordionTrigger>Need a custom plan?</AccordionTrigger>
33        <AccordionContent className="text-muted-foreground">
34          <p>Talk to our team about volume pricing and enterprise features.</p>
35          <Button size="sm" className="mt-1">
36            Contact sales
37            <ArrowRightIcon data-icon="inline-end" />
38          </Button>
39        </AccordionContent>
40      </AccordionItem>
41    </Accordion>
42  )
43}