95 lines
3.4 KiB
TypeScript
95 lines
3.4 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
|
|
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 RsvpGuestResponse({
|
|
member,
|
|
index,
|
|
dictionary,
|
|
disabled,
|
|
}: {
|
|
member: InvitationMember
|
|
index: number
|
|
dictionary: GuestDictionary
|
|
disabled: boolean
|
|
}) {
|
|
const [attending, setAttending] = useState(member.attending)
|
|
|
|
return (
|
|
<fieldset
|
|
className="grid gap-6 border-b border-wedding-line py-10 disabled:opacity-60 max-w-3xl mx-auto"
|
|
disabled={disabled}
|
|
>
|
|
<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 id={`attendance-label-${member.id}`} className="mt-2 font-wedding-ui text-sm">
|
|
{dictionary.form.attending}
|
|
</p>
|
|
</div>
|
|
<div className="grid gap-6 wedding-md:grid-cols-2">
|
|
<div
|
|
role="radiogroup"
|
|
aria-labelledby={`attendance-label-${member.id}`}
|
|
className="flex flex-wrap gap-3"
|
|
>
|
|
{[true, false].map((value) => (
|
|
<label
|
|
key={String(value)}
|
|
className={`flex flex-1 items-center justify-center gap-2 border p-3 font-wedding-display text-lg focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-wedding-terracotta ${
|
|
disabled ? "cursor-not-allowed" : "cursor-pointer"
|
|
} ${
|
|
attending === value
|
|
? "border-wedding-terracotta bg-wedding-cream"
|
|
: "border-wedding-line"
|
|
}`}
|
|
>
|
|
<input
|
|
className="size-4 shrink-0 accent-wedding-terracotta"
|
|
type="radio"
|
|
name={`attending-${member.id}`}
|
|
value={value ? "yes" : "no"}
|
|
checked={attending === value}
|
|
onChange={() => setAttending(value)}
|
|
required
|
|
/>
|
|
{value ? dictionary.form.yes : dictionary.form.no}
|
|
</label>
|
|
))}
|
|
</div>
|
|
<label className="font-wedding-ui text-sm">
|
|
<span>{dictionary.form.mealPreference}{attending === true ? " *" : ""}</span>
|
|
<select
|
|
name={`meal-${member.id}`}
|
|
defaultValue={member.meal_preference ?? ""}
|
|
required={attending === true}
|
|
disabled={attending === false}
|
|
className="mt-2 w-full border border-wedding-line bg-wedding-ivory p-3 disabled:opacity-50"
|
|
>
|
|
<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-md: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>
|
|
)
|
|
}
|