design: improvements to music page

components/objects/MusicInfo.tsx

@@ -13,16 +13,14 @@ const timePeriods: TimePeriod[] = [
 
 const MusicInfo: React.FC = () => {
   return (
-    <div className="max-w-2xl mx-auto text-center text-gray-200">
+    <div>
       {timePeriods.map((period) => (
         <section key={period.slug} className="mb-12">
           <h2 className="text-2xl font-semibold mb-4">{period.title}</h2>
-          <div className="flex justify-center">
-            <Button 
-              href={`/time-periods/${period.slug}/what-was-going-on`}
-              label="WHAT WAS GOING ON"
-            />
-          </div>
+          <Button
+            href={`/time-periods/${period.slug}/what-was-going-on`}
+            label="WHAT WAS GOING ON"
+          />
         </section>
       ))}
     </div>

components/objects/SeekBar.tsx

@@ -0,0 +1,52 @@
+"use client"
+
+import * as React from "react"
+
+interface SeekBarProps {
+  duration: string
+  startPos: number
+}
+
+export function SeekBar({ duration, startPos }: SeekBarProps) {
+  const getDurationInSeconds = (timeStr: string) => {
+    const parts = timeStr.split(":").map(Number)
+    if (parts.length === 3) {
+      return parts[0] * 3600 + parts[1] * 60 + parts[2]
+    } else {
+      return parts[0] * 60 + parts[1]
+    }
+  }
+
+  const formatTime = (seconds: number) => {
+    const hours = Math.floor(seconds / 3600)
+    const minutes = Math.floor((seconds % 3600) / 60)
+    const remainingSeconds = seconds % 60
+
+    if (hours > 0) {
+      return `${hours}:${minutes.toString().padStart(2, "0")}:${remainingSeconds.toString().padStart(2, "0")}`
+    }
+    return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`
+  }
+
+  const totalSeconds = getDurationInSeconds(duration)
+  const [currentSeconds] = React.useState(startPos)
+  const progress = (currentSeconds / totalSeconds) * 100
+
+  return (
+    <div className="w-full max-w-3xl mx-auto pt-4">
+      <div className="relative h-16 flex items-center">
+        <div className="absolute left-0 -top-0.5 text-sm">{formatTime(currentSeconds)}</div>
+        <div className="absolute right-0 -top-0.5 text-sm">{duration}</div>
+
+        <div className="w-full h-1 bg-gray-200 rounded-full">
+          <div className="h-full bg-primary rounded-full" style={{ width: `${progress}%` }} />
+          <div
+            className="absolute top-1/2 -translate-y-1/2 size-3 bg-white rounded-full shadow-lg"
+            style={{ left: `${progress}%`, marginLeft: "-6px" }}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+