diff --git a/components/home/featured-roadmaps-list.tsx b/components/home/featured-roadmaps-list.tsx index 8d350f6bf..2b9952ee0 100644 --- a/components/home/featured-roadmaps-list.tsx +++ b/components/home/featured-roadmaps-list.tsx @@ -5,7 +5,6 @@ import { HomeRoadmapItem } from '../roadmap/home-roadmap-item'; type FeaturedRoadmapsListProps = { roadmaps: RoadmapType[]; title: string; - }; export const upcomingRoadmaps = [ diff --git a/components/related-roadmaps.tsx b/components/related-roadmaps.tsx new file mode 100644 index 000000000..4600babb9 --- /dev/null +++ b/components/related-roadmaps.tsx @@ -0,0 +1,40 @@ +import { Badge, Box, Button, Container, Link, Stack, Text } from '@chakra-ui/react'; +import { RoadmapType } from '../lib/roadmap'; + +type RelatedRoadmapsProps = { + roadmaps: RoadmapType[]; +}; + +export function RelatedRoadmaps(props: RelatedRoadmapsProps) { + const { roadmaps } = props; + if (!roadmaps.length) { + return null; + } + + return ( + + + + + Other Related Roadmaps + + + + + + + { roadmaps.map(roadmap => ( + + { roadmap.featuredTitle } + { roadmap.featuredDescription } + + ))} + + + + ); +} diff --git a/pages/[roadmap]/index.tsx b/pages/[roadmap]/index.tsx index b3feeb9df..8447b81b2 100644 --- a/pages/[roadmap]/index.tsx +++ b/pages/[roadmap]/index.tsx @@ -10,6 +10,7 @@ import { RoadmapPageHeader } from '../../components/roadmap/roadmap-page-header' import { InteractiveRoadmapRenderer } from './interactive'; import { FreeSignUp, SIGNUP_EMAIL_INPUT_NAME, SIGNUP_FORM_ACTION } from '../signup'; import { BellIcon, EmailIcon } from '@chakra-ui/icons'; +import { RelatedRoadmaps } from '../../components/related-roadmaps'; type RoadmapProps = { roadmap: RoadmapType; @@ -88,13 +89,13 @@ export default function Roadmap(props: RoadmapProps) { keywords={roadmap?.seo.keywords || []} roadmap={roadmap} /> - + - +