ourworld_web/www_mycelium_net
23
0
Fork 0
forked from sashaastiadi/www_mycelium_net
Code Issues Pull Requests Activity

feat: add success state and green button variant for newsletter signup form

Browse Source
This commit is contained in:
sasha-astiadi
2025-10-15 16:35:47 +02:00
parent ae277d33b5
commit 1494a83812
2 changed files with 11 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/Button.tsx
View File

@@ -14,6 +14,7 @@ const variantStyles = {
white: white:
'bg-white text-cyan-900 hover:bg-white/90 active:bg-white/90 active:text-cyan-900/70', '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', 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: { outline: {
gray: 'border-gray-300 text-gray-700 hover:border-cyan-500 active:border-cyan-500', gray: 'border-gray-300 text-gray-700 hover:border-cyan-500 active:border-cyan-500',

12
src/components/Footer.tsx
View File

@@ -14,11 +14,13 @@ import logomark from '@/images/logomark.svg'
export function Footer() { export function Footer() {
const [email, setEmail] = useState(''); const [email, setEmail] = useState('');
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false);
const [message, setMessage] = useState(''); const [message, setMessage] = useState('');
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => { const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
setLoading(true); setLoading(true);
setSuccess(false);
setMessage(''); setMessage('');
try { try {
@@ -36,6 +38,7 @@ export function Footer() {
throw new Error(data.error || 'Something went wrong'); throw new Error(data.error || 'Something went wrong');
} }
setSuccess(true);
setMessage('Thanks for subscribing!'); setMessage('Thanks for subscribing!');
setEmail(''); setEmail('');
} catch (error: any) { } catch (error: any) {
@@ -91,8 +94,13 @@ export function Footer() {
value={email} value={email}
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
/> />
<Button type="submit" color="cyan" className="ml-4 flex-none" disabled={loading}> <Button
{loading ? 'Joining...' : <><span className="hidden lg:inline">Join our newsletter</span><span className="lg:hidden">Join newsletter</span></>} type="submit"
color={success ? 'green' : 'cyan'}
className="ml-4 flex-none"
disabled={loading || success}
>
{loading ? 'Joining...' : success ? 'Sent!' : <><span className="hidden lg:inline">Join our newsletter</span><span className="lg:hidden">Join newsletter</span></>}
</Button> </Button>
</form> </form>
{message && <p className="mt-2 text-sm text-gray-600">{message}</p>} {message && <p className="mt-2 text-sm text-gray-600">{message}</p>}