From 1494a83812d5e9acfe2e71574711f620a0bfacd4 Mon Sep 17 00:00:00 2001 From: sasha-astiadi Date: Wed, 15 Oct 2025 16:35:47 +0200 Subject: [PATCH] feat: add success state and green button variant for newsletter signup form --- src/components/Button.tsx | 1 + src/components/Footer.tsx | 12 ++++++++++-- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/components/Button.tsx b/src/components/Button.tsx index 9ff92ac..3816246 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -14,6 +14,7 @@ const variantStyles = { white: 'bg-white text-cyan-900 hover:bg-white/90 active:bg-white/90 active:text-cyan-900/70', gray: 'bg-gray-800 text-white hover:bg-gray-900 active:bg-gray-800 active:text-white/80', + green: 'bg-green-500 text-white hover:bg-green-600', }, outline: { gray: 'border-gray-300 text-gray-700 hover:border-cyan-500 active:border-cyan-500', diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 10dec1e..39248d4 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -14,11 +14,13 @@ import logomark from '@/images/logomark.svg' export function Footer() { const [email, setEmail] = useState(''); const [loading, setLoading] = useState(false); + const [success, setSuccess] = useState(false); const [message, setMessage] = useState(''); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setLoading(true); + setSuccess(false); setMessage(''); try { @@ -36,6 +38,7 @@ export function Footer() { throw new Error(data.error || 'Something went wrong'); } + setSuccess(true); setMessage('Thanks for subscribing!'); setEmail(''); } catch (error: any) { @@ -91,8 +94,13 @@ export function Footer() { value={email} onChange={(e) => setEmail(e.target.value)} /> - {message &&

{message}

}