raul/wedding-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: not working form and selections

Browse Source
This commit is contained in:
Raul Lugo
2026-09-12 22:55:37 +02:00
parent 301b801ebb
commit b78d1ee094
7 changed files with 108 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/invite/rsvp-guest-fields.tsx
+8 -13
View File
@@ -1,8 +1,6 @@
import { RsvpGuestResponse } from "@/components/invite/rsvp-guest-response"
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,
@@ -16,16 +14,13 @@ export function RsvpGuestFields({
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-lg: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-md: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-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>
<RsvpGuestResponse
key={member.id}
member={member}
index={index}
dictionary={dictionary}
disabled={disabled}
/>
))}
</section>
)