wip

delta10 · Oct 29, 2024 · 1f35a9c · 1f35a9c
1 parent a0305b6
commit 1f35a9c
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 13 deletions.
diff --git a/src/app/[locale]/incident/add/page.tsx b/src/app/[locale]/incident/add/page.tsx
@@ -1,14 +1,20 @@
 import { NextIntlClientProvider, useMessages, useTranslations } from 'next-intl'
 import { IncidentQuestionsLocationForm } from '@/app/[locale]/incident/add/components/IncidentQuestionsLocationForm'
-import { Heading } from '@/components/index'
+import { Heading, HeadingGroup, PreHeading } from '@/components/index'
 
 export default function AddAditionalInformationPage() {
   const t = useTranslations('describe-add')
+  const tGeneral = useTranslations('general.describe_form')
   const messages = useMessages()
 
   return (
     <div className="flex flex-col gap-4">
-      <Heading level={1}>{t('heading')}</Heading>
+      <HeadingGroup>
+        <Heading level={1}>{t('heading')}</Heading>
+        <PreHeading>
+          {tGeneral('pre-heading', { current: 2, max: 4 })}
+        </PreHeading>
+      </HeadingGroup>
       <NextIntlClientProvider messages={messages}>
         <IncidentQuestionsLocationForm />
       </NextIntlClientProvider>

diff --git a/src/app/[locale]/incident/contact/page.tsx b/src/app/[locale]/incident/contact/page.tsx
@@ -1,14 +1,20 @@
 import { NextIntlClientProvider, useMessages, useTranslations } from 'next-intl'
 import { IncidentContactForm } from '@/app/[locale]/incident/contact/components/IncidentContactForm'
-import { Heading } from '@/components/index'
+import { Heading, HeadingGroup, PreHeading } from '@/components/index'
 
 export default function AddContactDetailsPage() {
   const t = useTranslations('describe-contact')
+  const tGeneral = useTranslations('general.describe_form')
   const messages = useMessages()
 
   return (
     <div className="flex flex-col gap-4">
-      <Heading level={1}>{t('heading')}</Heading>
+      <HeadingGroup>
+        <Heading level={1}>{t('heading')}</Heading>
+        <PreHeading>
+          {tGeneral('pre-heading', { current: 3, max: 4 })}
+        </PreHeading>
+      </HeadingGroup>
       <NextIntlClientProvider messages={messages}>
         <IncidentContactForm />
       </NextIntlClientProvider>

diff --git a/src/app/[locale]/incident/page.tsx b/src/app/[locale]/incident/page.tsx
@@ -1,21 +1,43 @@
 import { NextIntlClientProvider, useMessages, useTranslations } from 'next-intl'
 import { IncidentDescriptionForm } from '@/app/[locale]/incident/components/IncidentDescriptionForm'
-import { Alert, Link } from '@utrecht/component-library-react/dist/css-module'
+import { Alert, HeadingGroup, PreHeading, Link } from '@/components/index'
 
 import { Paragraph, Heading } from '@/components/index'
+// import { Metadata, ResolvingMetadata } from 'next/types'
+
+// type Props = {
+//   params: Promise<object>
+//   searchParams: Promise<{ [key: string]: string | string[] | undefined }>
+// }
+
+// export async function generateMetadata(
+//   { params, searchParams }: Props,
+//   parent: ResolvingMetadata
+// ): Promise<Metadata> {
+//   const t = useTranslations('describe-report')
+//   return {
+//     title: [t('heading'), 'Gemeente Purmerend'].join(' · '),
+//   }
+// }
 
 export default async function Home() {
   return <IncidentDescriptionPage />
 }
 
 function IncidentDescriptionPage() {
   const t = useTranslations('describe-report')
+  const tGeneral = useTranslations('general.describe_form')
   const messages = useMessages()
 
   return (
     <>
       <div className="flex flex-col gap-4">
-        <Heading level={1}>{t('heading')}</Heading>
+        <HeadingGroup>
+          <Heading level={1}>{t('heading')}</Heading>
+          <PreHeading>
+            {tGeneral('pre-heading', { current: 1, max: 4 })}
+          </PreHeading>
+        </HeadingGroup>
         <Alert>
           <Paragraph>
             Lukt het niet om een melding te doen? Bel het telefoonnummer

diff --git a/src/app/[locale]/incident/summary/components/IncidentSummaryForm.tsx b/src/app/[locale]/incident/summary/components/IncidentSummaryForm.tsx
@@ -81,11 +81,11 @@ const IncidentSummaryForm = () => {
 
   return (
     <div className="flex flex-col gap-8">
-      <Paragraph>{t('description')}</Paragraph>
+      <Paragraph appearance="lead">{t('description')}</Paragraph>
       <Divider />
       <div className="flex flex-col gap-4">
         <div className="flex flex-col gap-1 md:flex-row justify-between">
-          <Heading level={3}>{t('steps.step_one.title')}</Heading>
+          <Heading level={2}>{t('steps.step_one.title')}</Heading>
           <LinkWrapper href={'/incident'} onClick={() => goToStep(1)}>
             {t('steps.step_one.edit')}
           </LinkWrapper>
@@ -104,7 +104,7 @@ const IncidentSummaryForm = () => {
       <Divider />
       <div className="flex flex-col gap-4">
         <div className="flex flex-col gap-1 md:flex-row justify-between">
-          <Heading level={3}>{t('steps.step_two.title')}</Heading>
+          <Heading level={2}>{t('steps.step_two.title')}</Heading>
           <LinkWrapper href={'/incident/add'} onClick={() => goToStep(2)}>
             {t('steps.step_two.edit')}
           </LinkWrapper>
@@ -116,7 +116,7 @@ const IncidentSummaryForm = () => {
       <Divider />
       <div className="flex flex-col gap-4">
         <div className="flex flex-col gap-1 md:flex-row justify-between">
-          <Heading level={3}>{t('steps.step_three.title')}</Heading>
+          <Heading level={2}>{t('steps.step_three.title')}</Heading>
           <LinkWrapper href={'/incident/contact'} onClick={() => goToStep(3)}>
             {t('steps.step_three.edit')}
           </LinkWrapper>
@@ -164,7 +164,7 @@ export const IncidentSummaryFormItem = ({
 }) => {
   return (
     <div className="flex flex-col gap-1">
-      <Paragraph className="font-semibold">{title}</Paragraph>
+      <Heading level={3}>{title}</Heading>
       {value !== '' ? (
         <Paragraph>{value}</Paragraph>
       ) : (

diff --git a/src/app/[locale]/incident/summary/page.tsx b/src/app/[locale]/incident/summary/page.tsx
@@ -1,14 +1,20 @@
 import { NextIntlClientProvider, useMessages, useTranslations } from 'next-intl'
 import { IncidentSummaryForm } from '@/app/[locale]/incident/summary/components/IncidentSummaryForm'
-import { Heading } from '@/components/index'
+import { HeadingGroup, Heading, PreHeading } from '@/components/index'
 
 export default function SummaryDetailsPage() {
   const t = useTranslations('describe-summary')
+  const tGeneral = useTranslations('general.describe_form')
   const messages = useMessages()
 
   return (
     <div className="flex flex-col gap-4">
-      <Heading level={1}>{t('heading')}</Heading>
+      <HeadingGroup>
+        <Heading level={1}>{t('heading')}</Heading>
+        <PreHeading>
+          {tGeneral('pre-heading', { current: 4, max: 4 })}
+        </PreHeading>
+      </HeadingGroup>
       <NextIntlClientProvider messages={messages}>
         <IncidentSummaryForm />
       </NextIntlClientProvider>