Settings sections

1import {
2  Accordion,
3  AccordionContent,
4  AccordionItem,
5  AccordionTrigger,
6} from '@/components/ui/accordion'
7import { Label } from '@/components/ui/label'
8import { Switch } from '@/components/ui/switch'
9 
10const groups = [
11  {
12    value: 'email',
13    title: 'Email notifications',
14    rows: [
15      { id: 'email-product', label: 'Product updates', checked: true },
16      { id: 'email-security', label: 'Security alerts', checked: true },
17      { id: 'email-marketing', label: 'Marketing', checked: false },
18    ],
19  },
20  {
21    value: 'push',
22    title: 'Push notifications',
23    rows: [
24      { id: 'push-mentions', label: 'Mentions', checked: true },
25      { id: 'push-comments', label: 'Comments', checked: false },
26    ],
27  },
28]
29 
30export function Accordion15() {
31  return (
32    <Accordion defaultValue={['email']} className="w-full max-w-md">
33      {groups.map((group) => (
34        <AccordionItem key={group.value} value={group.value}>
35          <AccordionTrigger>{group.title}</AccordionTrigger>
36          <AccordionContent>
37            <div className="flex flex-col gap-4">
38              {group.rows.map((row) => (
39                <div key={row.id} className="flex items-center justify-between">
40                  <Label htmlFor={row.id} className="font-normal">
41                    {row.label}
42                  </Label>
43                  <Switch id={row.id} defaultChecked={row.checked} />
44                </div>
45              ))}
46            </div>
47          </AccordionContent>
48        </AccordionItem>
49      ))}
50    </Accordion>
51  )
52}