Добавлены новые зависимости: "react-select" и "@floating-ui/core". Реализована локализация с использованием i18next, добавлены переводы для английского и русского языков. Обновлены компоненты для поддержки локализации, включая AppHeader, Attendance, Dashboard и другие. Улучшена логика отображения данных и взаимодействия с пользователем.

src/pages/course-list/course-card.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react'
 import dayjs from 'dayjs'
 import { Link as ConnectedLink, generatePath } from 'react-router-dom'
-import { getNavigationsValue } from '@brojs/cli'
+import { getNavigationValue } from '@brojs/cli'
 import {
   Box,
   CardHeader,
@@ -16,6 +16,7 @@ import {
   Tooltip,
   Spinner,
 } from '@chakra-ui/react'
+import { useTranslation } from 'react-i18next'
 
 import { api } from '../../__data__/api/api'
 import { ArrowUpIcon, LinkIcon } from '@chakra-ui/icons'
@@ -25,6 +26,8 @@ import { CourseDetails } from './course-details'
 export const CourseCard = ({ course }: { course: Course }) => {
   const [getLessonList, populatedCourse] = api.useLazyGetCourseByIdQuery()
   const [isOpened, setIsOpened] = useState(false)
+  const { t } = useTranslation()
+  
   useEffect(() => {
     if (isOpened) {
       getLessonList(course.id, true)
@@ -46,10 +49,10 @@ export const CourseCard = ({ course }: { course: Course }) => {
         <CardBody mt="16px">
           <Stack divider={<StackDivider />} spacing="8px">
             <Box as="span" textAlign="left">
-              {`Дата начала курса - ${dayjs(course.startDt).format('DD MMMM YYYYг.')}`}
+              {`${t('journal.pl.course.startDate')} - ${dayjs(course.startDt).format(t('journal.pl.lesson.dateFormat'))}`}
             </Box>
             <Box as="span" textAlign="left">
-              Количество занятий - {course.lessons.length}
+              {t('journal.pl.course.lessonCount')} - {course.lessons.length}
             </Box>
 
             {populatedCourse.isFetching && <Spinner />}
@@ -57,9 +60,9 @@ export const CourseCard = ({ course }: { course: Course }) => {
               <CourseDetails populatedCourse={populatedCourse.data} />
             )}
 
-            {getNavigationsValue('link.journal.attendance') && (
+            {getNavigationValue('link.journal.attendance') && (
               <Tooltip
-                label="На страницу с лекциями"
+                label={t('journal.pl.course.attendancePage')}
                 fontSize="12px"
                 top="16px"
               >
@@ -69,12 +72,12 @@ export const CourseCard = ({ course }: { course: Course }) => {
                   variant="outline"
                   colorScheme="blue"
                   to={generatePath(
-                    `${getNavigationsValue('journal.main')}${getNavigationsValue('link.journal.attendance')}`,
+                    `${getNavigationValue('journal.main')}${getNavigationValue('link.journal.attendance')}`,
                     { courseId: course.id },
                   )}
                 >
                   <Box mt={3}></Box>
-                  Посещаемость
+                  {t('journal.pl.course.attendance')}
                 </Button>
               </Tooltip>
             )}
@@ -87,17 +90,17 @@ export const CourseCard = ({ course }: { course: Course }) => {
           mt="16px"
           flexDirection={['column', 'row']}
         >
-          <Tooltip label="На страницу с лекциями" fontSize="12px" top="16px">
+          <Tooltip label={t('journal.pl.course.attendancePage')} fontSize="12px" top="16px">
             <Button
               leftIcon={<LinkIcon />}
               as={ConnectedLink}
               colorScheme="blue"
-              to={`${getNavigationsValue('journal.main')}/lessons-list/${course._id}`}
+              to={`${getNavigationValue('journal.main')}/lessons-list/${course._id}`}
             >
-              Открыть
+              {t('journal.pl.common.open')}
             </Button>
           </Tooltip>
-          <Tooltip label="Детали" fontSize="12px" top="16px">
+          <Tooltip label={t('journal.pl.course.details')} fontSize="12px" top="16px">
             <Button
               colorScheme="blue"
               mt={['16px', 0]}
@@ -107,11 +110,11 @@ export const CourseCard = ({ course }: { course: Course }) => {
                   transform={isOpened ? 'rotate(0)' : 'rotate(180deg)'}
                 />
               }
-              loadingText="Загрузка"
+              loadingText={t('journal.pl.common.loading')}
               isLoading={populatedCourse.isFetching}
               onClick={handleToggleOpene}
             >
-              {isOpened ? 'Закрыть' : 'Просмотреть детали'}
+              {isOpened ? t('journal.pl.close') : t('journal.pl.course.viewDetails')}
             </Button>
           </Tooltip>
         </ButtonGroup>