34 lines
919 B
TypeScript
34 lines
919 B
TypeScript
import React from 'react'
|
|
import { Box, Flex, Heading, Divider, VStack } from '@chakra-ui/react'
|
|
import { Course } from '../../../__data__/model'
|
|
import { CourseCard } from '../course-card'
|
|
|
|
interface YearGroupProps {
|
|
year: string
|
|
courses: Course[]
|
|
colorMode: string
|
|
}
|
|
|
|
/**
|
|
* Компонент для отображения курсов одного года
|
|
*/
|
|
export const YearGroup = ({ year, courses, colorMode }: YearGroupProps) => {
|
|
return (
|
|
<Box mb={6}>
|
|
<Flex align="center" mb={3}>
|
|
<Heading size="md" color={colorMode === 'dark' ? 'blue.300' : 'blue.600'}>
|
|
{year}
|
|
</Heading>
|
|
<Divider ml={4} flex="1" />
|
|
</Flex>
|
|
<VStack as="ul" align="stretch" spacing={{ base: 3, md: 4 }}>
|
|
{courses.map((course) => (
|
|
<CourseCard
|
|
key={course.id}
|
|
course={course}
|
|
/>
|
|
))}
|
|
</VStack>
|
|
</Box>
|
|
)
|
|
}
|