From 3f9ca65cb6b4defabb5c018a68dd4959007ae1e1 Mon Sep 17 00:00:00 2001
From: Aram <37216945+alimpens@users.noreply.github.com>
Date: Tue, 16 Jan 2024 12:41:27 +0100
Subject: [PATCH] Add Signals demo (#29)

* Add signals demo

* Change footer cell

* Add menu, return skiplink

* Align with current v2 design

* Use react router for nav

* Start content on correct column

* Include Signalen in list on homepage

* Fix link on logo

* Add entry to index, fix type

* Fix logo link

* Add onSubmit navigation

* Replace back button with back link

* Update src/shared/components/Link.tsx

Co-authored-by: Vincent Smedinga <v.smedinga@amsterdam.nl>

* Remove fixed TODO comment

* Use signalen scoped class instead of generic one

---------

Co-authored-by: Vincent Smedinga <v.smedinga@amsterdam.nl>
---
 src/main.tsx                                  |  2 +
 src/shared/components/Link.tsx                | 41 ++++++++++
 src/shared/pages/RootPage.tsx                 |  5 ++
 .../signalen/components/FormNavigation.tsx    | 23 ++++++
 src/sites/signalen/components/SiteFooter.tsx  | 44 +++++++++++
 src/sites/signalen/components/SiteHeader.tsx  | 22 ++++++
 src/sites/signalen/components/signalen.css    | 15 ++++
 src/sites/signalen/constants.ts               |  3 +
 src/sites/signalen/pages/Add.tsx              | 51 +++++++++++++
 src/sites/signalen/pages/Contact.tsx          | 60 +++++++++++++++
 src/sites/signalen/pages/Describe.tsx         | 50 +++++++++++++
 src/sites/signalen/pages/SignalenRootPage.tsx | 15 ++++
 src/sites/signalen/pages/Summary.tsx          | 75 +++++++++++++++++++
 src/sites/signalen/pages/Thanks.tsx           | 27 +++++++
 src/sites/signalen/routes.tsx                 | 36 +++++++++
 15 files changed, 469 insertions(+)
 create mode 100644 src/shared/components/Link.tsx
 create mode 100644 src/sites/signalen/components/FormNavigation.tsx
 create mode 100644 src/sites/signalen/components/SiteFooter.tsx
 create mode 100644 src/sites/signalen/components/SiteHeader.tsx
 create mode 100644 src/sites/signalen/components/signalen.css
 create mode 100644 src/sites/signalen/constants.ts
 create mode 100644 src/sites/signalen/pages/Add.tsx
 create mode 100644 src/sites/signalen/pages/Contact.tsx
 create mode 100644 src/sites/signalen/pages/Describe.tsx
 create mode 100644 src/sites/signalen/pages/SignalenRootPage.tsx
 create mode 100644 src/sites/signalen/pages/Summary.tsx
 create mode 100644 src/sites/signalen/pages/Thanks.tsx
 create mode 100644 src/sites/signalen/routes.tsx

diff --git a/src/main.tsx b/src/main.tsx
index 2f897dc..8e2fe6c 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -7,6 +7,7 @@ import { RootPage } from './shared/pages/RootPage'
 
 import { routes as amopisRoutes } from './sites/amopis/routes'
 import { routes as amsterdamRoutes } from './sites/amsterdam/routes'
+import { routes as signalenRoutes } from './sites/signalen/routes'
 
 import '@amsterdam/design-system-tokens/dist/root.css'
 import '@amsterdam/design-system-assets/font/index.css'
@@ -21,6 +22,7 @@ const router = createBrowserRouter([
   },
   amopisRoutes,
   amsterdamRoutes,
+  signalenRoutes,
 ])
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
diff --git a/src/shared/components/Link.tsx b/src/shared/components/Link.tsx
new file mode 100644
index 0000000..43eeeb9
--- /dev/null
+++ b/src/shared/components/Link.tsx
@@ -0,0 +1,41 @@
+import type { LinkProps as LinkComponentProps } from '@amsterdam/design-system-react'
+import { Link as LinkComponent } from '@amsterdam/design-system-react'
+import { ForwardedRef, forwardRef, HTMLAttributeAnchorTarget, MouseEvent, PropsWithChildren } from 'react'
+import { useHref, useLinkClickHandler } from 'react-router-dom'
+
+type LinkProps = LinkComponentProps & {
+  to: string
+  target?: HTMLAttributeAnchorTarget
+  replace?: boolean
+  state?: unknown
+  onClick?: (event: MouseEvent<HTMLElement>) => void
+}
+
+export const Link = forwardRef(
+  (
+    // TODO: Remove `PropsWithChildren` when using @amsterdam/design-system-react ^0.4.0
+    { children, onClick, replace = false, state, target, to, ...rest }: PropsWithChildren<LinkProps>,
+    ref: ForwardedRef<HTMLAnchorElement>,
+  ) => {
+    const href = useHref(to)
+    const handleClick = useLinkClickHandler(to, { replace, state, target })
+
+    return (
+      <LinkComponent
+        {...rest}
+        href={href}
+        onClick={(event) => {
+          window.scrollTo(0, 0)
+          onClick?.(event)
+          if (!event.defaultPrevented) {
+            handleClick(event)
+          }
+        }}
+        ref={ref}
+        target={target}
+      >
+        {children}
+      </LinkComponent>
+    )
+  },
+)
diff --git a/src/shared/pages/RootPage.tsx b/src/shared/pages/RootPage.tsx
index 93adca6..69f2c6b 100644
--- a/src/shared/pages/RootPage.tsx
+++ b/src/shared/pages/RootPage.tsx
@@ -1,6 +1,7 @@
 import { Grid, Heading, Link, PageHeading, Screen, UnorderedList } from '@amsterdam/design-system-react'
 import { siteUrl as amopisSiteUrl } from '../../sites/amopis/constants'
 import { siteUrl as amsterdamSiteUrl } from '../../sites/amsterdam/constants'
