Refactor featured roadmap item

components/home/featured-roadmaps-list.tsx

@@ -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>
+    </>
+  );
+}

pages/index.tsx

@@ -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>
+          <FeaturedRoadmapsList
-          <SimpleGrid columns={[1, 2, 3]} spacing={['10px', '10px', '15px']} mb='40px'>
+            roadmaps={roadmaps.filter(roadmap => roadmap.type === 'role')}
-            {roadmaps.filter(roadmap => roadmap.type === 'role').map((roadmap: RoadmapType, counter: number) => (
+            title={'Role Based Roadmaps' }
-              <HomeRoadmapItem
-                isUpcoming={roadmap.isUpcoming}
-                url={`/${roadmap.id}`}
-                key={roadmap.id}
-                colorIndex={counter}
-                title={roadmap.featuredTitle}
-                isCommunity={roadmap.isCommunity}
-                subtitle={roadmap.featuredDescription}
           />
-            ))}
-          </SimpleGrid>
-
-          <Tag bg='gray.400' mb={4}>Tool Based Skill Trees</Tag>
 
-          <SimpleGrid columns={[1, 2, 3]} spacing={['10px', '10px', '15px']} mb='30px'>
+          <FeaturedRoadmapsList
-            {roadmaps.filter(roadmap => roadmap.type === 'tool').map((roadmap: RoadmapType, counter: number) => (
+            roadmaps={roadmaps.filter(roadmap => roadmap.type === 'tool')}
-              <HomeRoadmapItem
+            title={'Tool Based Skill Trees' }
-                isUpcoming={roadmap.isUpcoming}
-                url={`/${roadmap.id}`}
-                key={roadmap.id}
-                colorIndex={counter}
-                title={roadmap.featuredTitle}
-                isCommunity={roadmap.isCommunity}
-                subtitle={roadmap.featuredDescription}
           />
-            ))}
-          </SimpleGrid>
         </Container>
       </Box>