From 3ff6f60638f0e535eecb259846ea9e405effcc82 Mon Sep 17 00:00:00 2001
From: Nikhil M Warrier <nikhilmw.dev@gmail.com>
Date: Sun, 15 Mar 2026 12:41:11 +0530
Subject: Add `select`, `radio`, `checkbox` to forms

---
 src/pages/forms/[...id].astro | 53 +++++++++++++++++--------------------------
 1 file changed, 21 insertions(+), 32 deletions(-)

(limited to 'src/pages/forms')

diff --git a/src/pages/forms/[...id].astro b/src/pages/forms/[...id].astro
index 713e599..d26c51d 100644
--- a/src/pages/forms/[...id].astro
+++ b/src/pages/forms/[...id].astro
@@ -1,7 +1,10 @@
 ---
+import FormField from '@/components/FormField.astro'
 import { FORM_POST_URL } from '@/consts'
 import Layout from '@/layouts/Layout.astro'
 import { getAllForms } from '@/lib/data-utils'
+import { formatDate } from '@/lib/utils'
+import { render } from 'astro:content'
 
 export async function getStaticPaths() {
   const forms = await getAllForms()
@@ -11,50 +14,36 @@ export async function getStaticPaths() {
   }))
 }
 
+const { Content } = await render(Astro.props)
 const form = Astro.props.data
 const fields = Astro.props.data.form.fields
 ---
 
 <Layout>
   <section
-    class="border-border mx-auto flex w-full max-w-3xl flex-col items-center gap-y-6 rounded-xl border p-8"
+    class="border-border mx-auto flex w-full max-w-3xl flex-col items-center gap-y-2 rounded-xl border p-8"
   >
+    <h1
+      class="mb-2 w-full scroll-mt-31 text-center text-3xl leading-tight font-medium sm:text-4xl"
+    >
+      {form.title}
+    </h1>
+    <div
+      class="text-muted-foreground mb-4 mb-6 flex w-fit py-2 text-xs sm:px-2 sm:py-0 sm:text-sm"
+    >
+      <span>{formatDate(form.date)}</span>
+    </div>
+
+    <article class="prose w-full">
+      <Content />
+    </article>
+
     <form
       action={`${FORM_POST_URL}${form.id}`}
       method="POST"
       class="flex w-full flex-col items-start gap-12"
     >
-      <h1 class="w-full text-center text-3xl">
-        {form.title}
-      </h1>
-
-      {
-        fields.map((field) => (
-          <div class="flex w-full flex-col gap-2">
-            <label for={field.id} class="text-muted-foreground pl-1">
-              {field.label}
-            </label>
-
-            {field.type === 'textarea' ? (
-              <textarea
-                id={field.id}
-                name={field.id}
-                required={field.required}
-                rows="4"
-                class="border-border rounded-xl border px-4 py-2"
-              />
-            ) : (
-              <input
-                type={field.type || 'text'}
-                id={field.id}
-                name={field.id}
-                required={field.required}
-                class="border-border rounded-xl border px-4 py-2"
-              />
-            )}
-          </div>
-        ))
-      }
+      {fields.map((field) => <FormField field={field} />)}
 
       <div class="flex w-full justify-end">
         <button
-- 
cgit v1.2.3