Add `select`, `radio`, `checkbox` to forms

1 files changed, 76 insertions, 0 deletions

diff --git a/src/components/FormField.astro b/src/components/FormField.astro
new file mode 100644
index 0000000..f03403d
--- /dev/null
+++ b/src/components/FormField.astro
@@ -0,0 +1,76 @@
+---
+import type { CollectionEntry } from 'astro:content'
+
+interface Props {
+  field: CollectionEntry<'forms'>['data']['form']['fields'][number]
+}
+
+const field = Astro.props.field
+const fieldType = field.type as astroHTML.JSX.HTMLInputTypeAttribute
+---
+
+<div class="flex w-full flex-col gap-2">
+  <label for={field.id} class="text-muted-foreground pl-1">
+    {field.label}
+  </label>
+
+  {
+    () => {
+      switch (field.type) {
+        case 'textarea':
+          return (
+            <textarea
+              id={field.id}
+              name={field.id}
+              required={field.required}
+              rows="4"
+              class="border-border rounded-xl border px-4 py-2"
+            />
+          )
+
+        case 'select':
+          return (
+            <select
+              id={field.id}
+              name={field.id}
+              required={field.required}
+              class="border-border rounded-xl border px-4 py-2"
+            >
+              {field.options?.map((opt) => (
+                <option value={opt}>{opt}</option>
+              ))}
+            </select>
+          )
+
+        case 'radio':
+        case 'checkbox':
+          return (
+            <div class="flex flex-col gap-4 pl-1">
+              {field.options?.map((opt, index) => (
+                <label class="cursor-pointer">
+                  <input
+                    type={fieldType}
+                    name={field.id}
+                    value={opt}
+                    required={field.required && index === 0}
+                    class="mr-2"
+                  />
+                  {opt}
+                </label>
+              ))}
+            </div>
+          )
+        default:
+          return (
+            <input
+              type={fieldType || 'text'}
+              id={field.id}
+              name={field.id}
+              required={field.required}
+              class="border-border rounded-xl border px-4 py-2"
+            />
+          )
+      }
+    }
+  }
+</div>