info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-09-02 22:02:39 +02:00
Code Issues Releases Wiki Activity

Refactor featured roadmap item

Browse Source
This commit is contained in:
Kamran Ahmed
2022-08-18 15:44:03 +04:00
parent 6ba2506ba0
commit 95e4cef2e4
2 changed files with 41 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
components/home/featured-roadmaps-list.tsx Normal file
View File

@@ -0,0 +1,32 @@
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>
</>
);
}

38
pages/index.tsx
View File

@@ -12,6 +12,7 @@ import { getAllGuides, GuideType } from '../lib/guide';
import { getAllVideos, VideoType } from '../lib/video';
import Helmet from '../components/helmet';
import { PageWrapper } from '../components/page-wrapper';
import { FeaturedRoadmapsList } from '../components/home/featured-roadmaps-list';
type HomeProps = {
roadmaps: RoadmapType[];
@@ -46,36 +47,15 @@ export default function Home(props: HomeProps) {
</Text>
</Box>
<Tag bg='gray.400' mb={4}>Role Based Roadmaps</Tag>
<SimpleGrid columns={[1, 2, 3]} spacing={['10px', '10px', '15px']} mb='40px'>
{roadmaps.filter(roadmap => roadmap.type === 'role').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>
<FeaturedRoadmapsList
roadmaps={roadmaps.filter(roadmap => roadmap.type === 'role')}
title={'Role Based Roadmaps' }
/>
<Tag bg='gray.400' mb={4}>Tool Based Skill Trees</Tag>
<SimpleGrid columns={[1, 2, 3]} spacing={['10px', '10px', '15px']} mb='30px'>
{roadmaps.filter(roadmap => roadmap.type === 'tool').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>
<FeaturedRoadmapsList
roadmaps={roadmaps.filter(roadmap => roadmap.type === 'tool')}
title={'Tool Based Skill Trees' }
/>
</Container>
</Box>