With icons

1import {
2  Accordion,
3  AccordionContent,
4  AccordionItem,
5  AccordionTrigger,
6} from '@/components/ui/accordion'
7import {
8  CreditCardIcon,
9  LifeBuoyIcon,
10  SettingsIcon,
11  ShieldIcon,
12} from 'lucide-react'
13 
14const sections = [
15  {
16    value: 'account',
17    icon: SettingsIcon,
18    title: 'Account',
19    body: 'Update your name, email, and profile photo from the account settings.',
20  },
21  {
22    value: 'billing',
23    icon: CreditCardIcon,
24    title: 'Billing',
25    body: 'Manage your payment method, view invoices, and change your plan.',
26  },
27  {
28    value: 'security',
29    icon: ShieldIcon,
30    title: 'Security',
31    body: 'Enable two-factor authentication and review active sessions.',
32  },
33  {
34    value: 'support',
35    icon: LifeBuoyIcon,
36    title: 'Support',
37    body: 'Reach our team any time — we typically reply within a few hours.',
38  },
39]
40 
41export function Accordion03() {
42  return (
43    <Accordion className="w-full max-w-md">
44      {sections.map((section) => (
45        <AccordionItem key={section.value} value={section.value}>
46          <AccordionTrigger>
47            <span className="flex items-center gap-2.5">
48              <section.icon className="text-muted-foreground size-4" />
49              {section.title}
50            </span>
51          </AccordionTrigger>
52          <AccordionContent className="text-muted-foreground">
53            {section.body}
54          </AccordionContent>
55        </AccordionItem>
56      ))}
57    </Accordion>
58  )
59}