59 lines
1.9 KiB
TypeScript
59 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import type { LucideIcon } from "lucide-react";
|
|
|
|
interface EmptyStateProps {
|
|
icon: LucideIcon;
|
|
title: string;
|
|
subtitle?: string;
|
|
ctaLabel?: string;
|
|
onCta?: () => void;
|
|
color?: string;
|
|
}
|
|
|
|
export default function EmptyState({
|
|
icon: Icon,
|
|
title,
|
|
subtitle,
|
|
ctaLabel,
|
|
onCta,
|
|
color = "purple",
|
|
}: EmptyStateProps) {
|
|
const colorMap: Record<string, { glow: string; icon: string; btn: string; btnHover: string }> = {
|
|
purple: { glow: "bg-purple-600/15", icon: "text-purple-400/60", btn: "bg-purple-600 hover:bg-purple-500", btnHover: "" },
|
|
amber: { glow: "bg-amber-500/15", icon: "text-amber-400/60", btn: "bg-amber-600 hover:bg-amber-500", btnHover: "" },
|
|
rose: { glow: "bg-rose-500/15", icon: "text-rose-400/60", btn: "bg-rose-600 hover:bg-rose-500", btnHover: "" },
|
|
sky: { glow: "bg-sky-500/15", icon: "text-sky-400/60", btn: "bg-sky-600 hover:bg-sky-500", btnHover: "" },
|
|
};
|
|
const c = colorMap[color] ?? colorMap.purple;
|
|
|
|
return (
|
|
<div className="flex flex-col items-center py-6">
|
|
<motion.div
|
|
className="relative flex h-14 w-14 items-center justify-center"
|
|
animate={{ y: [0, -3, 0] }}
|
|
transition={{ duration: 2.5, repeat: Infinity, ease: "easeInOut" }}
|
|
>
|
|
<div className={`absolute inset-0 rounded-xl ${c.glow} blur-md`} />
|
|
<Icon size={24} className={`relative ${c.icon}`} strokeWidth={1.5} />
|
|
</motion.div>
|
|
|
|
<p className="mt-3 text-sm font-semibold text-secondary">{title}</p>
|
|
{subtitle && (
|
|
<p className="mt-1 text-xs text-muted">{subtitle}</p>
|
|
)}
|
|
|
|
{ctaLabel && onCta && (
|
|
<motion.button
|
|
onClick={onCta}
|
|
className={`mt-4 rounded-lg px-4 py-1.5 text-xs font-semibold text-white transition-colors ${c.btn}`}
|
|
whileTap={{ scale: 0.95 }}
|
|
>
|
|
{ctaLabel}
|
|
</motion.button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|