feat: numerous other pages

src/components/media/music/Recent.astro

@@ -0,0 +1,41 @@
+---
+const { data, globals } = Astro.props;
+---
+
+<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>