cd764d32cb
Empty states enhanced: - EmptyState component gains variant prop (default/centered/card) - Soft entry animation (fade + scale) via new CSS keyframe - Icon wrapped in muted background circle - Library: "Your library is empty" + "Upload Track" action - Search: "No results found" + improved description - Wishlist: "Explore the marketplace" + Browse button - Queue: "Nothing in your queue" with autoplay context - Chat: improved no-conversation and no-messages states Focus ring consistency (6 files fixed): - input.tsx: ring-primary/30 → ring-ring + ring-offset - checkbox.tsx: peer-focus → peer-focus-visible + ring-ring - textarea.tsx: focus:ring-1 → focus-visible:ring-2 + ring-ring - List.tsx: added ring-offset-background - TrackListRow.tsx: full focus-visible on rows + action buttons - PlaylistCard.tsx: focus-visible on checkbox button Co-authored-by: Cursor <cursoragent@cursor.com>
23 lines
623 B
TypeScript
23 lines
623 B
TypeScript
import { EmptyState } from '@/components/ui/empty-state';
|
|
import { FileAudio } from 'lucide-react';
|
|
|
|
interface LibraryPageEmptyProps {
|
|
onUploadClick: () => void;
|
|
}
|
|
|
|
export function LibraryPageEmpty({ onUploadClick }: LibraryPageEmptyProps) {
|
|
return (
|
|
<EmptyState
|
|
variant="centered"
|
|
icon={<FileAudio className="w-full h-full" />}
|
|
title="Your library is empty"
|
|
description="Upload your first track or create a playlist to get started."
|
|
action={{
|
|
label: 'Upload Track',
|
|
onClick: onUploadClick,
|
|
}}
|
|
size="lg"
|
|
className="min-h-layout-page-sm"
|
|
/>
|
|
);
|
|
}
|