fix: not working form and selections

2026-09-12 22:55:37 +02:00
parent 301b801ebb
commit b78d1ee094
7 changed files with 108 additions and 19 deletions
@@ -0,0 +1,94 @@
+"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>
+  )
+}