AI generation React

src/components/Timer.jsx

@@ -0,0 +1,88 @@
+import React, { useState, useEffect } from 'react';
+import './Timer.css';
+
+const Timer = ({ timeLimit, onTimeExpired, isActive }) => {
+  const [timeLeft, setTimeLeft] = useState(timeLimit);
+  const [isWarning, setIsWarning] = useState(false);
+
+  useEffect(() => {
+    if (!isActive) return;
+    
+    setTimeLeft(timeLimit);
+    setIsWarning(false);
+    
+    const timer = setInterval(() => {
+      setTimeLeft((prevTime) => {
+        if (prevTime <= 1) {
+          clearInterval(timer);
+          onTimeExpired();
+          return 0;
+        }
+        return prevTime - 1;
+      });
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, [timeLimit, isActive, onTimeExpired]);
+
+  useEffect(() => {
+    // Активируем предупреждение за последние 5 секунд
+    setIsWarning(timeLeft <= 5 && timeLeft > 0);
+  }, [timeLeft]);
+
+  const formatTime = (seconds) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    if (mins > 0) {
+      return `${mins}:${secs.toString().padStart(2, '0')}`;
+    }
+    return `${secs} сек`;
+  };
+
+  const getTimerClass = () => {
+    if (!isActive) return 'timer paused';
+    if (isWarning) return 'timer warning';
+    if (timeLeft <= 10) return 'timer critical';
+    return 'timer';
+  };
+
+  const getProgressPercent = () => {
+    return (timeLeft / timeLimit) * 100;
+  };
+
+  return (
+    <div className={getTimerClass()}>
+      <div className="timer-circle">
+        <svg className="timer-svg" viewBox="0 0 100 100">
+          <circle
+            className="timer-bg"
+            cx="50"
+            cy="50"
+            r="45"
+            fill="none"
+            stroke="#e0e0e0"
+            strokeWidth="8"
+          />
+          <circle
+            className="timer-progress"
+            cx="50"
+            cy="50"
+            r="45"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="8"
+            strokeDasharray={`${2 * Math.PI * 45}`}
+            strokeDashoffset={`${2 * Math.PI * 45 * (1 - getProgressPercent() / 100)}`}
+            transform="rotate(-90 50 50)"
+          />
+        </svg>
+        <div className="timer-text">
+          <span className="timer-label">Осталось</span>
+          <span className="timer-value">{formatTime(timeLeft)}</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Timer;