Leon SerfatyandClaude Opus 4.8
857b9a7811
Property Management Network — Next.js 16 (App Router), Better Auth, Drizzle ORM over PostgreSQL, Stripe, OpenAI, Resend. Includes: - Security hardening: access-control/IDOR fixes, TLS-by-default DB layer, constant-time cron auth, strict security headers, atomic AI quota gating, HTML/email output encoding, demo-backdoor disabled in production. - Superadmin dashboard at /admin (overview/MRR, server-paginated users with ban/impersonate/plan/delete, billing, platform activity + admin audit log, AI usage, system health) via the Better Auth admin plugin. - Seed/migration utility scripts under scripts/. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
69 lines
2.7 KiB
TypeScript
69 lines
2.7 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useEffect } from "react"
|
|
import { motion, AnimatePresence } from "framer-motion"
|
|
import { Home } from "lucide-react"
|
|
|
|
const NOTIFICATIONS = [
|
|
{ name: "James T.", location: "Austin, TX", action: "just upgraded to Pro", time: "2 min ago" },
|
|
{ name: "Sarah M.", location: "London, UK", action: "just signed up", time: "4 min ago" },
|
|
{ name: "David K.", location: "Denver, CO", action: "got Lifetime access", time: "7 min ago" },
|
|
{ name: "Priya R.", location: "Toronto, CA", action: "just signed up", time: "12 min ago" },
|
|
{ name: "Marcus L.", location: "Miami, FL", action: "upgraded to Pro", time: "15 min ago" },
|
|
{ name: "Rachel W.", location: "Seattle, WA", action: "just signed up", time: "18 min ago" },
|
|
{ name: "Tom B.", location: "Chicago, IL", action: "got Lifetime access", time: "23 min ago" },
|
|
{ name: "Aisha N.", location: "New York, NY", action: "just signed up", time: "27 min ago" },
|
|
]
|
|
|
|
export function SocialProofToast() {
|
|
const [index, setIndex] = useState(0)
|
|
const [visible, setVisible] = useState(false)
|
|
|
|
useEffect(() => {
|
|
// First show after 6s
|
|
const initialTimer = setTimeout(() => tick(0), 6000)
|
|
return () => clearTimeout(initialTimer)
|
|
}, [])
|
|
|
|
function tick(i: number) {
|
|
setIndex(i)
|
|
setVisible(true)
|
|
|
|
setTimeout(() => {
|
|
setVisible(false)
|
|
const next = (i + 1) % NOTIFICATIONS.length
|
|
setTimeout(() => tick(next), 4000) // gap between toasts
|
|
}, 5000) // show duration
|
|
}
|
|
|
|
const notif = NOTIFICATIONS[index]
|
|
|
|
return (
|
|
<div className="fixed bottom-24 left-6 z-[80] md:bottom-8">
|
|
<AnimatePresence>
|
|
{visible && (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, x: -40, scale: 0.95 }}
|
|
animate={{ opacity: 1, x: 0, scale: 1 }}
|
|
exit={{ opacity: 0, x: -20, scale: 0.95 }}
|
|
transition={{ type: "spring", stiffness: 300, damping: 25 }}
|
|
className="flex items-center gap-3 rounded-2xl border border-white/10 bg-[#16161f]/95 backdrop-blur-xl px-4 py-3 shadow-2xl shadow-black/40 max-w-[260px]"
|
|
>
|
|
<div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-indigo-600/20 border border-indigo-500/30">
|
|
<Home className="h-4 w-4 text-indigo-400" />
|
|
</div>
|
|
<div className="min-w-0">
|
|
<p className="text-xs font-semibold text-white truncate">
|
|
{notif.name} <span className="text-white/40 font-normal">from {notif.location}</span>
|
|
</p>
|
|
<p className="text-[11px] text-indigo-300">{notif.action}</p>
|
|
<p className="text-[10px] text-white/30 mt-0.5">{notif.time}</p>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
)
|
|
}
|