senke/veza
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui): dashboard StatCard surface + KodoEmptyState tokens (Spotify/Discord)

Browse source 
- StatCard: variant surface, rounded-xl icon box, text-foreground
- KodoEmptyState: variant surface, primary orbs/icon/CTA, no kodo-*

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
senke 2026-02-07 19:52:24 +01:00
parent 09f954951e
commit f31d204f6c
2 changed files with 15 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
apps/web/src/components/dashboard/StatCard.tsx
View file

@ -87,19 +87,19 @@ export const StatCard: React.FC<StatCardProps> = ({
return (
<Card
variant="default"
className="flex flex-col justify-between h-full p-6 hover:border-opacity-100 transition-all relative overflow-hidden"
variant="surface"
className="flex flex-col justify-between h-full p-6 relative overflow-hidden"
>
<div className="flex justify-between items-start mb-2 relative z-10">
<div>
<p className="text-xs font-mono text-muted-foreground uppercase tracking-widest mb-1">
{label}
</p>
<h3 className="text-2xl font-display font-bold text-white">
<h3 className="text-2xl font-display font-bold text-foreground">
{value}
</h3>
</div>
<div className={`p-2 rounded-lg ${bgMap[color]} ${colorMap[color]}`}>
<div className={`p-2 rounded-xl ${bgMap[color]} ${colorMap[color]}`}>
{icon}
</div>
</div>

29
apps/web/src/components/ui/KodoEmptyState.tsx
View file

@ -22,48 +22,41 @@ export function KodoEmptyState({
}: KodoEmptyStateProps) {
return (
<Card
variant="spotlight"
spotlightColor="rgba(var(--kodo-cyan), 0.15)"
variant="surface"
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 */}
{/* Subtle gradient orbs */}
<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 className="absolute top-1/4 left-1/4 w-64 h-64 bg-primary/30 rounded-full blur-[80px] animate-pulse-slow" />
<div className="absolute bottom-1/4 right-1/4 w-64 h-64 bg-primary/20 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 className="relative bg-card/80 backdrop-blur-xl p-6 rounded-xl border border-white/10 group-hover:scale-105 transition-transform duration-[var(--duration-immersive)] ease-in-out flex items-center justify-center">
<Icon className="h-12 w-12 text-primary" />
</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">
<h3 className="text-2xl font-display font-bold text-foreground mb-3 tracking-tight relative z-10">
{title}
</h3>
<p className="text-muted-foreground max-w-sm mb-8 text-base leading-relaxed">
<p className="text-muted-foreground max-w-sm mb-8 text-base leading-relaxed relative z-10">
{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"
variant="primary"
className="rounded-xl shadow-[0_0_20px_var(--color-primary)/0.25] hover:shadow-[0_0_24px_var(--color-primary)/0.35] transition-all duration-[var(--duration-immersive)] ease-in-out"
onClick={onAction}
>
<span className="relative z-10 flex items-center gap-2 font-bold tracking-wide">
<span className="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>