MVP Debugger UI (#2888)

skyvern-frontend/src/components/Timer.tsx

@@ -0,0 +1,54 @@
+import { useEffect, useState } from "react";
+
+interface HMS {
+  hour: number;
+  minute: number;
+  second: number;
+}
+
+interface Props {
+  startAt?: HMS;
+}
+
+function Timer({ startAt }: Props) {
+  const [time, setTime] = useState<HMS>({
+    hour: 0,
+    minute: 0,
+    second: 0,
+  });
+
+  useEffect(() => {
+    const start = performance.now();
+
+    const loop = () => {
+      const elapsed = performance.now() - start;
+      let seconds = Math.floor(elapsed / 1000);
+      let minutes = Math.floor(seconds / 60);
+      let hours = Math.floor(minutes / 60);
+      seconds = seconds % 60;
+      minutes = minutes % 60;
+      hours = hours % 24;
+      setTime(() => ({
+        hour: hours + (startAt?.hour ?? 0),
+        minute: minutes + (startAt?.minute ?? 0),
+        second: seconds + (startAt?.second ?? 0),
+      }));
+
+      rAF = requestAnimationFrame(loop);
+    };
+
+    let rAF = requestAnimationFrame(loop);
+
+    return () => cancelAnimationFrame(rAF);
+  }, [startAt]);
+
+  return (
+    <div>
+      {String(time.hour).padStart(2, "0")}:
+      {String(time.minute).padStart(2, "0")}:
+      {String(time.second).padStart(2, "0")}
+    </div>
+  );
+}
+
+export { Timer };