32 lines
2.4 KiB
TypeScript
32 lines
2.4 KiB
TypeScript
import type { InvitationResponse } from "@/lib/db/types"
|
|
import type { GuestDictionary } from "@/lib/i18n/dictionaries"
|
|
|
|
function dateValue(value: Date | string | null | undefined) {
|
|
return value instanceof Date ? value.toISOString().slice(0, 10) : value ?? ""
|
|
}
|
|
|
|
export function RsvpTravelFields({
|
|
response,
|
|
dictionary,
|
|
disabled,
|
|
}: {
|
|
response: InvitationResponse | null
|
|
dictionary: GuestDictionary
|
|
disabled: boolean
|
|
}) {
|
|
return (
|
|
<fieldset className="grid gap-6 border-b border-wedding-line py-10 wedding-layout:grid-cols-3" disabled={disabled}>
|
|
<legend className="sr-only">{dictionary.sections.travel}</legend>
|
|
<p className="wedding-section-label">02</p>
|
|
<div><h3 className="font-wedding-display text-wedding-medium">{dictionary.sections.travel}</h3></div>
|
|
<div className="grid gap-6 wedding-phone:grid-cols-2">
|
|
<label className="font-wedding-ui text-sm"><span>{dictionary.form.arrivalDate}</span><input type="date" name="arrivalDate" defaultValue={dateValue(response?.arrival_date)} className="mt-2 w-full border-b border-wedding-line bg-transparent p-3" /></label>
|
|
<label className="font-wedding-ui text-sm"><span>{dictionary.form.departureDate}</span><input type="date" name="departureDate" defaultValue={dateValue(response?.departure_date)} className="mt-2 w-full border-b border-wedding-line bg-transparent p-3" /></label>
|
|
<label className="font-wedding-ui text-sm wedding-phone:col-span-2"><span>{dictionary.form.stayLocation}</span><input name="stayLocation" defaultValue={response?.stay_location ?? ""} className="mt-2 w-full border-b border-wedding-line bg-transparent p-3" /></label>
|
|
<div className="wedding-phone:col-span-2"><p className="font-wedding-ui text-sm">{dictionary.form.needsTransportHelp}</p><div className="mt-3 flex gap-6 font-wedding-ui text-sm"><label><input type="radio" name="needsTransportHelp" value="yes" defaultChecked={response?.needs_transport_help === true} /> {dictionary.form.yes}</label><label><input type="radio" name="needsTransportHelp" value="no" defaultChecked={response?.needs_transport_help === false} /> {dictionary.form.no}</label></div></div>
|
|
<label className="font-wedding-ui text-sm wedding-phone:col-span-2"><span>{dictionary.form.messageToCouple}</span><textarea name="messageToCouple" defaultValue={response?.message_to_couple ?? ""} rows={4} className="mt-2 w-full border border-wedding-line bg-transparent p-3" /></label>
|
|
</div>
|
|
</fieldset>
|
|
)
|
|
}
|