сделан фильтр упражнений по дням с навигацией

src/pages/CourseExercises.tsx

@@ -6,18 +6,37 @@ import { useParams } from "react-router-dom"
 import HeaderNav from "../components/HeaderNav"
 import BottomNavigation from "../components/BottomNavigation"
 
-
 import { connect } from '../confconnect';
 
 
+
+interface CourseExercises {
+  id_course: number;
+  id_exercise: number;
+  exercise: Exercise;
+  day: number;
+  position: number;
+  repeats: number;
+}
+
+interface Exercise {
+  id: number;
+  title: string;
+
+}
+
+
 export const CourseExercises = () => {
 
   const { id } = useParams<{ id: string }>();
 
+  // const [pacientData, setPacientData] = useState(null);
+
+  const [course_exercises, setExercises] = useState<CourseExercises[]>([]);
+  const [selectedDay, setSelectedDay] = useState<number | null>(null);
+
 
-  // const id = useParams();
 
-const [pacientData, setPacientData] = useState(null);
   const token = localStorage.getItem('authToken');
 
   useEffect(() => {
@@ -27,19 +46,20 @@ const [pacientData, setPacientData] = useState(null);
       return;
     }
 
-
-
     connect.get(`/pacient/${id}`, {
 
       headers: {
         Authorization: `Bearer ${token}`,
+        'Content-Type': 'application/json',
       },
 
     })
       .then(response => {
         console.log('Response status:', response.status);
         console.log('Данные:', response.data);
-      setPacientData(response.data);
+        // setPacientData(response.data);
+        setExercises(response.data.course_exercises);
+
 
 
       })
@@ -52,36 +72,98 @@ const [pacientData, setPacientData] = useState(null);
 
         } else {
           console.error('Ошибка при настройке запроса:', error.message);
-     
         }
       });
-  }, [token]);
+  }, []);
 
 
+  useEffect(() => {
+    if (course_exercises.length > 0 && selectedDay === null) {
+      setSelectedDay(course_exercises[0].day);
+    }
+  }, [course_exercises]);
+
+
+  const days = Array.from(new Set(course_exercises.map(ex => ex.day))).sort((a, b) => a - b);
+
+  const filteredExercises = selectedDay !== null
+    ? course_exercises.filter(ex => ex.day === selectedDay)
+    : course_exercises;
 
 
 
   return (
 
 
-
-
     <div className="my-36 min-h-screen max-w-4xl mx-auto">
 
-      <HeaderNav item={'Test'} text={'test_test'} />
+      <HeaderNav item={'Курс' + ' ' + id} text={'список упражнений'} />
 
-      <div className="mb-20">
+      <div className="px-6 mb-8">
-        <div
+
+        {/* Заголовок секции */}
+        <div className="flex items-center justify-between mb-6">
+          <h2 className="text-xl font-black text-[#5F5C5C]">Список упражнений</h2>
+          <span className="text-sm text-gray-500">{course_exercises.length} Упражнения</span>
+        </div>
+
+        {/* Кнопки выбора дня */}
+        {days.length > 1 && (
+          <div className="px-4 sm:px-6 mb-6">
+            <div className="flex space-x-2 overflow-x-auto pb-2">
+              {days.map((day) => (
+                <button
+                  key={day}
+                  onClick={() => {
+                    setSelectedDay(day);
+                  }}
+                  className={`flex-shrink-0 p-4 py-2 rounded-full text-sm font-semibold transition-all duration-300 ${selectedDay === day
+                    ? "bg-[#2BACBE] text-white shadow-lg"
+                    : "bg-white text-gray-600 hover:bg-gray-100"
+                    }`}
+                >
+                  День {day}
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+
+
+
+        <div className="exercise-list mb-20">
+          {filteredExercises.length > 0 ? (
+            filteredExercises.map((item) => (
+              <div key={item.id_exercise} className="p-4 mb-4  hover:scale-105 transition duration-300 glass-morphism rounded-3xl border border-white/50 shadow-2xl overflow-hidden backdrop-blur-2xl relative">
+                <h3 className="text-sm">Упражнение {item.id_exercise}</h3>
+                <h3 className="text-xl font-semibold text-gray-600 mb-3">{item.exercise.title}</h3>
+
+                <div className="h-0.5 w-full bg-gray-200 my-5"></div>
+
+                <div className="flex gap-4 text-xs">
+                  <p>День: {item.day}</p>
+                  <span>·</span>
+                  <p>Позиция: {item.position}</p>
+                  <span>·</span>
+                  <p>Повторений: {item.repeats}</p>
+                </div>
+              </div>
+            ))
+          ) : (
+            <p>Нет упражнений для отображения</p>
+          )}
+        </div>
+      </div>
+
+
+      {/* <div className="mb-20">
 
-        className="bg-green-800 p-4 hover:scale-105 transition duration-300 text-white">Перейти на упражнение</div>
-        <h1>выводим текст</h1>
-         {/* Выводим данные пациента */}
         {pacientData ? (
           <pre>{JSON.stringify(pacientData, null, 2)}</pre>
         ) : (
           <p>Нет данных</p>
         )}
-      </div>
+      </div> */}
 
 
 

src/pages/Courses.tsx

@@ -110,6 +110,9 @@ export const Courses = () => {
     "from-sky-400 to-cyan-600"
   ];
 
+//item.exercise.title
+
+
   return (
     <div className="my-36 min-h-screen max-w-4xl mx-auto">
       <HeaderNav item='Курсы' text='все назначенные' />