Create Reusable Dashboard Widget Component Library

[arii]

• Status: OPEN (Linked to PR Create Reusable Dashboard Widget Component Library #700)
  • Priority: Medium
  • Context:
    Dashboard development is slowing down because every data tile (Heart Rate, Timer, Spotify) is custom-coded. This results in inconsistent padding, font sizes, and shadow effects across the application.
  • Technical Analysis:
    • Current Gap: The components/ directory contains specific implementations like HrTile.tsx and TimerDisplay.tsx but lacks a shared "Shell" or "Wrapper" component.
    • Required Change:
      1. Generic Wrapper: Create components/widgets/DashboardWidget.tsx to handle layout, background gradients, and standard Material-UI Card properties.
      2. Data Specialized Widget: Create components/widgets/DataWidget.tsx for standard key-value pairings (e.g., Label: "Active Players", Value: "4").

---

Cloned from #711

[arii]

PR #747 introduced Storybook for isolated MUI component development, which is excellent for building reusable components. Additionally, PRs like #828 and #745 refined specific dashboard components. Has this work laid significant groundwork for, or already begun the creation of, a reusable dashboard widget component library, as aimed by this issue?

[arii]

Consolidated into #895