public-ui-kolibri

import React from 'react'; import { useFormContext, useWatch } from 'react-hook-form'; import { KolHeading } from '@public-ui/react-v19'; import type { FormValues } from './AppointmentForm'; const ValueFallback = () => <i>Nicht angegeben</i>; const ValueWithFallback = ({ value }: { value: string }) => (value ? value : <ValueFallback />); export function Summary() { const { control } = useFormContext<FormValues>(); const values = useWatch({ control }); return ( <> <KolHeading _level={2} _label="Zusammenfassung"></KolHeading> <dl> <dt>District</dt> <dd> <ValueWithFallback value={values?.district ?? ''} /> </dd> <dt>Appointment</dt> <dd>{values?.date && values?.time ? `${values.date} ${values.time} Uhr` : <ValueFallback />}</dd> {values?.salutation === 'Company' ? ( <> <dt>Company</dt> <dd> <ValueWithFallback value={values?.company ?? ''} /> </dd> </> ) : ( <> <dt>Salutation</dt> <dd> <ValueWithFallback value={values?.salutation ?? ''} /> </dd> </> )} <dt>Name</dt> <dd> <ValueWithFallback value={values?.name ?? ''} /> </dd> <dt>E-Mail</dt> <dd> <ValueWithFallback value={values?.email ?? ''} /> </dd> <dt>Phone number</dt> <dd> <ValueWithFallback value={values?.phone ?? ''} /> </dd> </dl> </> ); }