Try

astro.config.ts

@@ -1,4 +1,5 @@
 import db from "@astrojs/db";
+import react from "@astrojs/react";
 import sitemap from "@astrojs/sitemap";
 import tailwind from "@astrojs/tailwind";
 import vercel from "@astrojs/vercel/serverless";
@@ -8,6 +9,7 @@ const config = defineConfig({
   site: "https://go.czw.sh",
   integrations: [
     db(),
+    react(),
     sitemap(),
     tailwind({
       applyBaseStyles: false,

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@astrojs/check": "^0.5.10",
     "@astrojs/db": "^0.10.3",
+    "@astrojs/react": "^3.3.0",
     "@astrojs/sitemap": "^3.1.2",
     "@astrojs/tailwind": "^5.1.0",
     "@astrojs/vercel": "^7.5.2",

src/components/react/link-form.tsx

@@ -0,0 +1,40 @@
+import { useState, type FormEvent } from "react";
+
+const LinkForm = () => {
+  const [message, setMessage] = useState("");
+
+  async function submit(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+
+    const formData = new FormData(e.target as HTMLFormElement);
+    const response = await fetch("/api/create", {
+      method: "POST",
+      body: formData,
+    });
+    const data = await response.json();
+
+    if (data.message) {
+      setMessage(data.message);
+    }
+  }
+
+  return (
+    <form
+      className="flex flex-col"
+      onSubmit={submit}
+    >
+      <label>
+        Original
+        <input
+          type="url"
+          name="original"
+          className="bg-purple-100"
+        />
+      </label>
+      <button>Send</button>
+      {message.length > 0 ? <p>{message}</p> : null}
+    </form>
+  );
+};
+
+export { LinkForm };

src/pages/api/create.ts

@@ -0,0 +1,12 @@
+import type { APIRoute } from "astro";
+
+export const POST: APIRoute = async ({ request }) => {
+  const formData = await request.formData();
+  const original = formData.get("original");
+
+  if (!original) {
+    return new Response(JSON.stringify({ message: "Missing original URL" }), { status: 400 });
+  }
+
+  return new Response(JSON.stringify({ message: "success!" }), { status: 200 });
+};

src/pages/index.astro

@@ -1,6 +1,7 @@
 ---
 import { db, Link } from "astro:db";
 
+import { LinkForm } from "@/components/react/link-form";
 import Layout from "@/layouts/layout.astro";
 
 const links = await db.select().from(Link);
@@ -11,26 +12,6 @@ const links = await db.select().from(Link);
   description="Hello world"
 >
   <main class="flex min-h-screen flex-col items-center justify-center space-y-12">
-    <form>
-      <label>
-        Original
-        <input
-          type="url"
-          name="original"
-          class="bg-purple-100"
-        />
-      </label>
-
-      <label>
-        Include numbers
-        <input
-          type="checkbox"
-          name="numbers"
-          checked
-        />
-      </label>
-    </form>
-
     <section>
       <h2 class="font-bold">Recent links:</h2>
       <ul>
@@ -47,5 +28,7 @@ const links = await db.select().from(Link);
         }
       </ul>
     </section>
+
+    <LinkForm client:load />
   </main>
 </Layout>