wip: initial ui done

client/app/app.css

@@ -63,7 +63,7 @@
 @media (min-width: 60rem) {
   :root {
     --header-xl: 78px;
-    --header-lg: 44px;
+    --header-lg: 36px;
     --header-md: 22px;
     --header-sm: 16px;
     --header-xl-weight: 600;

client/app/components/rewind/Rewind.tsx

@@ -1,9 +1,10 @@
 import { imageUrl, type RewindStats } from "api/api";
-import RewindTopItem from "./RewindTopItem";
+import RewindStatText from "./RewindStatText";
+import { RewindTopItem } from "./RewindTopItem";
 
 interface Props {
   stats: RewindStats;
-  includeTime: boolean;
+  includeTime?: boolean;
 }
 
 export default function Rewind(props: Props) {
@@ -11,103 +12,60 @@ export default function Rewind(props: Props) {
   const albumimg = props.stats.top_albums[0].image;
   const trackimg = props.stats.top_tracks[0].image;
   return (
-    <div className="flex flex-col gap-10">
+    <div className="flex flex-col gap-7">
       <h1>{props.stats.title}</h1>
-      <div className="flex gap-5">
-        <div className="rewind-top-item-image">
-          <img className="w-58 h-58" src={imageUrl(artistimg, "medium")} />
-        </div>
-        <div className="flex flex-col gap-1">
-          <h4>Top Artist</h4>
-          <div className="flex items-center gap-2">
-            <div className="flex flex-col items-start mb-3">
-              <h2>{props.stats.top_artists[0].name}</h2>
-              <span className="text-(--color-fg-tertiary) -mt-3">
-                {`${props.stats.top_artists[0].listen_count} plays`}
-                {props.includeTime
-                  ? ` (${Math.floor(
-                      props.stats.top_artists[0].time_listened / 60
-                    )} minutes)`
-                  : ``}
-              </span>
-            </div>
-          </div>
-          {props.stats.top_artists.slice(1).map((e, i) => (
-            <div className="" key={e.id}>
-              {e.name}
-              <span className="text-(--color-fg-tertiary)">
-                {` - ${e.listen_count} plays`}
-                {props.includeTime
-                  ? ` (${Math.floor(e.time_listened / 60)} minutes)`
-                  : ``}
-              </span>
-            </div>
-          ))}
-        </div>
-      </div>
-      <div className="flex gap-5">
-        <div className="rewind-top-item-image">
-          <img className="w-58 h-58" src={imageUrl(albumimg, "medium")} />
-        </div>
-        <div className="flex flex-col gap-1">
-          <h4>Top Album</h4>
-          <div className="flex items-center gap-2">
-            <div className="flex flex-col items-start mb-3">
-              <h2>{props.stats.top_albums[0].title}</h2>
-              <span className="text-(--color-fg-tertiary) -mt-3">
-                {`${props.stats.top_albums[0].listen_count} plays`}
-                {props.includeTime
-                  ? ` (${Math.floor(
-                      props.stats.top_albums[0].time_listened / 60
-                    )} minutes)`
-                  : ``}
-              </span>
-            </div>
-          </div>
-          {props.stats.top_albums.slice(1).map((e, i) => (
-            <div className="" key={e.id}>
-              {e.title}
-              <span className="text-(--color-fg-tertiary)">
-                {` - ${e.listen_count} plays`}
-                {props.includeTime
-                  ? ` (${Math.floor(e.time_listened / 60)} minutes)`
-                  : ``}
-              </span>
-            </div>
-          ))}
-        </div>
-      </div>
-      <div className="flex gap-5">
-        <div className="rewind-top-item-image">
-          <img className="w-58 h-58" src={imageUrl(trackimg, "medium")} />
-        </div>
-        <div className="flex flex-col gap-1">
-          <h4>Top Track</h4>
-          <div className="flex items-center gap-2">
-            <div className="flex flex-col items-start mb-3">
-              <h2>{props.stats.top_tracks[0].title}</h2>
-              <span className="text-(--color-fg-tertiary) -mt-3">
-                {`${props.stats.top_tracks[0].listen_count} plays`}
-                {props.includeTime
-                  ? ` (${Math.floor(
-                      props.stats.top_tracks[0].time_listened / 60
-                    )} minutes)`
-                  : ``}
-              </span>
-            </div>
-          </div>
-          {props.stats.top_tracks.slice(1).map((e, i) => (
-            <div className="" key={e.id}>
-              {e.title}
-              <span className="text-(--color-fg-tertiary)">
-                {` - ${e.listen_count} plays`}
-                {props.includeTime
-                  ? ` (${Math.floor(e.time_listened / 60)} minutes)`
-                  : ``}
-              </span>
-            </div>
-          ))}
-        </div>
+      <RewindTopItem
+        title="Top Artist"
+        imageSrc={imageUrl(artistimg, "medium")}
+        items={props.stats.top_artists}
+        getLabel={(a) => a.name}
+        includeTime={props.includeTime}
+      />
+
+      <RewindTopItem
+        title="Top Album"
+        imageSrc={imageUrl(albumimg, "medium")}
+        items={props.stats.top_albums}
+        getLabel={(a) => a.title}
+        includeTime={props.includeTime}
+      />
+
+      <RewindTopItem
+        title="Top Track"
+        imageSrc={imageUrl(trackimg, "medium")}
+        items={props.stats.top_tracks}
+        getLabel={(t) => t.title}
+        includeTime={props.includeTime}
+      />
+
+      <div className="grid grid-cols-3 gap-5">
+        <RewindStatText
+          figure={`${props.stats.minutes_listened}`}
+          text="Minutes listened"
+        />
+        <RewindStatText figure={`${props.stats.unique_tracks}`} text="Tracks" />
+        <RewindStatText
+          figure={`${props.stats.new_tracks}`}
+          text="New tracks"
+        />
+        <RewindStatText figure={`${props.stats.plays}`} text="Plays" />
+        <RewindStatText figure={`${props.stats.unique_albums}`} text="Albums" />
+        <RewindStatText
+          figure={`${props.stats.new_albums}`}
+          text="New albums"
+        />
+        <RewindStatText
+          figure={`${props.stats.avg_plays_per_day.toFixed(1)}`}
+          text="Plays per day"
+        />
+        <RewindStatText
+          figure={`${props.stats.unique_artists}`}
+          text="Artists"
+        />
+        <RewindStatText
+          figure={`${props.stats.new_artists}`}
+          text="New artists"
+        />
       </div>
     </div>
   );

client/app/components/rewind/RewindStatText.tsx

@@ -0,0 +1,32 @@
+interface Props {
+  figure: string;
+  text: string;
+}
+
+export default function RewindStatText(props: Props) {
+  return (
+    <div className="flex items-baseline gap-1.5">
+      <div className="w-20 text-end shrink-0">
+        <span
+          className="
+            relative inline-block
+            text-2xl font-semibold
+          "
+        >
+          <span
+            className="
+              absolute inset-0
+              -translate-x-2 translate-y-8
+              bg-(--color-primary)
+              z-0
+              h-1
+            "
+            aria-hidden
+          />
+          <span className="relative z-1">{props.figure}</span>
+        </span>
+      </div>
+      <span className="text-sm">{props.text}</span>
+    </div>
+  );
+}

client/app/components/rewind/RewindTopItem.tsx

@@ -1,30 +1,53 @@
-import { imageUrl, type Artist } from "api/api";
+type TopItemProps<T> = {
+  title: string;
+  imageSrc: string;
+  items: T[];
+  getLabel: (item: T) => string;
+  includeTime?: boolean;
+};
 
-interface args {
-  title?: string;
-  name?: string;
-  image: string;
-  minutes_listened: number;
-  time_listened: number;
-  artists?: Artist;
-}
-
-export default function RewindTopItem(args: args[]) {
-  console.log(args);
-  if (args === undefined || args.length < 1) {
-    return <></>;
+export function RewindTopItem<
+  T extends {
+    id: string | number;
+    listen_count: number;
+    time_listened: number;
   }
-  const img = imageUrl(args[0].image, "medium");
+>({ title, imageSrc, items, getLabel, includeTime }: TopItemProps<T>) {
+  const [top, ...rest] = items;
+
+  if (!top) return null;
 
   return (
-    <div className="flex gap-2">
+    <div className="flex gap-5">
       <div className="rewind-top-item-image">
-        <img src={img} />
+        <img className="w-50 h-50" src={imageSrc} />
       </div>
+
       <div className="flex flex-col gap-1">
-        <h3>{args[0].title || args[0].name}</h3>
-        {args.map((e) => (
-          <div className="">{e.title || e.name}</div>
+        <h4 className="-mb-1">{title}</h4>
+
+        <div className="flex items-center gap-2">
+          <div className="flex flex-col items-start mb-2">
+            <h2>{getLabel(top)}</h2>
+            <span className="text-(--color-fg-tertiary) -mt-3 text-sm">
+              {`${top.listen_count} plays`}
+              {includeTime
+                ? ` (${Math.floor(top.time_listened / 60)} minutes)`
+                : ``}
+            </span>
+          </div>
+        </div>
+
+        {rest.map((e) => (
+          <div key={e.id} className="text-sm">
+            {getLabel(e)}
+            <span className="text-(--color-fg-tertiary)">
+              {` - ${e.listen_count} plays`}
+              {includeTime
+                ? ` (${Math.floor(e.time_listened / 60)} minutes)`
+                : ``}
+            </span>
+          </div>
         ))}
       </div>
     </div>

client/app/routes/RewindPage.tsx

@@ -12,5 +12,5 @@ export default function RewindPage() {
   useEffect(() => {
     getRewindStats({ year: 2025 }).then((r) => setStats(r));
   }, []);
-  return <>{stats !== undefined && <Rewind stats={stats} includeTime />}</>;
+  return <>{stats !== undefined && <Rewind stats={stats} />}</>;
 }