71 lines
2.9 KiB
TypeScript
71 lines
2.9 KiB
TypeScript
import { Card } from '@/components/ui/card';
|
|
import { Button } from '@/components/ui/button';
|
|
import { LucideIcon } from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
interface KodoEmptyStateProps {
|
|
icon: LucideIcon;
|
|
title: string;
|
|
description: string;
|
|
actionLabel?: string;
|
|
onAction?: () => void;
|
|
className?: string;
|
|
}
|
|
|
|
export function KodoEmptyState({
|
|
icon: Icon,
|
|
title,
|
|
description,
|
|
actionLabel,
|
|
onAction,
|
|
className,
|
|
}: KodoEmptyStateProps) {
|
|
return (
|
|
<Card
|
|
variant="spotlight"
|
|
spotlightColor="rgba(var(--kodo-cyan), 0.15)"
|
|
className={cn(
|
|
'flex flex-col items-center justify-center text-center p-8 sm:p-16 animate-fade-in relative overflow-hidden group',
|
|
className,
|
|
)}
|
|
>
|
|
{/* Background Mesh Gradient */}
|
|
<div className="absolute inset-0 opacity-20 group-hover:opacity-30 transition-opacity duration-700 pointer-events-none">
|
|
<div className="absolute top-1/4 left-1/4 w-64 h-64 bg-cyan-500/30 rounded-full blur-[80px] animate-pulse-slow" />
|
|
<div className="absolute bottom-1/4 right-1/4 w-64 h-64 bg-magenta-500/30 rounded-full blur-[80px] animate-pulse-slow delay-700" />
|
|
</div>
|
|
|
|
<div className="relative mb-8 p-6">
|
|
{/* Animated Rings */}
|
|
<div className="absolute inset-0 border border-cyan-500/20 rounded-full scale-100 animate-ping-slow" />
|
|
<div className="absolute inset-0 border border-magenta-500/20 rounded-full scale-110 animate-spin-slow delay-150" />
|
|
|
|
{/* Glass Icon Container */}
|
|
<div className="relative bg-black/40 backdrop-blur-xl p-6 rounded-2xl border border-white/10 shadow-[0_0_30px_rgba(0,0,0,0.5)] group-hover:scale-110 transition-transform duration-500 flex items-center justify-center">
|
|
<div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent rounded-2xl" />
|
|
<Icon className="h-12 w-12 text-white drop-shadow-[0_0_15px_rgba(var(--kodo-cyan),0.5)]" />
|
|
</div>
|
|
</div>
|
|
|
|
<h3 className="text-2xl font-display font-bold text-white mb-3 tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white via-white to-white/70">
|
|
{title}
|
|
</h3>
|
|
|
|
<p className="text-muted-foreground max-w-sm mb-8 text-base leading-relaxed">
|
|
{description}
|
|
</p>
|
|
|
|
{actionLabel && onAction && (
|
|
<Button
|
|
className="group relative overflow-hidden bg-white text-black hover:bg-cyan-50 hover:text-cyan-900 border-none shadow-[0_0_20px_rgba(255,255,255,0.3)] hover:shadow-[0_0_30px_rgba(34,211,238,0.5)] transition-all duration-300"
|
|
onClick={onAction}
|
|
>
|
|
<span className="relative z-10 flex items-center gap-2 font-bold tracking-wide">
|
|
{actionLabel}
|
|
</span>
|
|
<div className="absolute inset-0 bg-gradient-to-r from-cyan-400 to-transparent opacity-0 group-hover:opacity-20 transition-opacity" />
|
|
</Button>
|
|
)}
|
|
</Card>
|
|
);
|
|
}
|