(#16) Layout списка лекций как таблица

src/pages/lesson-details.tsx

@@ -20,6 +20,7 @@ import {
   Lessonname,
   AddMissedButton,
   UnorderList,
+  BreadcrumbsWrapper,
 } from './style'
 import { api } from '../__data__/api/api'
 import { User } from '../__data__/model'
@@ -86,8 +87,8 @@ const LessonDetail = () => {
   }, [accessCode?.body, AllStudents.data])
 
   return (
-    <Container maxW="container.xl" centerContent px="200">
-      <VStack align="left">
+    <>
+      <BreadcrumbsWrapper>
         <Breadcrumb>
           <BreadcrumbItem>
             <BreadcrumbLink as={Link} to={getNavigationsValue('journal.main')}>
@@ -108,41 +109,45 @@ const LessonDetail = () => {
             <BreadcrumbLink href="#">Лекция</BreadcrumbLink>
           </BreadcrumbItem>
         </Breadcrumb>
-        <Heading as='h3' mt='4' mb='3'>
-          Тема занятия: 
-        </Heading>
-        <Box as="span">
-          {accessCode?.body?.lesson?.name}
-        </Box>
-        <Box as='span'>
-          {dayjs(accessCode?.body?.lesson?.date).format('DD MMMM YYYYг.')}{' '}
-          Отмечено - {accessCode?.body?.lesson?.students?.length}{' '}
-          {AllStudents.isSuccess ? `/ ${AllStudents?.data?.body?.length}` : ''}{' '}
-          человек
-        </Box>
-      </VStack>
-      <HStack spacing="8">
-        <a href={userUrl}>
-          <QRCanvas ref={canvRef} />
-        </a>
-        <UnorderList>
-          {studentsArr.map((student) => (
-            <LessonItem key={student.sub} warn={!student.present}>
-              <Lessonname>
-                {student.name || student.preferred_username}{' '}
-                {!student.present && (
-                  <AddMissedButton
-                    onClick={() => manualAdd({ lessonId, user: student })}
-                  >
-                    add
-                  </AddMissedButton>
-                )}
-              </Lessonname>
-            </LessonItem>
-          ))}
-        </UnorderList>
-      </HStack>
-    </Container>
+      </BreadcrumbsWrapper>
+      <Container maxW="container.xl" centerContent px="200">
+        <VStack align="left">
+          <Heading as="h3" mt="4" mb="3">
+            Тема занятия:
+          </Heading>
+          <Box as="span">{accessCode?.body?.lesson?.name}</Box>
+          <Box as="span">
+            {dayjs(accessCode?.body?.lesson?.date).format('DD MMMM YYYYг.')}{' '}
+            Отмечено - {accessCode?.body?.lesson?.students?.length}{' '}
+            {AllStudents.isSuccess
+              ? `/ ${AllStudents?.data?.body?.length}`
+              : ''}{' '}
+            человек
+          </Box>
+        </VStack>
+        <HStack spacing="8">
+          <a href={userUrl}>
+            <QRCanvas ref={canvRef} />
+          </a>
+          <UnorderList>
+            {studentsArr.map((student) => (
+              <LessonItem key={student.sub} warn={!student.present}>
+                <Lessonname>
+                  {student.name || student.preferred_username}{' '}
+                  {!student.present && (
+                    <AddMissedButton
+                      onClick={() => manualAdd({ lessonId, user: student })}
+                    >
+                      add
+                    </AddMissedButton>
+                  )}
+                </Lessonname>
+              </LessonItem>
+            ))}
+          </UnorderList>
+        </HStack>
+      </Container>
+    </>
   )
 }