plane/web/components/ui/circular-progress.tsx

import React, { useEffect, useState } from "react";

export const CircularProgress = ({ progress }: { progress: number }) => {
  const [circumference, setCircumference] = useState(0);

  useEffect(() => {
    const radius = 40;
    const calcCircumference = 2 * Math.PI * radius;
    setCircumference(calcCircumference);
  }, []);

  const progressAngle = (progress / 100) * 360 >= 360 ? 359.9 : (progress / 100) * 360;
  const progressX = 50 + Math.cos((progressAngle - 90) * (Math.PI / 180)) * 40;
  const progressY = 50 + Math.sin((progressAngle - 90) * (Math.PI / 180)) * 40;

  return (
    <div className="relative h-5 w-5">
      <svg className="absolute top-0 left-0" viewBox="0 0 100 100">
        <circle
          className="stroke-current"
          cx="50"
          cy="50"
          r="40"
          strokeWidth="12"
          fill="none"
          strokeDasharray={`${circumference} ${circumference}`}
        />
        <path
          className="fill-current"
          d={`M50 10
            A40 40 0 ${progress > 50 ? 1 : 0} 1 ${progressX} ${progressY}
            L50 50 Z`}
          strokeWidth="12"
          strokeLinecap="round"
        />
      </svg>
    </div>
  );
};