Roadmap to becoming a developer in 2022
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

33 lines
948 B

import { RoadmapType } from '../../lib/roadmap';
import { Box, SimpleGrid, Tag } from '@chakra-ui/react';
import { HomeRoadmapItem } from '../roadmap/home-roadmap-item';
type FeaturedRoadmapsListProps = {
roadmaps: RoadmapType[];
title: string;
};
export function FeaturedRoadmapsList(props: FeaturedRoadmapsListProps) {
const { roadmaps, title } = props;
return (
<>
<Tag bg='gray.400' mb={4}>{title}</Tag>
<SimpleGrid columns={[1, 2, 3]} spacing={['10px', '10px', '15px']} mb='40px'>
{roadmaps.map((roadmap: RoadmapType, counter: number) => (
<HomeRoadmapItem
isUpcoming={roadmap.isUpcoming}
url={`/${roadmap.id}`}
key={roadmap.id}
colorIndex={counter}
title={roadmap.featuredTitle}
isCommunity={roadmap.isCommunity}
subtitle={roadmap.featuredDescription}
/>
))}
</SimpleGrid>
</>
);
}