From prompt to production.

import { Form, useLoaderData } from "react-router";
import { Button } from "@/components/ui/button";
import { db } from "@/lib/db";

export async function loader() {
  const waitlist = await db.query(
    "SELECT COUNT(*) as count FROM signups"
  );
  return { count: waitlist[0].count };
}

export async function action({ request }) {
  const form = await request.formData();
  const email = form.get("email");
  await db.execute(
    "INSERT INTO signups (email) VALUES (?)", [email]
  );
  return { ok: true };
}

export default function Home() {
  const { count } = useLoaderData<typeof loader>();
  return (
    <div className="flex min-h-screen flex-col items-center justify-center">
      <h1 className="text-4xl font-bold">
        Join {count.toLocaleString()} others
      </h1>
      <Form method="post" className="mt-6 flex gap-2">
        <input name="email" type="email" />
        <Button type="submit">Join the waitlist</Button>
      </Form>
    </div>
  );
}