99 lines
2.3 KiB
TypeScript
99 lines
2.3 KiB
TypeScript
import React from 'react'
|
|
import dayjs from 'dayjs'
|
|
import {
|
|
Tr,
|
|
Td,
|
|
Box,
|
|
Flex,
|
|
Text,
|
|
useBreakpointValue,
|
|
} from '@chakra-ui/react'
|
|
|
|
import { Lesson } from '../../../__data__/model'
|
|
|
|
import { Item } from './item'
|
|
|
|
type LessonItemProps = {
|
|
date: string
|
|
lessons: Lesson[]
|
|
isTeacher: boolean
|
|
courseId: string
|
|
setlessonToDelete(lesson: Lesson): void
|
|
setEditLesson?(lesson: Lesson): void
|
|
}
|
|
|
|
export const LessonItems: React.FC<LessonItemProps> = ({
|
|
date,
|
|
lessons,
|
|
isTeacher,
|
|
courseId,
|
|
setlessonToDelete,
|
|
setEditLesson,
|
|
}) => {
|
|
// Использование useBreakpointValue для определения мобильного отображения
|
|
const isMobile = useBreakpointValue({ base: true, md: false })
|
|
|
|
// Мобильное отображение
|
|
if (isMobile) {
|
|
return (
|
|
<>
|
|
{date && (
|
|
<Box
|
|
p={3}
|
|
mb={2}
|
|
bg="gray.100"
|
|
borderRadius="md"
|
|
_dark={{ bg: "gray.700" }}
|
|
>
|
|
<Text fontWeight="bold">{dayjs(date).format('DD MMMM YYYY')}</Text>
|
|
</Box>
|
|
)}
|
|
{lessons.map((lesson) => (
|
|
<Box
|
|
key={lesson.id}
|
|
p={3}
|
|
mb={2}
|
|
borderRadius="md"
|
|
boxShadow="sm"
|
|
borderLeft="4px solid"
|
|
borderLeftColor="cyan.500"
|
|
>
|
|
<Item
|
|
{...lesson}
|
|
setlessonToDelete={() => setlessonToDelete(lesson)}
|
|
setEditLesson={setEditLesson ? () => setEditLesson(lesson) : undefined}
|
|
courseId={courseId}
|
|
isTeacher={isTeacher}
|
|
isMobile={true}
|
|
/>
|
|
</Box>
|
|
))}
|
|
</>
|
|
)
|
|
}
|
|
|
|
// Стандартное отображение для планшетов и больших экранов
|
|
return (
|
|
<>
|
|
{date && (
|
|
<Tr>
|
|
<Td colSpan={isTeacher ? 5 : 3}>
|
|
{dayjs(date).format('DD MMMM YYYY')}
|
|
</Td>
|
|
</Tr>
|
|
)}
|
|
{lessons.map((lesson) => (
|
|
<Item
|
|
key={lesson.id}
|
|
{...lesson}
|
|
setlessonToDelete={() => setlessonToDelete(lesson)}
|
|
setEditLesson={setEditLesson ? () => setEditLesson(lesson) : undefined}
|
|
courseId={courseId}
|
|
isTeacher={isTeacher}
|
|
isMobile={false}
|
|
/>
|
|
))}
|
|
</>
|
|
)
|
|
}
|