73d7bbf3d7
- KodoEmptyState: decorative background blur and border (bg-kodo-cyan/20 → bg-kodo-steel/20, border-kodo-cyan/30 → border-kodo-steel/30, icon text-kodo-cyan → text-kodo-steel) - PWAInstallBanner: decorative icon background and blur effect (2 instances) - Page headers: SettingsPage, GearPage, DeveloperPage, SocialPage icon backgrounds (4 instances) - decorative header icons - DashboardPage: activity item icon gradient background (decorative) - FileManagerView: selection banner background (decorative) - Total: ~8 files, ~9 instances replaced - Preserved: Active/selected states (StudioView active tab, AccountSettings selected theme, SessionManagement current session), primary actions, informational alerts - Action 11.3.1.3 in progress (first batch: decorative backgrounds)
53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { Card, Button } from '@veza/design-system';
|
|
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="glass"
|
|
className={cn(
|
|
'flex flex-col items-center justify-center text-center p-8 sm:p-12 animate-slideUp',
|
|
className,
|
|
)}
|
|
>
|
|
<div className="relative mb-6">
|
|
<div className="absolute inset-0 bg-kodo-steel/20 blur-2xl rounded-full animate-pulse" />
|
|
<div className="relative bg-kodo-ink p-4 rounded-2xl border border-kodo-steel/30 animate-float">
|
|
<Icon className="h-10 w-10 text-kodo-steel" />
|
|
</div>
|
|
</div>
|
|
|
|
<h3 className="text-xl font-display font-bold text-white mb-2 tracking-tight">
|
|
{title}
|
|
</h3>
|
|
|
|
<p className="text-white max-w-xs mb-8 text-sm sm:text-base leading-relaxed opacity-90">
|
|
{description}
|
|
</p>
|
|
|
|
{actionLabel && onAction && (
|
|
<Button variant="gaming" onClick={onAction} className="group">
|
|
<span className="flex items-center gap-2">{actionLabel}</span>
|
|
</Button>
|
|
)}
|
|
</Card>
|
|
);
|
|
}
|