59 lines
2.4 KiB
TypeScript
59 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { submitEmail } from '@/lib/actions/waitlistActions';
|
|
|
|
export const BlogNewsletter = () => {
|
|
const [email, setEmail] = useState('');
|
|
const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!email) return;
|
|
|
|
setStatus('loading');
|
|
|
|
const result = await submitEmail(email);
|
|
|
|
if (result.success) {
|
|
setStatus('success');
|
|
setEmail('');
|
|
} else {
|
|
setStatus('error');
|
|
setTimeout(() => setStatus('idle'), 3000);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="rounded-xl bg-[#161b28] p-6 text-center border border-white/5 shadow-xl relative overflow-hidden">
|
|
<div className="absolute inset-0 bg-gradient-to-b from-violet-500/5 to-transparent pointer-events-none" />
|
|
<div className="relative z-10">
|
|
<h4 className="text-base font-bold text-white mb-2">Subscribe to Banatie</h4>
|
|
<p className="text-sm text-gray-400 mb-4 leading-relaxed">
|
|
Get the latest articles and updates delivered to your inbox.
|
|
</p>
|
|
<form onSubmit={handleSubmit} className="space-y-3">
|
|
<input
|
|
type="email"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
placeholder="your@email.com"
|
|
disabled={status === 'loading' || status === 'success'}
|
|
className="block w-full rounded-lg border border-white/10 bg-[#0B0F19] py-2 px-3 text-white text-sm placeholder:text-gray-600 focus:border-violet-500 focus:ring-1 focus:ring-violet-500 focus:outline-none disabled:opacity-50"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
disabled={status === 'loading' || status === 'success'}
|
|
className="w-full rounded-lg bg-violet-500 px-3 py-2 text-sm font-semibold text-white shadow-md hover:bg-violet-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-500 transition-all transform hover:-translate-y-0.5 disabled:opacity-50 disabled:hover:translate-y-0"
|
|
>
|
|
{status === 'loading' && 'Subscribing...'}
|
|
{status === 'success' && 'Subscribed!'}
|
|
{status === 'error' && 'Try again'}
|
|
{status === 'idle' && 'Subscribe'}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|