forked from sashaastiadi/www_mycelium_net
feat: add success state and green button variant for newsletter signup form
This commit is contained in:
@@ -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',
|
||||||
|
@@ -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>}
|
||||||
|
Reference in New Issue
Block a user