theme-wizard/packages/theme-wizard-templates/src/components/AccordionSection/index.tsx at 7b520131533302158740dc6ae600ef41921355b5 · nl-design-system/theme-wizard · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
import { Paragraph } from '@nl-design-system-candidate/paragraph-react';
import { IconChevronRight } from '@tabler/icons-react';
import { LinkList, LinkListLink } from '@utrecht/component-library-react/dist/css-module';
import * as React from 'react';
import type { AccordionSection } from './types';
import { Column, Row } from '../Layout';

export const ACCORDION_SECTIONS: AccordionSection[] = [
  {
    body: (
      <Row gap="var(--basis-space-column-6xl)" justify="space-between">
        <Column cols={8}>
          <Paragraph>
            Met een paspoort, identiteitskaart of rijbewijs kunt u zich identificeren en reizen. Onder voorwaarden kunt
            u de Nederlandse identiteit krijgen.
          </Paragraph>
        </Column>

        <Column cols={4}>
          <LinkList>
            <LinkListLink href="#" icon={<IconChevronRight />}>
              Paspoort aanvragen
            </LinkListLink>

            <LinkListLink href="#" icon={<IconChevronRight />}>
              ID-kaart aanvragen
            </LinkListLink>

            <LinkListLink href="#" icon={<IconChevronRight />}>
              Rijbewijs aanvragen
            </LinkListLink>
          </LinkList>
        </Column>
      </Row>
    ),
    label: 'Hoe vraag ik een paspoort aan?',
  },
  {
    body: (
      <Row gap="var(--basis-space-column-6xl)" justify="space-between">
        <Column cols={12}>
          <LinkList>
            <LinkListLink href="#" icon={<IconChevronRight />}>
              Verhuizing naar Gemeente voorbeeld
            </LinkListLink>

            <LinkListLink href="#" icon={<IconChevronRight />}>
              Verhuizing vanuit het buitenland naar Gemeente voorbeeld doorgeven
            </LinkListLink>

            <LinkListLink href="#" icon={<IconChevronRight />}>
              Verhuizing naar het buitenland doorgeven
            </LinkListLink>
          </LinkList>
        </Column>
      </Row>
    ),
    label: 'Verhuizen',
  },
  {
    body: (
      <Row gap="var(--basis-space-column-6xl)" justify="space-between">
        <Column cols={9}>
          <Paragraph>
            Wilt u het kenteken aanpassen van uw parkeervergunning, garageabonnement of gehandicaptenparkeerplaats? Kies
            hier wat u wilt aanpassen.
          </Paragraph>
        </Column>

        <Column cols={12}>
          <LinkList>
            <LinkListLink href="#" icon={<IconChevronRight />}>
              Verhuizing naar Gemeente voorbeeld
            </LinkListLink>

            <LinkListLink href="#" icon={<IconChevronRight />}>
              Verhuizing vanuit het buitenland naar Gemeente voorbeeld doorgeven
            </LinkListLink>

            <LinkListLink href="#" icon={<IconChevronRight />}>
              Verhuizing naar het buitenland doorgeven
            </LinkListLink>
          </LinkList>
        </Column>
      </Row>
    ),
    label: 'Kentekenwijziging doorgeven',
  },
];