switched to approuter

components/SubscribeForm.tsx

@@ -0,0 +1,77 @@
+"use client"
+
+import React, { useState } from 'react';
+
+interface SubscribeFormProps {
+  placeholder?: string;
+  buttonLabel?: string;
+  className?: string;
+}
+
+const SubscribeForm: React.FC<SubscribeFormProps> = ({
+  placeholder = 'Your email',
+  buttonLabel = 'Subscribe',
+  className = '',
+}) => {
+  const [email, setEmail] = useState('');
+  const [message, setMessage] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSubscribe = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!email) {
+      setMessage('Please enter your email.');
+      return;
+    }
+
+    setLoading(true);
+    setMessage('');
+
+    try {
+      const response = await fetch('/api/subscribe', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ email }),
+      });
+
+      if (response.ok) {
+        setMessage('You have successfully subscribed!');
+        setEmail('');
+      } else {
+        const errorData = await response.json();
+        setMessage(`Error: ${errorData.message}`);
+      }
+    } catch (error) {
+      setMessage('Something went wrong. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubscribe} className={`space-y-3 ${className}`}>
+      <div>
+        <input
+          type="email"
+          placeholder={placeholder}
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          className="w-full px-3 py-2 border border-primary-300 rounded-md focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent"
+        />
+      </div>
+      <button
+        type="submit"
+        className="button w-full"
+        disabled={loading}
+      >
+        {loading ? 'Subscribing...' : buttonLabel}
+      </button>
+      {message && <p className="text-sm text-primary-700">{message}</p>}
+    </form>
+  );
+};
+
+export default SubscribeForm;