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: 'React Native', description: 'Step by step guide to become a React Native Developer', id: 'react-native' }, { type: 'Skill Based', title: 'TypeScript', description: 'Step by step guide to learn TypeScript in 2022', id: 'typescript' }, { type: 'Skill Based', title: 'Rust', description: 'Step by step guide to learn Rust in 2022', id: 'rust' }, ]; export function FeaturedRoadmapsList(props: FeaturedRoadmapsListProps) { const { roadmaps, title } = props; return ( <> {title} <> {roadmaps.map((roadmap: RoadmapType, counter: number) => ( ))} {upcomingRoadmaps .filter(roadmap => roadmap.type === title) .map((roadmap, counter) => ( ))} ); }