Move listmonk form into separate module and add captcha

src/app/club/mailinglist.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+export default function MailingListSignupForm(): React.JSX.Element {
+    return (<form method="post" action="https://lists.orcas.community/subscription/form" className="listmonk-form">
+        <div className="flex flex-col gap-y-2">
+            <h3 className="text-lg font-semibold text-gray-900">Join our mailing list</h3>
+            <input type="hidden" name="nonce" />
+            <div>
+                <label htmlFor="email" className="sr-only">Email</label>
+                <input
+                    type="email"
+                    name="email"
+                    id="email"
+                    className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                    placeholder="you@example.com" />
+            </div>
+            <div>
+                <label htmlFor="name" className="sr-only">Name</label>
+                <input
+                    type="text"
+                    name="name"
+                    id="name"
+                    className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                    placeholder="Jane Doe" />
+            </div>
+            <input className="hidden" type="checkbox" name="l" checked value="ea5f1e67-2ff0-4762-8893-0645e93a8306" />
+            <div className="h-captcha flex justify-center" data-sitekey="77aeddb4-cfda-4a3e-b262-0288a4e4664a"></div>
+            <script src="https://js.hcaptcha.com/1/api.js" async defer></script>
+            <input
+                className="w-full rounded-md flex justify-center border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                id="submit"
+                type="submit"
+                value="Subscribe"
+            />
+        </div>
+    </form>);
+}

src/app/club/page.tsx

@@ -52,6 +52,13 @@ export default function Club() {
     { ssr: false }
   );
 
+  const MailingListSignupForm = dynamic(
+    () => {
+      return import("./mailinglist");
+    },
+    { ssr: false }
+  );
+
   return (
     <Container className="mt-16 sm:mt-32">
       <div className="grid grid-cols-1 gap-y-16 lg:grid-cols-2 lg:grid-rows-[auto_1fr] lg:gap-y-12">
@@ -94,37 +101,7 @@ export default function Club() {
         </div>
         <div className="lg:pl-20">
           <ul role="list">
-            <form method="post" action="https://lists.orcas.community/subscription/form" className="listmonk-form">
-              <div className="flex flex-col gap-y-2">
-                <h3 className="text-lg font-semibold text-gray-900">Join our mailing list</h3>
-                <input type="hidden" name="nonce" />
-                <div>
-                  <label htmlFor="email" className="sr-only">Email</label>
-                  <input
-                    type="email"
-                    name="email"
-                    id="email"
-                    className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                    placeholder="you@example.com" />
-                </div>
-                <div>
-                  <label htmlFor="name" className="sr-only">Name</label>
-                  <input
-                    type="text"
-                    name="name"
-                    id="name"
-                    className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                    placeholder="Jane Doe" />
-                </div>
-                <input className="hidden" type="checkbox" name="l" checked value="ea5f1e67-2ff0-4762-8893-0645e93a8306" />
-                <input
-                  className="w-full rounded-md flex justify-center border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                  id="submit"
-                  type="submit"
-                  value="Subscribe"
-                />
-              </div>
-            </form>
+            <MailingListSignupForm />
             <SocialLink
               href="mailto:contact@westsoundhall.org"
               icon={EnvelopeIcon}