сохранение текущего прогресса в упражнении в locslstorage

src/pages/Exercise.tsx

@@ -50,6 +50,35 @@ export const Exercise = () => {
   const [totalSets, setTotalSets] = useState(3)
   const [isRotating, setIsRotating] = useState(false)
 
+
+
+  //Можно реализовать полностью на клиенте.
+  // Ограничение — прогресс сохраняется только на устройстве пользователя.
+  // Если нужно синхронизировать между устройствами или сохранять историю, потребуется бэкенд.
+  //сохраняем прогресс
+  const handlePause = () => {
+    const currentProgress = {
+      exerciseId: exercise?.id,
+      position: currentTime,
+      set: currentSet,
+    };
+    localStorage.setItem('exerciseProgress', JSON.stringify(currentProgress));
+    console.log('прогресс:', currentProgress)
+    // или отправить на сервер
+  };
+
+  // В начале упражнения
+  useEffect(() => {
+    const savedProgress = localStorage.getItem('exerciseProgress');
+    if (savedProgress) {
+      const progress = JSON.parse(savedProgress);
+      if (progress.exerciseId === exercise?.id) {
+        setCurrentTime(progress.position);
+        setCurrentSet(progress.set);
+      }
+    }
+  }, [exercise]);
+
   useEffect(() => {
     console.log("Course ID:", courseId)
     console.log("Exercise ID:", exerciseId)
@@ -264,7 +293,7 @@ export const Exercise = () => {
     <div className="bg-gray-50 w-full h-full overflow-auto">
       <div className="mt-36 mb-90 min-h-screen max-w-4xl mx-auto">
         <HeaderNav item={exercise.title} text={`упражнение ${exercise.position}`}
-         />
+        />
 
         <div className="px-4 sm:px-6 mt-10 mb-6">
           <div className="glass-morphism rounded-3xl overflow-hidden shadow-2xl border border-white/20 backdrop-blur-2xl">
@@ -338,7 +367,13 @@ export const Exercise = () => {
             </div>
             <div className="flex space-x-3">
               <button
-                onClick={() => setIsPlaying(!isPlaying)}
+                onClick={() => {
+                  setIsPlaying(!isPlaying)
+                  handlePause()
+                }
+
+                }
+
                 className={`flex-1 font-bold py-3 px-4 rounded-xl transition-all duration-300 transform hover:scale-105 flex items-center justify-center space-x-2 cursor-pointer ${isPlaying
                   ? "bg-gray-400 text-white shadow-lg"
                   : "bg-[#2BACBE] hover:bg-[#2099A8] text-white shadow-lg"
@@ -359,6 +394,7 @@ export const Exercise = () => {
                   setCurrentTime(0)
                   setIsPlaying(false)
                   handleClick()
+
                 }}
                 className="cursor-pointer px-6 py-3 bg-white text-gray-800 font-bold rounded-xl transition-all duration-300 hover:scale-105 hover:shadow-lg border border-gray-200 flex items-center justify-center"