From 2a867ee4315f136efbb14b3844be5ae9623f956a Mon Sep 17 00:00:00 2001 From: Durgesh Waje Date: Thu, 4 Jun 2026 15:36:18 +0530 Subject: [PATCH] feat: add toast notifications for Stay Updated subscription form --- src/components/Footer.tsx | 48 +++++++++++++++++++++++++++++++++++---- 1 file changed, 44 insertions(+), 4 deletions(-) diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 9c8e35e9..5f6004df 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -1,11 +1,31 @@ "use client"; -import { useState } from "react"; +import { useState, useEffect } from "react"; import Link from "next/link"; -import { Github, Twitter, Instagram, Linkedin, ArrowRight, ShieldCheck, Zap, Globe, ExternalLink, Lock, Mail } from "lucide-react"; +import { Github, Twitter, Instagram, Linkedin, ArrowRight, ShieldCheck, Zap, Globe, ExternalLink, Lock, Mail, CheckCircle, XCircle, X } from "lucide-react"; export default function Footer() { const [isExpanded, setIsExpanded] = useState(false); + const [email, setEmail] = useState(""); + const [toast, setToast] = useState<{ message: string; type: "success" | "error" } | null>(null); + + useEffect(() => { + if (!toast) return; + const timer = setTimeout(() => setToast(null), 3500); + return () => clearTimeout(timer); + }, [toast]); + + const handleSubscribe = (e: React.FormEvent) => { + e.preventDefault(); + const trimmed = email.trim(); + if (!trimmed || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(trimmed)) { + setToast({ message: "Please enter a valid email address.", type: "error" }); + return; + } + setToast({ message: "You're subscribed! Thanks for staying updated", type: "success" }); + setEmail(""); + setIsExpanded(false); + }; return ( ); } \ No newline at end of file