fix: use standard checkbox for RSVP (#50)

The current checkbox design is unclear on whether it's selected or
deselected on the initial RSVP. Switching to regular checkboxes to make
it more clear.

Author: ben-basten

app/components/form/FormCheckbox.vue

@@ -4,6 +4,8 @@
       :id
       v-model="model"
       type="checkbox"
+      :name
+      :value
       class="size-5 rounded border-2 border-foreground accent-accent cursor-pointer"
     />
     <label :for="id" class="text-lg font-semibold cursor-pointer select-none">
@@ -13,10 +15,12 @@
 </template>
 
 <script setup lang="ts">
-const model = defineModel<boolean>();
+const model = defineModel<boolean | string[]>();
 const id = useId();
 
-const { label } = defineProps<{
+const { label, name, value } = defineProps<{
   label: string;
+  name?: string;
+  value?: string;
 }>();
 </script>

app/components/form/RsvpCheckbox.vue

@@ -10,25 +10,25 @@
     @secondary="rsvpStore.reset()"
   >
     <fieldset class="flex flex-col gap-y-4">
-      <RsvpCheckbox
+      <FormCheckbox
         v-if="rsvpStore.self"
         v-model="rsvpStore.attendingIds"
         :label="rsvpStore.self.displayName"
         :value="rsvpStore.self.id"
         name="attending"
       />
-      <RsvpCheckbox
+      <FormCheckbox
         v-for="guest in rsvpStore.guests"
         :key="guest.id"
         v-model="rsvpStore.attendingIds"
         :label="guest.displayName"
         :value="guest.id"
         name="attending"
       />
-      <p class="text-sm font-bold -mt-2 text-center">
-        {{ message }}
-      </p>
     </fieldset>
+    <p class="text-sm font-bold">
+      {{ message }}
+    </p>
     <FormInput
       v-if="rsvpStore.anonymousGuest"
       v-model="rsvpStore.plusOneName"