доработка адаптивности тегов с днями на странице курса

src/pages/CourseExercises.tsx

@@ -1,6 +1,5 @@
 "use client"
 
-import React from 'react';
 
 import { useState, useEffect } from "react";
 import { useParams, useHistory, useLocation } from "react-router-dom";
@@ -37,20 +36,14 @@ export const CourseExercises = () => {
   const history = useHistory();
   const { id } = useParams<{ id: string }>();
 
-
   const location = useLocation<{ course?: Course }>();
   const course = location.state?.course;
 
-
-  // const [pacientData, setPacientData] = useState(null);
-
   const [course_exercises, setExercises] = useState<CourseExercises[]>([]);
   const [selectedDay, setSelectedDay] = useState<number | null>(null);
 
   const token = localStorage.getItem('authToken');
 
-
-
   useEffect(() => {
     console.log(token)
     if (!token) {
@@ -95,6 +88,25 @@ export const CourseExercises = () => {
     }
   }, [course_exercises]);
 
+  //Этот код — это React-хук useEffect, который выполняет определённый блок кода при изменении зависимостей. Давайте разберём его подробно:
+  //Он следит за изменением массива course_exercises. Когда course_exercises обновляется (например, загружается с сервера или изменяется), он проверяет:
+
+  // Есть ли в массиве упражнения (course_exercises.length > 0)
+  // И выбран ли уже день (selectedDay === null)
+  // Если оба условия выполняются, то:
+
+  // Устанавливает selectedDay в значение day первого элемента массива course_exercises[0].
+  // Почему это нужно?
+  // Это логика инициализации:
+
+  // Когда данные о упражнениях загружены впервые, и пользователь ещё не выбрал день (selectedDay равен null),
+  // автоматически выбирается первый день из загруженных упражнений.
+  // Почему [course_exercises] в конце?
+  // Это массив зависимостей. Он говорит React:
+
+  // Запускать этот эффект только тогда, когда course_exercises изменится.
+
+  // Без этого эффекта он бы запускался при каждом рендере, что нежелательно.
 
 
   const uniqueDays = Array.from(new Set(course_exercises.map(ex => ex.day))).sort((a, b) => a - b);
@@ -115,9 +127,6 @@ export const CourseExercises = () => {
 
 
 
-  //тут выводим дни из БД 
-
-
   return (
     <div className="my-36 min-h-screen max-w-4xl mx-auto">
       <HeaderNav item={course?.title ?? 'Название курса'} text={'курс'} />
@@ -125,26 +134,25 @@ export const CourseExercises = () => {
 Если course не null и не undefined, то взять его свойство title, иначе — вернуть undefined*/}
       <div className="px-6 mb-8">
         {/* Заголовок секции */}
-        <div className="flex flex-col sm:flex-row items-center justify-between mb-6">
+        <div className="flex flex-col sm:flex-row justify-between content-center mb-6">
           <h2 className="text-xl font-black text-[#5F5C5C]">Упражнения</h2>
           <span className="text-sm text-gray-500">Количество упражнений: {course_exercises.length}</span>
         </div>
 
-
         {/* <p>{JSON.stringify(course_exercises)}</p> */}
 
 
         {/* Кнопки выбора дня */}
         {days.length > 1 && (
           <div className="mb-6">
-            <div className="flex space-x-2 overflow-x-auto pb-2">
+            <div className="flex flex-wrap gap-2 overflow-x-auto pb-2">
               {days.map((day, index) => (
                 <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
+                  className={`flex-shrink-0 p-4 py-2 rounded-full text-sm font-semibold transition-all duration-300 inline-block ${selectedDay === day
                     ? "bg-[#2BACBE] text-white shadow-lg"
                     : "bg-white text-gray-600 hover:bg-gray-100"
                     }`}
@@ -191,18 +199,6 @@ export const CourseExercises = () => {
         </div>
       </div>
 
-
-      {/* <div className="mb-20">
-
-        {pacientData ? (
-          <pre>{JSON.stringify(pacientData, null, 2)}</pre>
-        ) : (
-          <p>Нет данных</p>
-        )}
-      </div> */}
-
-
-
       <BottomNavigation />
     </div>