+import { siteUrl as signalenSiteUrl } from '../../sites/signalen/constants'
 
 type Site = {
   label: string
@@ -16,6 +17,10 @@ const sites: Site[] = [
     label: 'Amopis',
     href: amopisSiteUrl,
   },
+  {
+    label: 'Signalen',
+    href: `${signalenSiteUrl}beschrijf`,
+  },
 ]
 
 export const RootPage = () => (
diff --git a/src/sites/signalen/components/FormNavigation.tsx b/src/sites/signalen/components/FormNavigation.tsx
new file mode 100644
index 0000000..563c054
--- /dev/null
+++ b/src/sites/signalen/components/FormNavigation.tsx
@@ -0,0 +1,23 @@
+import { Button } from '@amsterdam/design-system-react'
+import { Link } from '../../../shared/components/Link'
+
+const FormNavigation = ({
+  firstPage,
+  lastPage,
+  backlinkUrl,
+}: {
+  firstPage?: boolean
+  lastPage?: boolean
+  backlinkUrl?: string
+}) => (
+  <div className="signalen-form-navigation">
+    {!firstPage && backlinkUrl && (
+      <Link to={backlinkUrl} variant="inList" className="signalen-back-link">
+        Vorige
+      </Link>
+    )}
+    <Button type="submit">{lastPage ? 'Versturen' : 'Volgende'}</Button>
+  </div>
+)
+
+export default FormNavigation
diff --git a/src/sites/signalen/components/SiteFooter.tsx b/src/sites/signalen/components/SiteFooter.tsx
new file mode 100644
index 0000000..b27ffa7
--- /dev/null
+++ b/src/sites/signalen/components/SiteFooter.tsx
@@ -0,0 +1,44 @@
+import { Footer, Grid, Heading, Link, PageMenu, Paragraph, VisuallyHidden } from '@amsterdam/design-system-react'
+
+export const SiteFooter = () => (
+  <Footer>
+    <Footer.Top>
+      <VisuallyHidden>
+        <Heading>Colofon</Heading>
+      </VisuallyHidden>
+      <Grid gapVertical="large" paddingVertical="medium">
+        <Grid.Cell span={{ narrow: 3, medium: 4, wide: 4 }}>
+          <div style={{ display: 'grid' }} className="amsterdam-gap-xs">
+            <Heading level={2} size="level-4" inverseColor>
+              Contact
+            </Heading>
+            <Paragraph size="small" inverseColor>
+              Lukt het niet om een melding te doen? Bel het telefoonnummer{' '}
+              <Link href="tel:+3114020" onBackground="dark" variant="inline">
+                14 020
+              </Link>
+              .
+            </Paragraph>
+            <Paragraph size="small" inverseColor>
+              Wij zijn bereikbaar van maandag tot en met vrijdag van 08.00 tot 18.00 uur.
+            </Paragraph>
+          </div>
+        </Grid.Cell>
+      </Grid>
+    </Footer.Top>
+    <Footer.Bottom>
+      <VisuallyHidden>
+        <Heading level={2}>Over deze website</Heading>
+      </VisuallyHidden>
+      <Grid paddingVertical="small">
+        <Grid.Cell span="all">
+          <PageMenu>
+            <PageMenu.Link href="#">Over deze site</PageMenu.Link>
+            <PageMenu.Link href="#">Privacy</PageMenu.Link>
+            <PageMenu.Link href="#">Toegankelijkheid</PageMenu.Link>
+          </PageMenu>
+        </Grid.Cell>
+      </Grid>
+    </Footer.Bottom>
+  </Footer>
+)
diff --git a/src/sites/signalen/components/SiteHeader.tsx b/src/sites/signalen/components/SiteHeader.tsx
new file mode 100644
index 0000000..c616f6a
--- /dev/null
+++ b/src/sites/signalen/components/SiteHeader.tsx
@@ -0,0 +1,22 @@
+import { Grid, Header, PageMenu, SkipLink } from '@amsterdam/design-system-react'
+import { siteUrl } from '../constants'
+import { PageMenuLink } from '../../../shared/components/PageMenuLink'
+
+export const SiteHeader = () => (
+  <Grid>
+    <Grid.Cell span="all">
+      <SkipLink href="#main">Direct naar inhoud</SkipLink>
+      <Header
+        logoLink={`${siteUrl}beschrijf`}
+        logoLinkTitle="Naar de homepage van Signalen Amsterdam"
+        links={
+          <PageMenu alignEnd>
+            <PageMenuLink to={`${siteUrl}beschrijf`}>Doe een melding</PageMenuLink>
+            <PageMenu.Link href="#">Meldingenkaart</PageMenu.Link>
+            <PageMenu.Link href="#">Mijn meldingen</PageMenu.Link>
+          </PageMenu>
+        }
+      />
+    </Grid.Cell>
+  </Grid>
+)
diff --git a/src/sites/signalen/components/signalen.css b/src/sites/signalen/components/signalen.css
new file mode 100644
index 0000000..e935152
--- /dev/null
+++ b/src/sites/signalen/components/signalen.css
@@ -0,0 +1,15 @@
+.signalen-form-navigation {
+  align-items: center;
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
+}
+
+.signalen-summary-heading {
+  display: flex;
+  justify-content: space-between;
+}
+
+.signalen-back-link svg {
+  transform: rotate(180deg);
+}
diff --git a/src/sites/signalen/constants.ts b/src/sites/signalen/constants.ts
new file mode 100644
index 0000000..e3002bb
--- /dev/null
+++ b/src/sites/signalen/constants.ts
@@ -0,0 +1,3 @@
+import { rootUrl } from '../../shared/constants'
+
+export const siteUrl = `${rootUrl}signalen/`
diff --git a/src/sites/signalen/pages/Add.tsx b/src/sites/signalen/pages/Add.tsx
new file mode 100644
index 0000000..a7ee791
--- /dev/null
+++ b/src/sites/signalen/pages/Add.tsx
@@ -0,0 +1,51 @@
+import { FormEvent } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { FormLabel, Grid, Heading, Paragraph } from '@amsterdam/design-system-react'
+import FormNavigation from '../components/FormNavigation'
+import { siteUrl } from '../constants'
+
+export const Add = () => {
+  const navigate = useNavigate()
+
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+
+    navigate(`${siteUrl}contact`)
+  }
+
+  return (
+    <Grid paddingBottom="medium">
+      <Grid.Cell span={{ narrow: 4, medium: 6, wide: 7 }} start={{ narrow: 1, medium: 2, wide: 2 }}>
+        <form style={{ display: 'grid' }} className="amsterdam-gap-md" onSubmit={handleSubmit}>
+          <Heading>Doe een melding</Heading>
+
+          <Heading level={2}>Locatie en vragen</Heading>
+
+          <fieldset>
+            <legend>Waar is het?</legend>
+            <Paragraph>KAART SELECTOR</Paragraph>
+          </fieldset>
+
+          <fieldset>
+            <legend>Wanneer was het?</legend>
+            <div>
+              <input type="radio" id="nu" name="when" value="nu" />
+              <label htmlFor="nu">Nu</label>
+            </div>
+            <div>
+              <input type="radio" id="eerder" name="when" value="eerder" />
+              <label htmlFor="eerder">Eerder</label>
+            </div>
+          </fieldset>
+
+          <div>
+            <FormLabel htmlFor="where">Waar komt het afval vandaan, denkt u? (niet verplicht)</FormLabel>
+            <textarea id="where" />
+          </div>
+
+          <FormNavigation backlinkUrl={`${siteUrl}beschrijf`} />
+        </form>
+      </Grid.Cell>
+    </Grid>
+  )
+}
diff --git a/src/sites/signalen/pages/Contact.tsx b/src/sites/signalen/pages/Contact.tsx
new file mode 100644
index 0000000..4aac319
--- /dev/null
+++ b/src/sites/signalen/pages/Contact.tsx
@@ -0,0 +1,60 @@
+import { FormEvent } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Checkbox, FormLabel, Grid, Heading, Paragraph } from '@amsterdam/design-system-react'
+import FormNavigation from '../components/FormNavigation'
+import { siteUrl } from '../constants'
+
+export const Contact = () => {
+  const navigate = useNavigate()
+
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+
+    navigate(`${siteUrl}versturen`)
+  }
+
+  return (
+    <Grid paddingBottom="medium">
+      <Grid.Cell span={{ narrow: 4, medium: 6, wide: 7 }} start={{ narrow: 1, medium: 2, wide: 2 }}>
+        <form style={{ display: 'grid' }} className="amsterdam-gap-md" onSubmit={handleSubmit}>
+          <Heading>Doe een melding</Heading>
+
+          <Heading level={2}>Contactgegevens</Heading>
+
+          <Paragraph size="large">Mogen we u bellen voor vragen? En op de hoogte houden via e-mail?</Paragraph>
+
+          <Paragraph>
+            Vaak hebben we nog een vraag. Daarmee kunnen we het probleem sneller of beter oplossen. Of we willen iets
+            uitleggen. Wij willen u dan graag even bellen. Of anders e-mailen wij u. Wij gebruiken uw telefoonnummer en
+            e-mailadres alléén voor deze melding.
+          </Paragraph>
+
+          <div>
+            <FormLabel htmlFor="phone">Wat is uw telefoonnummer?(niet verplicht)</FormLabel>
+            <input type="tel" id="phone" />
+          </div>
+
+          <div>
+            <FormLabel htmlFor="mail">Wat is uw e-mailadres?(niet verplicht)</FormLabel>
+            <input type="email" id="mail" />
+          </div>
+
+          <fieldset>
+            <legend>Mogen we uw melding doorsturen?</legend>
+            <Paragraph className="amsterdam-mb-md">
+              Soms kan de gemeente niets doen. Een andere organisatie moet dan aan het werk. Als dat zo is kunnen wij uw
+              melding soms doorsturen. Wij sturen uw telefoonnummer of e-mailadres mee. Maar dat doen we alleen als u
+              dat goed vindt.
+            </Paragraph>
+            <Checkbox>
+              Ja, ik geef de gemeente Amsterdam toestemming om mijn melding door te sturen naar andere organisaties als
+              de melding niet voor de gemeente is bestemd.
+            </Checkbox>
+          </fieldset>
+
+          <FormNavigation backlinkUrl={`${siteUrl}vul-aan`} />
+        </form>
+      </Grid.Cell>
+    </Grid>
+  )
+}
diff --git a/src/sites/signalen/pages/Describe.tsx b/src/sites/signalen/pages/Describe.tsx
new file mode 100644
index 0000000..e0f2f2f
--- /dev/null
+++ b/src/sites/signalen/pages/Describe.tsx
@@ -0,0 +1,50 @@
+import { FormEvent } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { FormLabel, Grid, Heading, Paragraph } from '@amsterdam/design-system-react'
+import FormNavigation from '../components/FormNavigation'
+import { siteUrl } from '../constants'
+
+export const Describe = () => {
+  const navigate = useNavigate()
+
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+
+    navigate(`${siteUrl}vul-aan`)
+  }
+
+  return (
+    <Grid paddingBottom="medium">
+      <Grid.Cell span={{ narrow: 4, medium: 6, wide: 7 }} start={{ narrow: 1, medium: 2, wide: 2 }}>
+        <form style={{ display: 'grid' }} className="amsterdam-gap-md" onSubmit={handleSubmit}>
+          <Heading>Doe een melding</Heading>
+
+          <Heading level={2}>Beschrijf uw melding</Heading>
+
+          <div>
+            <FormLabel htmlFor="description">Waar gaat het om?</FormLabel>
+            <Paragraph size="small">Typ geen persoonsgegevens in deze omschrijving, dit wordt apart gevraagd</Paragraph>
+            <textarea id="description" />
+            <Paragraph size="small">8/1000 tekens</Paragraph>
+          </div>
+
+          <fieldset>
+            <legend>Foto's toevoegen (niet verplicht)</legend>
+            <Paragraph size="small">Voeg een foto toe om de situatie te verduidelijken</Paragraph>
+            <input
+              type="file"
+              id="fileUpload"
+              data-testid="file-input-upload"
+              accept="image/jpeg,image/jpg,image/png,image/gif"
+              name="images"
+              multiple
+              aria-label="Toevoegen foto"
+            />
+            <label htmlFor="fileUpload">Toevoegen foto</label>
+          </fieldset>
+          <FormNavigation firstPage />
+        </form>
+      </Grid.Cell>
+    </Grid>
+  )
+}
diff --git a/src/sites/signalen/pages/SignalenRootPage.tsx b/src/sites/signalen/pages/SignalenRootPage.tsx
new file mode 100644
index 0000000..41c0a01
--- /dev/null
+++ b/src/sites/signalen/pages/SignalenRootPage.tsx
@@ -0,0 +1,15 @@
+import { Screen } from '@amsterdam/design-system-react'
+import { Outlet } from 'react-router-dom'
+import { SiteFooter } from '../components/SiteFooter'
+import { SiteHeader } from '../components/SiteHeader'
+import '../components/signalen.css'
+
+export const SignalenRootPage = () => (
+  <Screen maxWidth="wide">
+    <SiteHeader />
+    <main id="main">
+      <Outlet />
+    </main>
+    <SiteFooter />
+  </Screen>
+)
diff --git a/src/sites/signalen/pages/Summary.tsx b/src/sites/signalen/pages/Summary.tsx
new file mode 100644
index 0000000..606e304
--- /dev/null
+++ b/src/sites/signalen/pages/Summary.tsx
@@ -0,0 +1,75 @@
+import { FormEvent } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Grid, Heading, Link, Paragraph } from '@amsterdam/design-system-react'
+import FormNavigation from '../components/FormNavigation'
+import { siteUrl } from '../constants'
+
+export const Summary = () => {
+  const navigate = useNavigate()
+
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+
+    navigate(`${siteUrl}bedankt`)
+  }
+
+  return (
+    <Grid paddingBottom="medium">
+      <Grid.Cell span={{ narrow: 4, medium: 6, wide: 7 }} start={{ narrow: 1, medium: 2, wide: 2 }}>
+        <form style={{ display: 'grid' }} className="amsterdam-gap-md" onSubmit={handleSubmit}>
+          <Heading>Doe een melding</Heading>
+
+          <Heading level={2}>Versturen</Heading>
+
+          <Paragraph>Controleer uw gegevens en verstuur uw melding.</Paragraph>
+
+          <section>
+            <header className="signalen-summary-heading">
+              <Heading level={2} size="level-4">
+                1. Beschrijf uw melding
+              </Heading>
+              <Link variant="standalone">Wijzig uw melding</Link>
+            </header>
+            <dl>
+              <dt>Waar gaat het over?</dt>
+              <dd>afval</dd>
+            </dl>
+          </section>
+
+          <section>
+            <header className="signalen-summary-heading">
+              <Heading level={2} size="level-4">
+                2. Locatie en vragen
+              </Heading>
+              <Link variant="standalone">Wijzig locatie en vragen</Link>
+            </header>
+            <dl>
+              <dt>Waar is het?</dt>
+              <dd>Sumatrakade 17, 1019BJ Amsterdam</dd>
+              <dt>Wanneer was het?</dt>
+              <dd>Nu</dd>
+            </dl>
+          </section>
+
+          <section>
+            <header className="signalen-summary-heading">
+              <Heading level={2} size="level-4">
+                3. Contactgegevens
+              </Heading>
+              <Link variant="standalone">Wijzig contactgegevens</Link>
+            </header>
+            <dl>
+              <dt>Melding delen</dt>
+              <dd>
+                Ja, ik geef de gemeente Amsterdam toestemming om mijn melding door te sturen naar andere organisaties
+                als de melding niet voor de gemeente is bestemd.
+              </dd>
+            </dl>
+          </section>
+
+          <FormNavigation backlinkUrl={`${siteUrl}contact`} lastPage />
+        </form>
+      </Grid.Cell>
+    </Grid>
+  )
+}
diff --git a/src/sites/signalen/pages/Thanks.tsx b/src/sites/signalen/pages/Thanks.tsx
new file mode 100644
index 0000000..0028aa4
--- /dev/null
+++ b/src/sites/signalen/pages/Thanks.tsx
@@ -0,0 +1,27 @@
+import { Grid, Heading, Paragraph } from '@amsterdam/design-system-react'
+import { Link } from '../../../shared/components/Link'
+import { siteUrl } from '../constants'
+
+export const Thanks = () => (
+  <Grid paddingBottom="medium">
+    <Grid.Cell span={{ narrow: 4, medium: 6, wide: 7 }} start={{ narrow: 1, medium: 2, wide: 2 }}>
+      <div style={{ display: 'grid' }} className="amsterdam-gap-md">
+        <Heading>Bedankt!</Heading>
+        <Paragraph>
+          Uw melding is bij ons bekend onder nummer: SIG-14022. Hebt u een e-mailadres ingevuld? Dan ontvangt u een
+          e-mail met alle gegevens van uw melding.
+        </Paragraph>
+
+        <Heading level={2}>Wat doen we met uw melding?</Heading>
+        <Paragraph>
+          U hoort binnen 3 werkdagen wat we met uw melding hebben gedaan. Dringende meldingen pakken wij zo snel
+          mogelijk op.
+        </Paragraph>
+
+        <Heading level={2}>Wilt u nog een andere melding doen?</Heading>
+
+        <Link to={`${siteUrl}beschrijf`}>Doe een melding</Link>
+      </div>
+    </Grid.Cell>
+  </Grid>
+)
diff --git a/src/sites/signalen/routes.tsx b/src/sites/signalen/routes.tsx
new file mode 100644
index 0000000..4780e59
--- /dev/null
+++ b/src/sites/signalen/routes.tsx
@@ -0,0 +1,36 @@
+import { ErrorPage } from '../../shared/pages/ErrorPage'
+import { siteUrl } from './constants.ts'
+import { Add } from './pages/Add.tsx'
+import { Contact } from './pages/Contact.tsx'
+import { Describe } from './pages/Describe.tsx'
+import { SignalenRootPage } from './pages/SignalenRootPage.tsx'
+import { Summary } from './pages/Summary.tsx'
+import { Thanks } from './pages/Thanks.tsx'
+
+export const routes = {
+  path: siteUrl,
+  element: <SignalenRootPage />,
+  errorElement: <ErrorPage />,
+  children: [
+    {
+      element: <Describe />,
+      path: `${siteUrl}beschrijf`,
+    },
+    {
+      element: <Add />,
+      path: `${siteUrl}vul-aan`,
+    },
+    {
+      element: <Contact />,
+      path: `${siteUrl}contact`,
+    },
+    {
+      element: <Summary />,
+      path: `${siteUrl}versturen`,
+    },
+    {
+      element: <Thanks />,
+      path: `${siteUrl}bedankt`,
+    },
+  ],
+}