···22import { ClerkProvider } from "@clerk/nextjs";
33import { Inter } from "next/font/google";
44import LocalFont from "next/font/local";
55-65import PlausibleProvider from "next-plausible";
77-import Background from "./components/background";
66+import Background from "./_components/background";
77+import { Toaster } from "@/components/ui/toaster";
8899const inter = Inter({ subsets: ["latin"] });
1010
+21-3
apps/web/src/app/page.tsx
···11+"use client";
22+13import { Badge } from "@/components/ui/badge";
24import { Input } from "@/components/ui/input";
33-import { waitlist } from "./action";
44-import { SubmitButton } from "./components/submit-button";
55+import { addToWaitlist } from "./action";
66+import { SubmitButton } from "./_components/submit-button";
77+import { toast } from "@/components/ui/use-toast";
5869export default function Page() {
710 return (
···1619 <p className="text-muted-foreground mb-4">
1720 Your Open Source Status Page.
1821 </p>
1919- <form action={waitlist} className="flex gap-1.5">
2222+ <form
2323+ action={async (data) => {
2424+ try {
2525+ const number = await addToWaitlist(data);
2626+ const formattedNumber = Intl.NumberFormat().format(number);
2727+ toast({
2828+ description: `Thank you, you're number ${formattedNumber} on the list.`,
2929+ });
3030+ } catch (e) {
3131+ toast({
3232+ description: "Something went wrong",
3333+ });
3434+ }
3535+ }}
3636+ className="flex gap-1.5"
3737+ >
2038 <Input
2139 id="email"
2240 name="email"