#13 QR code centered

src/pages/lesson-details.tsx

@@ -3,16 +3,22 @@ import { useParams, Link } from 'react-router-dom'
 import dayjs from 'dayjs'
 import QRCode from 'qrcode'
 import { getConfigValue, getNavigationsValue } from '@ijl/cli'
-import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from '@chakra-ui/react'
+import {
+  Box,
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  Container,
+  HStack,
+  VStack,
+  Heading,
+} from '@chakra-ui/react'
 
 import {
-  MainWrapper,
-  StartWrapper,
   QRCanvas,
   LessonItem,
   Lessonname,
   AddMissedButton,
-  Wrapper,
   UnorderList,
 } from './style'
 import { api } from '../__data__/api/api'
@@ -80,8 +86,8 @@ const LessonDetail = () => {
   }, [accessCode?.body, AllStudents.data])
 
   return (
-    <MainWrapper>
-      <StartWrapper>
+    <Container maxW="container.xl" centerContent px="200">
+      <VStack align="left">
         <Breadcrumb>
           <BreadcrumbItem>
             <BreadcrumbLink as={Link} to={getNavigationsValue('journal.main')}>
@@ -102,17 +108,20 @@ const LessonDetail = () => {
             <BreadcrumbLink href="#">Лекция</BreadcrumbLink>
           </BreadcrumbItem>
         </Breadcrumb>
-
-        <h1 style={{ width: '70%' }}>
-          Тема занятия - {accessCode?.body?.lesson?.name}
-        </h1>
-        <span style={{ display: 'flex' }}>
+        <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}` : ''}{' '}
           человек
-        </span>
-        <Wrapper>
+        </Box>
+      </VStack>
+      <HStack spacing="8">
         <a href={userUrl}>
           <QRCanvas ref={canvRef} />
         </a>
@@ -132,9 +141,8 @@ const LessonDetail = () => {
             </LessonItem>
           ))}
         </UnorderList>
-        </Wrapper>
-      </StartWrapper>
-    </MainWrapper>
+      </HStack>
+    </Container>
   )
 }
 

stubs/mocks/lessons/access-code/create/success.json

@@ -4,7 +4,7 @@
       "expires": "2024-03-01T07:52:16.374Z",
       "lesson": {
           "_id": "65df996c584b172772d69706",
-          "name": "ВВЕДЕНИЕ В ВЕБ-РАЗРАБОТКУ. ИНСТРУМЕНТАРИЙ, ОБЗОР ВЕБ-ТЕХНОЛОГИЙ",
+          "name": "ВВОДНАЯ ПО JS.ПРИМЕНЕНИЕ И СПОСОБЫ ПОДКЛЮЧЕНИЯ НА СТРАНИЦЕ. LET, CONST. БАЗОВЫЕ ТИПЫ ДАННЫХ, ПРИВЕДЕНИЕ ТИПОВ. ПЕРЕМЕННЫЕ, ОБЛАСТЬ ВИДИМОСТИ ПЕРЕМЕННЫХ",
           "students": [
               {
                   "sub": "f62905b1-e223-40ca-910f-c8d84c6137c1",

stubs/mocks/lessons/access-code/get/success.json

@@ -20,7 +20,7 @@
           "expires": "2024-03-01T07:52:09.233Z",
           "lesson": {
               "_id": "65df996c584b172772d69706",
-              "name": "ВВЕДЕНИЕ В ВЕБ-РАЗРАБОТКУ. ИНСТРУМЕНТАРИЙ, ОБЗОР ВЕБ-ТЕХНОЛОГИЙ",
+              "name": "ВВОДНАЯ ПО JS.ПРИМЕНЕНИЕ И СПОСОБЫ ПОДКЛЮЧЕНИЯ НА СТРАНИЦЕ. LET, CONST. БАЗОВЫЕ ТИПЫ ДАННЫХ, ПРИВЕДЕНИЕ ТИПОВ. ПЕРЕМЕННЫЕ, ОБЛАСТЬ ВИДИМОСТИ ПЕРЕМЕННЫХ",
               "students": [],
               "date": "2024-02-28T20:37:00.057Z",
               "created": "2024-02-28T20:37:00.057Z",