'use client'; import { useEffect, useId, useRef, useState } from 'react'; import { AnimatePresence, motion } from 'framer-motion'; import { cn } from '@/lib/utils'; const ARROW_LABEL_CLOSED = 'Open newsletter sign up'; const ARROW_LABEL_OPEN = 'Close newsletter sign up'; const CLOSE_LABEL = 'Close newsletter'; export default function NewsletterPopup04() { const inputId = useId(); const [isHovered, setIsHovered] = useState(false); const [isOpen, setIsOpen] = useState(false); const [isInputFocused, setIsInputFocused] = useState(false); const [status, setStatus] = useState<'idle' | 'loading' | 'success'>('idle'); const submitTimeoutRef = useRef | null>(null); const isHoverState = isHovered && !isOpen; const isArrowVisible = isHoverState || isOpen; const handleToggle = () => { setIsOpen((prev) => !prev); }; const handleMouseEnter = () => { setIsHovered(true); }; const handleMouseLeave = () => { setIsHovered(false); }; const handleFocus = () => { setIsHovered(true); }; const handleBlur = (event: React.FocusEvent) => { if (event.currentTarget.contains(event.relatedTarget as Node | null)) return; setIsHovered(false); }; const handleArrowKeyDown = (event: React.KeyboardEvent) => { if (event.key !== 'Enter' && event.key !== ' ') return; event.preventDefault(); handleToggle(); }; const handleSubmit = (event: React.FormEvent) => { event.preventDefault(); if (status !== 'idle') return; setStatus('loading'); if (submitTimeoutRef.current) { clearTimeout(submitTimeoutRef.current); } submitTimeoutRef.current = setTimeout(() => { setStatus('success'); }, 1400); }; useEffect(() => { return () => { if (submitTimeoutRef.current) { clearTimeout(submitTimeoutRef.current); } }; }, []); return (

{isArrowVisible && ( )}

Newsletter

GET UPDATES

Email setIsInputFocused(true)} onBlur={() => setIsInputFocused(false)} className={cn( "min-w-0 flex-1 appearance-none bg-transparent px-2 py-2 text-base md:text-[18px] font-normal leading-tight md:leading-[25px] text-[#8e8e8e] outline-none ring-0 shadow-none transition-all duration-200", "focus:outline-none outline-none! ring-0! ring-offset-0! focus-visible:outline-none! focus-visible:ring-0! focus-visible:ring-offset-0! focus:shadow-none focus-visible:shadow-none", "placeholder:text-[#8e8e8e]", status !== 'idle' && "text-[#b0b0b0]" )} />

{status === 'success' && (

You are in. Check your inbox for the welcome email.

)}

); }

Newsletter Popup

Tech

Category