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.
 
 
 
 
 

67 lines
1.9 KiB

import { RoadmapType } from '../../lib/roadmap';
import { SimpleGrid, Tag } from '@chakra-ui/react';
import { HomeRoadmapItem } from '../roadmap/home-roadmap-item';
type FeaturedRoadmapsListProps = {
roadmaps: RoadmapType[];
title: string;
};
export const upcomingRoadmaps = [
{
type: 'Role Based',
title: 'Software Architect',
description: 'Roadmap to become a modern Software Architect',
id: 'software-architect'
},
{
type: 'Role Based',
title: 'React Native',
description: 'Step by step guide to become a React Native Developer',
id: 'react-native'
},
{
type: 'Skill Based',
title: 'Design System',
description: 'Flowchart to help you plan and build your Design System',
id: 'design-system'
}
];
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}
isNew={roadmap.isNew}
subtitle={roadmap.featuredDescription}
/>
))}
{upcomingRoadmaps
.filter(roadmap => roadmap.type === title)
.map((roadmap, counter) => (
<HomeRoadmapItem
isUpcoming={true}
url={`/upcoming?id=${roadmap.id}`}
key={`upcoming-${roadmap.id}`}
colorIndex={9}
title={roadmap.title}
subtitle={roadmap.description}
/>
))}
</>
</SimpleGrid>
</>
);
}