Implements a responsive, data-focused layout that presents key application metrics
and visualizations in an organized dashboard format. The component intelligently
adapts between desktop grid and mobile tab-based layouts depending on screen size.
Layout components:
Statistics summary panel with key performance indicators
Recent skipped tracks listing with time and context information
Artist analysis section showing skip patterns by musician
Session overview with listening session metrics and duration
Responsive behavior:
Desktop: Multi-column grid layout showing all panels simultaneously
Mobile: Tab-based interface with icon navigation between sections
Graceful loading states with skeleton placeholders
Implementation details:
Uses CSS Grid for desktop layout arrangement
Implements a tab system for mobile view content organization
Provides fallback placeholder content when data is not available
Integrates Lucide icons for consistent visual language
Features loading skeletons for progressive enhancement
Description
Dashboard Layout System
Implements a responsive, data-focused layout that presents key application metrics and visualizations in an organized dashboard format. The component intelligently adapts between desktop grid and mobile tab-based layouts depending on screen size.
Layout components:
Responsive behavior:
Implementation details: