feat: Click album art in DetailPanel to play track

DetailPanel.tsx:
- Added optional onPlay prop to interface
- Album art image now wrapped in clickable container with cursor-pointer
- Hover overlay: semi-transparent black bg with white play triangle icon
- Works for both artwork images and placeholder (treble clef) state
- Placeholder gets hover:bg-white/10 for subtle feedback
- App.tsx: passes handlePlay to DetailPanel onPlay prop

Visual feedback:
- group-hover opacity transition on overlay (0 → 1)
- Play icon: w-12 h-12 white triangle (▶) centered
- Smooth 150ms transition on overlay opacity
This commit is contained in:
rin.kagamine committed 2026-05-29 21:46:58 -04:00
1 parent dff48eac13
commit 4808406113
2 files changed
+27 -7

No files matched your search

+1
View File
@@ -234,6 +234,7 @@ function App() {
onDelete={handleDelete}
onUploadArtwork={handleUploadArtwork}
onRemoveArtwork={handleRemoveArtwork}
onPlay={handlePlay}
/>
)}