refactor: organize components flatter

2026-03-21 11:20:49 -07:00
parent e1375eddfa
commit 2262bf4f3b
5 changed files with 4 additions and 4 deletions
@@ -0,0 +1,56 @@
+import { cn } from "@/lib/utils";
+
+interface PlaybackPageIndicatorProps {
+  total: number;
+  current: number;
+  progress: number;
+  onGoTo: (index: number) => void;
+}
+
+export function PlaybackPageIndicator({
+  total,
+  current,
+  progress,
+  onGoTo,
+}: PlaybackPageIndicatorProps) {
+  if (total === 0) return null;
+
+  return (
+    <div className="flex w-full items-center gap-0.5 px-1">
+      {Array.from({ length: total }, (_, i) => (
+        <button
+          key={i}
+          onClick={(e) => {
+            e.stopPropagation();
+            onGoTo(i);
+          }}
+          className="group relative h-3 flex-1"
+        >
+          {/* Dim track */}
+          <div
+            className={cn(
+              "absolute inset-x-0 top-1 h-1 rounded-full bg-white/30",
+              "group-hover:h-1.5 group-hover:top-0.5",
+            )}
+          />
+          {/* Fill */}
+          <div
+            className={cn(
+              "absolute left-0 top-1 h-1 rounded-full bg-white/90",
+              "group-hover:h-1.5 group-hover:top-0.5",
+            )}
+            style={{
+              width:
+                i < current
+                  ? "100%"
+                  : i === current
+                    ? `${progress * 100}%`
+                    : "0%",
+              transition: i === current ? "width 300ms linear" : "none",
+            }}
+          />
+        </button>
+      ))}
+    </div>
+  );
+}