A ReactJS Timer with progress bar

timer.tsx

import { useEffect, useState } from "react";

const ThirtySecCounter = () => {
  const [timeLeft, setTimeLeft] = useState(30);

  useEffect(() => {
    if (!timeLeft) return;

    const intervalId = setInterval(() => {
      setTimeLeft((prevTimeLeft) => prevTimeLeft - 1);
    }, 1000);

    return () => clearInterval(intervalId);
  }, [timeLeft]);

  const progress = (30 - timeLeft) / 30;

  return (
    <div>
      <div>{timeLeft}</div>
      <div style={{ backgroundColor: "#ddd", height: 20 }}>
        <div
          style={{
            width: `${progress * 100}%`,
            height: "100%",
            backgroundColor: "#0070f3",
          }}
        />
      </div>
    </div>
  );
};

export default ThirtySecCounter;