Revert "feat: migrate frontend to Astro SSG with design system"

This reverts commit 8ad888da28.
2026-07-02 03:54:44 +07:00
parent 880c68fbab
commit bf86fcda8e
110 changed files with 4980 additions and 3396 deletions
@@ -0,0 +1,79 @@
+import { useEffect, useRef } from "react";
+
+interface AudioVisualizerProps {
+  levels: number[];
+}
+
+export function AudioVisualizer({ levels }: AudioVisualizerProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const container = containerRef.current;
+    if (!canvas || !container) return;
+
+    const ro = new ResizeObserver(() => {
+      const rect = container.getBoundingClientRect();
+      const dpr = window.devicePixelRatio || 1;
+      canvas.width = rect.width * dpr;
+      canvas.height = 128 * dpr;
+      canvas.style.height = "128px";
+    });
+    ro.observe(container);
+    return () => ro.disconnect();
+  }, []);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    const dpr = window.devicePixelRatio || 1;
+    const width = canvas.width / dpr;
+    const height = canvas.height / dpr;
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+
+    const barWidth = width / levels.length;
+    const maxBarHeight = height * 0.85;
+
+    const gradient = ctx.createLinearGradient(0, 0, 0, height);
+    gradient.addColorStop(0, "#23a1eb");
+    gradient.addColorStop(1, "#3eb0f2");
+
+    for (let i = 0; i < levels.length; i++) {
+      const level = levels[i];
+      const barHeight = Math.min(maxBarHeight, level * maxBarHeight);
+      const x = i * barWidth;
+      const y = height - barHeight;
+
+      ctx.fillStyle = gradient;
+
+      const radius = barWidth * 0.4;
+      ctx.beginPath();
+      ctx.moveTo(x + radius, y);
+      ctx.lineTo(x + barWidth - radius, y);
+      ctx.quadraticCurveTo(x + barWidth, y, x + barWidth, y + radius);
+      ctx.lineTo(x + barWidth, height);
+      ctx.lineTo(x, height);
+      ctx.lineTo(x, y + radius);
+      ctx.quadraticCurveTo(x, y, x + radius, y);
+      ctx.fill();
+    }
+  }, [levels]);
+
+  return (
+    <div ref={containerRef} className="relative w-full">
+      <canvas
+        ref={canvasRef}
+        width={0}
+        height={0}
+        className="w-full rounded-lg bg-primary/5"
+        style={{ height: "128px" }}
+      />
+    </div>
+  );
+}