notification + admin panel

app/components/Signup.tsx

@@ -5,34 +5,139 @@ import { useState } from 'react'
 export default function Signup() {
   const [email, setEmail] = useState('')
   const [whatsapp, setWhatsapp] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [showPopup, setShowPopup] = useState(false)
+  const [error, setError] = useState('')
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
-    // Handle form submission
-    console.log('Form submitted', { email, whatsapp })
+    setError('')
+    
+    // Validate that at least one field is filled
+    if (!email.trim() && !whatsapp.trim()) {
+      setError('Please enter at least an email or phone number')
+      return
+    }
+
+    setLoading(true)
+
+    try {
+      const response = await fetch('/api/notifications/subscribe', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          email: email.trim(),
+          phone: whatsapp.trim(),
+        }),
+      })
+
+      const data = await response.json()
+
+      if (!response.ok) {
+        throw new Error(data.error || 'Failed to subscribe')
+      }
+
+      // Show success popup
+      setShowPopup(true)
+      
+      // Clear form
+      setEmail('')
+      setWhatsapp('')
+      
+      // Hide popup after 5 seconds
+      setTimeout(() => {
+        setShowPopup(false)
+      }, 5000)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'An error occurred')
+    } finally {
+      setLoading(false)
+    }
   }
 
   return (
-    <div className="signup">
-      <h2>Drop Notifications</h2>
-      <p>Receive updates about new drops via email or WhatsApp.</p>
-      <form onSubmit={handleSubmit}>
-        <input
-          type="email"
-          placeholder="E-Mail"
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
+    <>
+      <div className="signup">
+        <h2>Drop Notifications</h2>
+        <p>Receive updates about new drops via email or WhatsApp.</p>
+        <form onSubmit={handleSubmit}>
+          <input
+            type="email"
+            placeholder="E-Mail"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            disabled={loading}
+          />
+          <input
+            type="text"
+            placeholder="WhatsApp Number"
+            value={whatsapp}
+            onChange={(e) => setWhatsapp(e.target.value)}
+            disabled={loading}
+          />
+          <br />
+          {error && <div style={{ color: '#ff4444', marginTop: '10px', fontSize: '14px' }}>{error}</div>}
+          <button type="submit" disabled={loading}>
+            {loading ? 'Subscribing...' : 'Get Notified'}
+          </button>
+        </form>
+      </div>
+
+      {showPopup && (
+        <div
+          style={{
+            position: 'fixed',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            background: '#1c1c1c',
+            border: '1px solid #2a2a2a',
+            borderRadius: '16px',
+            padding: '30px 40px',
+            zIndex: 1000,
+            boxShadow: '0 8px 32px rgba(0, 0, 0, 0.5)',
+            maxWidth: '400px',
+            textAlign: 'center',
+          }}
+        >
+          <p style={{ margin: 0, fontSize: '16px', color: '#eaeaea' }}>
+            You will receive a notification as soon as a new drop drops.
+          </p>
+          <button
+            onClick={() => setShowPopup(false)}
+            style={{
+              marginTop: '20px',
+              padding: '10px 20px',
+              background: '#3ddc84',
+              color: '#000',
+              border: 'none',
+              borderRadius: '8px',
+              cursor: 'pointer',
+              fontSize: '14px',
+            }}
+          >
+            OK
+          </button>
+        </div>
+      )}
+
+      {showPopup && (
+        <div
+          style={{
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            background: 'rgba(0, 0, 0, 0.7)',
+            zIndex: 999,
+          }}
+          onClick={() => setShowPopup(false)}
         />
-        <input
-          type="text"
-          placeholder="WhatsApp Number"
-          value={whatsapp}
-          onChange={(e) => setWhatsapp(e.target.value)}
-        />
-        <br />
-        <button type="submit">Get Notified</button>
-      </form>
-    </div>
+      )}
+    </>
   )
 }