33 lines
2.5 KiB
TypeScript
33 lines
2.5 KiB
TypeScript
import type { InvitationMember } from "@/lib/db/types"
|
|
import type { GuestDictionary } from "@/lib/i18n/dictionaries"
|
|
import type { MealPreference } from "@/lib/validation/response"
|
|
|
|
const mealOptions: MealPreference[] = ["meat", "fish", "vegetarian", "vegan", "kids", "other"]
|
|
|
|
export function RsvpGuestFields({
|
|
members,
|
|
dictionary,
|
|
disabled,
|
|
}: {
|
|
members: InvitationMember[]
|
|
dictionary: GuestDictionary
|
|
disabled: boolean
|
|
}) {
|
|
return (
|
|
<section className="border-t border-wedding-line pt-10">
|
|
{members.map((member, index) => (
|
|
<fieldset className="grid gap-6 border-b border-wedding-line py-10 wedding-layout:grid-cols-3" disabled={disabled} key={member.id}>
|
|
<legend className="sr-only">{member.name}</legend>
|
|
<p className="wedding-section-label">0{index + 1}</p>
|
|
<div><h3 className="font-wedding-display text-wedding-medium">{member.name}</h3><p className="mt-2 font-wedding-ui text-sm">{dictionary.form.attending}</p></div>
|
|
<div className="grid gap-6 wedding-phone:grid-cols-2">
|
|
<div className="flex gap-3"><label className="flex flex-1 cursor-pointer items-center justify-center border border-wedding-line p-3 font-wedding-display text-lg"><input className="sr-only" type="radio" name={`attending-${member.id}`} value="yes" defaultChecked={member.attending === true} required />{dictionary.form.yes}</label><label className="flex flex-1 cursor-pointer items-center justify-center border border-wedding-line p-3 font-wedding-display text-lg"><input className="sr-only" type="radio" name={`attending-${member.id}`} value="no" defaultChecked={member.attending === false} required />{dictionary.form.no}</label></div>
|
|
<label className="font-wedding-ui text-sm"><span>{dictionary.form.mealPreference}</span><select name={`meal-${member.id}`} defaultValue={member.meal_preference ?? ""} className="mt-2 w-full border border-wedding-line bg-wedding-ivory p-3"><option value="">{dictionary.form.mealPlaceholder}</option>{mealOptions.map((meal) => <option key={meal} value={meal}>{dictionary.meals[meal]}</option>)}</select></label>
|
|
<label className="font-wedding-ui text-sm wedding-phone:col-span-2"><span>{dictionary.form.dietaryRestrictions}</span><input name={`dietary-${member.id}`} defaultValue={member.dietary_restrictions ?? ""} placeholder={dictionary.form.noRestrictions} className="mt-2 w-full border-b border-wedding-line bg-transparent p-3" /></label>
|
|
</div>
|
|
</fieldset>
|
|
))}
|
|
</section>
|
|
)
|
|
}
|