37 lines
2.1 KiB
TypeScript
37 lines
2.1 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
|
|
import type { InvitationMember, ToastRequest } from "@/lib/db/types"
|
|
import type { GuestDictionary } from "@/lib/i18n/dictionaries"
|
|
|
|
export function RsvpToastFields({
|
|
members,
|
|
toastRequest,
|
|
dictionary,
|
|
disabled,
|
|
}: {
|
|
members: InvitationMember[]
|
|
toastRequest: ToastRequest | undefined
|
|
dictionary: GuestDictionary
|
|
disabled: boolean
|
|
}) {
|
|
const [enabled, setEnabled] = useState(Boolean(toastRequest))
|
|
|
|
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.interactions.toastTitle}</legend>
|
|
<p className="wedding-section-label">03</p>
|
|
<div><h3 className="font-wedding-display text-wedding-medium">{dictionary.interactions.toastTitle}</h3><p className="mt-2 font-wedding-ui text-sm leading-wedding-body">{dictionary.interactions.toastDescription}</p></div>
|
|
<div>
|
|
<label className="flex items-center gap-3 font-wedding-ui text-sm"><input type="checkbox" name="wantsToast" checked={enabled} onChange={(event) => setEnabled(event.target.checked)} />{dictionary.interactions.wantsToast}</label>
|
|
<div className="mt-6 grid gap-6 wedding-phone:grid-cols-2">
|
|
<label className="font-wedding-ui text-sm"><span>{dictionary.interactions.speakerName}</span><input name="toastSpeakerName" disabled={!enabled} defaultValue={toastRequest?.speaker_name ?? ""} className="mt-2 w-full border-b border-wedding-line bg-transparent p-3 disabled:opacity-50" /></label>
|
|
<label className="font-wedding-ui text-sm"><span>{dictionary.interactions.estimatedMinutes}</span><input name="toastEstimatedMinutes" type="number" min="1" disabled={!enabled} defaultValue={toastRequest?.estimated_minutes ?? ""} className="mt-2 w-full border-b border-wedding-line bg-transparent p-3 disabled:opacity-50" /></label>
|
|
</div>
|
|
<select name="toastMemberId" defaultValue={toastRequest?.member_id ?? ""} className="sr-only"><option value="" />{members.map((member) => <option key={member.id} value={member.id}>{member.name}</option>)}</select>
|
|
</div>
|
|
</fieldset>
|
|
)
|
|
}
|