39b2b642d2
Plan UI premium 6–8 semaines (design system, shell, Storybook, a11y): - Design system: DESIGN_TOKENS.md, APP_SHELL.md, FULL_LAYOUT_PAGE.md. Single source for layout/shell (index.css), shadows (design-system.css), durations/easing. - Tokens: shadow-cover-depth, shadow-gold-glow, shadow-fab-glow; layout max-height (max-h-layout-drawer, max-h-layout-panel, max-h-layout-list). All duration-200/300/500 replaced by --duration-fast/normal/slow. Arbitrary shadows replaced by token classes. - Shell & player: Sidebar, Header, GlobalPlayer, MiniPlayer, PlayerQueue, PlayerControls, AudioPlayer use tokens; focus-visible on Sidebar, PlayerQueue, DropdownMenuTrigger/Item, TabsTrigger. Typography: text-[10px]/[9px] → text-xs where applicable. - ESLint: no-restricted-syntax (warn) for w-/h-/rounded-/shadow-/text-/spacing arbitrary. - Scripts: report-arbitrary-values.mjs, capture/compare/generate visual; visual-complete.spec.ts. - Stories full layout: Dashboard, Playlists, Library, Settings, Profile in DashboardLayout.stories. - .cursorrules + README: DESIGN_TOKENS, APP_SHELL, visual commands, no arbitrary without justification. - apps/web/.gitignore: e2e test artifacts (test-results-visual, playwright-report-visual). Co-authored-by: Cursor <cursoragent@cursor.com>
58 lines
1.8 KiB
TypeScript
58 lines
1.8 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="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,
|
|
)}
|
|
>
|
|
{/* Subtle ambient orbs */}
|
|
<div className="absolute inset-0 opacity-[0.12] group-hover:opacity-20 transition-opacity duration-[var(--duration-slow)] pointer-events-none">
|
|
<div className="absolute top-1/4 left-1/4 w-64 h-64 bg-primary/40 rounded-full blur-3xl" />
|
|
<div className="absolute bottom-1/4 right-1/4 w-64 h-64 bg-primary/30 rounded-full blur-3xl" />
|
|
</div>
|
|
|
|
<div className="relative mb-6 p-4">
|
|
<div className="relative bg-white/5 p-5 rounded-xl border border-white/10 flex items-center justify-center group-hover:border-white/15 transition-colors">
|
|
<Icon className="h-10 w-10 text-primary" />
|
|
</div>
|
|
</div>
|
|
|
|
<h3 className="text-xl font-semibold text-foreground mb-2 tracking-tight relative z-10">
|
|
{title}
|
|
</h3>
|
|
|
|
<p className="text-muted-foreground max-w-sm mb-6 text-sm leading-relaxed relative z-10">
|
|
{description}
|
|
</p>
|
|
|
|
{actionLabel && onAction && (
|
|
<Button variant="primary" size="sm" onClick={onAction}>
|
|
{actionLabel}
|
|
</Button>
|
|
)}
|
|
</Card>
|
|
);
|
|
}
|