100 lines
4.0 KiB
TypeScript
100 lines
4.0 KiB
TypeScript
'use client';
|
|
|
|
import React, { useEffect, useRef } from 'react';
|
|
import Link from 'next/link';
|
|
import { X, Zap, BarChart2, RefreshCw, Palette } from 'lucide-react';
|
|
import { Button } from '@/components/ui/Button';
|
|
|
|
interface PostDownloadPopupProps {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
const BENEFITS = [
|
|
{ icon: RefreshCw, text: 'Edit the link anytime — QR stays the same' },
|
|
{ icon: BarChart2, text: 'See who scans, when & where' },
|
|
{ icon: Palette, text: 'Custom colors, logo & frames' },
|
|
{ icon: Zap, text: 'Free plan included — upgrade anytime for more' },
|
|
];
|
|
|
|
const LS_KEY = 'qrm_download_popup_seen';
|
|
|
|
export function shouldShowDownloadPopup(): boolean {
|
|
try { return !localStorage.getItem(LS_KEY); } catch { return false; }
|
|
}
|
|
|
|
export function markDownloadPopupSeen(): void {
|
|
try { localStorage.setItem(LS_KEY, '1'); } catch { /* ignore */ }
|
|
}
|
|
|
|
export default function PostDownloadPopup({ open, onClose }: PostDownloadPopupProps) {
|
|
const overlayRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
markDownloadPopupSeen();
|
|
const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
|
|
document.addEventListener('keydown', onKey);
|
|
return () => document.removeEventListener('keydown', onKey);
|
|
}, [open, onClose]);
|
|
|
|
if (!open) return null;
|
|
|
|
return (
|
|
<div
|
|
ref={overlayRef}
|
|
className="fixed inset-0 z-50 flex items-center justify-center p-4"
|
|
style={{ backgroundColor: 'rgba(15, 23, 42, 0.6)', backdropFilter: 'blur(4px)' }}
|
|
onClick={(e) => { if (e.target === overlayRef.current) onClose(); }}
|
|
>
|
|
<div className="bg-white rounded-3xl shadow-2xl w-full max-w-md overflow-hidden animate-in fade-in zoom-in-95 duration-200">
|
|
|
|
{/* Header */}
|
|
<div className="relative bg-gradient-to-br from-[#4F46E5] to-[#7C3AED] p-6 text-white text-center">
|
|
<button
|
|
onClick={onClose}
|
|
className="absolute top-4 right-4 text-white/70 hover:text-white transition-colors"
|
|
aria-label="Close"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
<div className="w-12 h-12 bg-white/20 rounded-2xl flex items-center justify-center mx-auto mb-3">
|
|
<Zap className="w-6 h-6 text-white" />
|
|
</div>
|
|
<h2 className="text-xl font-bold">Your QR code is downloading!</h2>
|
|
<p className="text-white/80 text-sm mt-1">
|
|
Want to make it smarter — for free?
|
|
</p>
|
|
</div>
|
|
|
|
{/* Benefits */}
|
|
<div className="p-6 space-y-3">
|
|
{BENEFITS.map(({ icon: Icon, text }) => (
|
|
<div key={text} className="flex items-center gap-3">
|
|
<div className="w-8 h-8 rounded-xl bg-indigo-50 flex items-center justify-center shrink-0">
|
|
<Icon className="w-4 h-4 text-[#4F46E5]" />
|
|
</div>
|
|
<span className="text-sm text-slate-700">{text}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* CTAs */}
|
|
<div className="px-6 pb-6 space-y-3">
|
|
<Link href="/signup" onClick={onClose} className="block">
|
|
<Button className="w-full bg-[#4F46E5] hover:bg-[#4338CA] text-white h-12 text-base font-semibold shadow-lg">
|
|
Create Free Account
|
|
</Button>
|
|
</Link>
|
|
<button
|
|
onClick={onClose}
|
|
className="w-full text-sm text-slate-400 hover:text-slate-600 transition-colors py-1"
|
|
>
|
|
No thanks, keep it static
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|