feat: add newsletter subscription form with loading and error states in Footer component

src/components/Footer.tsx

@@ -1,5 +1,8 @@
+'use client'
+
 import Image from 'next/image'
 import Link from 'next/link'
+import { useState } from 'react'
 
 import { Button } from '@/components/Button'
 import { Container } from '@/components/Container'
@@ -9,6 +12,39 @@ import github from '@/images/github.svg'
 import logomark from '@/images/logomark.svg'
 
 export function Footer() {
+  const [email, setEmail] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [message, setMessage] = useState('');
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setLoading(true);
+    setMessage('');
+
+    try {
+      const response = await fetch('/api/subscribe', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ email }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || 'Something went wrong');
+      }
+
+      setMessage('Thanks for subscribing!');
+      setEmail('');
+    } catch (error: any) {
+      setMessage(error.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
   return (
     <footer className="border-t border-gray-200">
       <Container>
@@ -43,20 +79,24 @@ export function Footer() {
           </div>
         </div>
         <div className="flex flex-col items-center border-t border-gray-200 pt-8 pb-12 md:flex-row-reverse md:justify-between md:pt-6">
-          <form className="flex w-full justify-center md:w-auto">
-            <TextField
-              type="email"
-              aria-label="Email address"
-              placeholder="Email address"
-              autoComplete="email"
-              required
-              className="w-60 min-w-0 shrink"
-            />
-            <Button type="submit" color="cyan" className="ml-4 flex-none">
-              <span className="hidden lg:inline">Join our newsletter</span>
-              <span className="lg:hidden">Join newsletter</span>
-            </Button>
-          </form>
+          <div>
+            <form className="flex w-full justify-center md:w-auto" onSubmit={handleSubmit}>
+              <TextField
+                type="email"
+                aria-label="Email address"
+                placeholder="Email address"
+                autoComplete="email"
+                required
+                className="w-60 min-w-0 shrink"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+              />
+              <Button type="submit" color="cyan" className="ml-4 flex-none" disabled={loading}>
+                {loading ? 'Joining...' : <><span className="hidden lg:inline">Join our newsletter</span><span className="lg:hidden">Join newsletter</span></>}
+              </Button>
+            </form>
+            {message && <p className="mt-2 text-sm text-gray-600">{message}</p>}
+          </div>
           <p className="mt-6 text-sm text-gray-500 md:mt-0">
             &copy; Copyright{' '}
             <a href="https://www.threefold.io" target="_blank" rel="noopener noreferrer" className="hover:text-cyan-500 transition-colors">