migrating

src/components/CountdownCircleTimer.tsx

@@ -0,0 +1,73 @@
+import { Component, createEffect, onCleanup } from "solid-js";
+
+interface CountdownCircleTimerProps {
+  duration: number;
+  initialRemainingTime: number;
+  size: number;
+  strokeWidth: number;
+  colors: string;
+  children: () => any;
+}
+
+const CountdownCircleTimer: Component<CountdownCircleTimerProps> = (props) => {
+  const radius = (props.size - props.strokeWidth) / 2;
+  const circumference = radius * 2 * Math.PI;
+  
+  // Calculate progress (0 to 1)
+  const progress = () => props.initialRemainingTime / props.duration;
+  const strokeDashoffset = () => circumference * (1 - progress());
+
+  return (
+    <div
+      style={{
+        position: "relative",
+        width: `${props.size}px`,
+        height: `${props.size}px`,
+      }}
+    >
+      <svg
+        width={props.size}
+        height={props.size}
+        style={{ transform: "rotate(-90deg)" }}
+      >
+        {/* Background circle */}
+        <circle
+          cx={props.size / 2}
+          cy={props.size / 2}
+          r={radius}
+          fill="none"
+          stroke="#e5e7eb"
+          stroke-width={props.strokeWidth}
+        />
+        {/* Progress circle */}
+        <circle
+          cx={props.size / 2}
+          cy={props.size / 2}
+          r={radius}
+          fill="none"
+          stroke={props.colors}
+          stroke-width={props.strokeWidth}
+          stroke-dasharray={circumference}
+          stroke-dashoffset={strokeDashoffset()}
+          stroke-linecap="round"
+          style={{
+            transition: "stroke-dashoffset 0.5s linear",
+          }}
+        />
+      </svg>
+      {/* Timer text in center */}
+      <div
+        style={{
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+        }}
+      >
+        {props.children()}
+      </div>
+    </div>
+  );
+};
+
+export default CountdownCircleTimer;