|
| 1 | +import { useEffect, useState } from 'react'; |
| 2 | + |
| 3 | +const STORAGE_KEY = 'uxd_popover_dismissed'; |
| 4 | +const SHOW_DELAY_MS = 4000; |
| 5 | +const MIN_WIDTH = 1024; |
| 6 | + |
| 7 | +export default function UserExperiencedPopover() { |
| 8 | + const [visible, setVisible] = useState(false); |
| 9 | + |
| 10 | + useEffect(() => { |
| 11 | + if (typeof window === 'undefined') return; |
| 12 | + if (window.innerWidth < MIN_WIDTH) return; |
| 13 | + try { |
| 14 | + if (localStorage.getItem(STORAGE_KEY) === '1') return; |
| 15 | + } catch (e) { |
| 16 | + // ignore storage errors |
| 17 | + } |
| 18 | + const timer = setTimeout(() => { |
| 19 | + if (window.innerWidth >= MIN_WIDTH) { |
| 20 | + setVisible(true); |
| 21 | + if (typeof window !== 'undefined' && window.gtag) { |
| 22 | + window.gtag('event', 'uxd_popover_show', { |
| 23 | + event_category: 'newsletter', |
| 24 | + event_label: 'auto_popover', |
| 25 | + }); |
| 26 | + } |
| 27 | + } |
| 28 | + }, SHOW_DELAY_MS); |
| 29 | + return () => clearTimeout(timer); |
| 30 | + }, []); |
| 31 | + |
| 32 | + const dismiss = () => { |
| 33 | + setVisible(false); |
| 34 | + try { |
| 35 | + localStorage.setItem(STORAGE_KEY, '1'); |
| 36 | + } catch (e) { |
| 37 | + // ignore storage errors |
| 38 | + } |
| 39 | + if (typeof window !== 'undefined' && window.gtag) { |
| 40 | + window.gtag('event', 'uxd_popover_dismiss', { |
| 41 | + event_category: 'newsletter', |
| 42 | + event_label: 'auto_popover', |
| 43 | + }); |
| 44 | + } |
| 45 | + }; |
| 46 | + |
| 47 | + if (!visible) return null; |
| 48 | + |
| 49 | + return ( |
| 50 | + <div |
| 51 | + className="hidden lg:block fixed bottom-4 right-4 z-[90] w-90 rounded-2xl overflow-hidden bg-white shadow-2xl animate-[fadeInUp_280ms_cubic-bezier(0.2,0.8,0.2,1)] text-black" |
| 52 | + role="dialog" |
| 53 | + aria-label="User Experienced newsletter" |
| 54 | + > |
| 55 | + <div className="flex items-center justify-end px-3 py-2 border-b border-outline"> |
| 56 | + <button |
| 57 | + type="button" |
| 58 | + onClick={dismiss} |
| 59 | + aria-label="Close" |
| 60 | + className="inline-flex items-center justify-center size-7 rounded-full bg-black/5 hover:bg-black/15 text-black duration-200 active:opacity-50 cursor-pointer " |
| 61 | + > |
| 62 | + <svg |
| 63 | + width="10" |
| 64 | + height="10" |
| 65 | + viewBox="0 0 16 16" |
| 66 | + fill="none" |
| 67 | + xmlns="http://www.w3.org/2000/svg" |
| 68 | + > |
| 69 | + <path |
| 70 | + d="M3 3L13 13M13 3L3 13" |
| 71 | + stroke="currentColor" |
| 72 | + strokeWidth="1.75" |
| 73 | + strokeLinecap="round" |
| 74 | + /> |
| 75 | + </svg> |
| 76 | + </button> |
| 77 | + </div> |
| 78 | + <div className="px-7 pt-0 flex flex-col gap-0 items-start "> |
| 79 | + <a |
| 80 | + href="https://uxed.substack.com" |
| 81 | + target="_blank" |
| 82 | + rel="noopener" |
| 83 | + className="mb-4" |
| 84 | + > |
| 85 | + <img |
| 86 | + src="/images/projects/uxd-logo-red.png" |
| 87 | + alt="" |
| 88 | + className="size-12 rounded shrink-0" |
| 89 | + /> |
| 90 | + </a> |
| 91 | + <div className="text-lg font-medium leading-tight mb-2"> |
| 92 | + Subscribe to the <br /> |
| 93 | + User Experienced |
| 94 | + </div> |
| 95 | + |
| 96 | + <div className="text-sm"> |
| 97 | + Subscribe for weekly web, app, and logo design inspiration. |
| 98 | + </div> |
| 99 | + </div> |
| 100 | + <div className="px-4 "> |
| 101 | + <iframe |
| 102 | + src="https://uxed.substack.com/embed" |
| 103 | + frameBorder="0" |
| 104 | + scrolling="no" |
| 105 | + className="bg-white w-full h-37 block" |
| 106 | + title="Subscribe to User Experienced" |
| 107 | + ></iframe> |
| 108 | + </div> |
| 109 | + <div className="flex items-center gap-1 text-black/75 shrink-0 justify-end text-xs py-3 px-7 border-t border-black/10"> |
| 110 | + <span>co-curated by</span> |
| 111 | + <img src="/images/swiper-logo.svg" alt="Swiper" className="size-4" /> |
| 112 | + <span className="text-black">Swiper authors</span> |
| 113 | + </div> |
| 114 | + </div> |
| 115 | + ); |
| 116 | +} |
0 commit comments