feat: initial commit

src/components/media/music/Chart.astro

@@ -0,0 +1,33 @@
+---
+import ProgressBar from "@components/media/ProgressBar.astro";
+
+const { data, count } = Astro.props;
+---
+
+<div class="music-chart">
+  <ol type="1">
+    {
+      data.slice(0, count).map((item) => {
+        const percentage = `${item.chart.percentage}%`;
+        const playsLabel = item.chart.plays === 1 ? "play" : "plays";
+
+        return (
+          <li value={item.chart.rank}>
+            <div class="item">
+              <div class="info">
+                <a class="title" href={item.chart.url}>
+                  {item.chart.title}
+                </a>
+                <span class="subtext">{item.chart.artist}</span>
+                <span class="subtext">
+                  {item.chart.plays} {playsLabel}
+                </span>
+              </div>
+              <ProgressBar percentage={percentage} />
+            </div>
+          </li>
+        );
+      })
+    }
+  </ol>
+</div>

src/components/media/music/Recent.astro

@@ -0,0 +1,48 @@
+---
+import { fetchGlobalData } from "@utils/data/global/index.js";
+
+const { data } = Astro.props;
+const { globals } = await fetchGlobalData(Astro);
+---
+
+<div class="music-chart">
+  {
+    data.slice(0, 10).map((item) => (
+      <div class="item">
+        <div class="meta">
+          <a href={item.chart.url}>
+            <img
+              srcset={`
+              ${globals.cdn_url}${item.chart.image}?class=w50&type=webp 50w,
+              ${globals.cdn_url}${item.chart.image}?class=w100&type=webp 100w
+            `}
+              sizes="(max-width: 450px) 50px, 100px"
+              src={`${globals.cdn_url}${item.chart.image}?class=w50&type=webp`}
+              alt={item.chart.alt.replace(/['"]/g, "")}
+              loading="lazy"
+              decoding="async"
+              width="64"
+              height="64"
+            />
+          </a>
+          <div class="meta-text">
+            <a class="title" href={item.chart.url}>
+              {item.chart.title}
+            </a>
+            <span class="subtext">{item.chart.subtext}</span>
+          </div>
+        </div>
+        <time datetime={item.chart.played_at}>
+          {new Date(item.chart.played_at).toLocaleString("en-US", {
+            timeZone: "America/Los_Angeles",
+            month: "long",
+            day: "numeric",
+            hour: "numeric",
+            minute: "numeric",
+            hour12: true,
+          })}
+        </time>
+      </div>
+    ))
+  }
+</div>