dynamic subscribe form

widefix · Dec 12, 2023 · fe8dbe7 · fe8dbe7
1 parent 7460f3d
commit fe8dbe7
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 31 deletions.
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -1,7 +1,11 @@
 import Image from 'next/image';
 import logoImg from '/public/logo.svg';
 import Link from 'next/link';
-import Subscribe from './Subscribe';
+import dynamic from 'next/dynamic';
+
+const DynamicSubscribe = dynamic(() => import('./Subscribe'), {
+  ssr: false,
+});
 
 export default function Footer() {
   return (
@@ -41,9 +45,7 @@ export default function Footer() {
             </dd>
           </dl>
         </div>
-        <div>
-          <Subscribe />
-        </div>
+        <DynamicSubscribe />
       </div>
       <div className={'h-px bg-[#DBD2E3] my-16'}></div>
       <div className="lg:flex">

diff --git a/components/Subscribe.tsx b/components/Subscribe.tsx
@@ -21,33 +21,37 @@ export default function Subscribe() {
   const inputRef = useRef<HTMLInputElement>(null);
 
   return (
-    <dl className={'mt-4 lg:mt-0'}>
-      <dt>Subscribe</dt>
-      <dd>
-        <p className={'font-light text-text-primary-light mb-[20px]'}>
-          Subscribe to stay up to date with all the latest news related to
-          BudgetingKid and financial literacy.
-        </p>
-        <div className={'flex gap-2 items-center'}>
-          <input
-            className={'w-full border border-[#E7E7E7] rounded-[6px] py-3 px-4'}
-            type="email"
-            placeholder={'Your email'}
-            ref={inputRef}
-          />
-          <Button
-            onClick={() => {
-              const email = inputRef?.current?.value;
-              if (email) {
-                callSubscribe(email);
-                inputRef.current.value = '';
+    <div>
+      <dl className={'mt-4 lg:mt-0'}>
+        <dt>Subscribe</dt>
+        <dd>
+          <p className={'font-light text-text-primary-light mb-[20px]'}>
+            Subscribe to stay up to date with all the latest news related to
+            BudgetingKid and financial literacy.
+          </p>
+          <div className={'flex gap-2 items-center'}>
+            <input
+              className={
+                'w-full border border-[#E7E7E7] rounded-[6px] py-3 px-4'
               }
-            }}
-          >
-            Subscribe
-          </Button>
-        </div>
-      </dd>
-    </dl>
+              type="email"
+              placeholder={'Your email'}
+              ref={inputRef}
+            />
+            <Button
+              onClick={() => {
+                const email = inputRef?.current?.value;
+                if (email) {
+                  callSubscribe(email);
+                  inputRef.current.value = '';
+                }
+              }}
+            >
+              Subscribe
+            </Button>
+          </div>
+        </dd>
+      </dl>
+    </div>
   );
 }