computer-scienceangular-roadmapbackend-roadmapblockchain-roadmapdba-roadmapdeveloper-roadmapdevops-roadmapfrontend-roadmapgo-roadmaphactoberfestjava-roadmapjavascript-roadmapnodejs-roadmappython-roadmapqa-roadmapreact-roadmaproadmapstudy-planvue-roadmapweb3-roadmap
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.
42 lines
1.3 KiB
42 lines
1.3 KiB
--- |
|
import { getRoadmapsByIds, RoadmapFrontmatter } from '../lib/roadmap'; |
|
|
|
export interface Props { |
|
roadmap: RoadmapFrontmatter; |
|
} |
|
|
|
const { roadmap } = Astro.props; |
|
|
|
const relatedRoadmaps = roadmap.relatedRoadmaps || []; |
|
if (!relatedRoadmaps.length) { |
|
return null; |
|
} |
|
|
|
const relatedRoadmapDetails = await getRoadmapsByIds(relatedRoadmaps); |
|
--- |
|
|
|
<div class='border-t bg-gray-100'> |
|
<div class='container'> |
|
<div class='flex justify-between relative -top-5'> |
|
<h1 class='text-md font-medium py-1 px-3 border bg-white rounded-md'>Related Roadmaps</h1> |
|
<a href='/roadmaps' class='text-md font-medium py-1 px-3 border bg-white rounded-md hover:bg-gray-50'> |
|
<span class='hidden sm:inline'>All Roadmaps →</span> |
|
<span class='inline sm:hidden'>More →</span> |
|
</a> |
|
</div> |
|
|
|
<div class='flex flex-col gap-1 pb-8'> |
|
{ |
|
relatedRoadmapDetails.map((relatedRoadmap) => ( |
|
<a |
|
href={`/${relatedRoadmap.id}`} |
|
class='py-2 px-3.5 bg-white border rounded-md hover:bg-gray-50 flex flex-col sm:flex-row gap-0.5 sm:gap-0' |
|
> |
|
<span class='font-medium inline-block min-w-[150px]'>{relatedRoadmap.frontmatter.briefTitle}</span> |
|
<span class='text-gray-500'>{relatedRoadmap.frontmatter.briefDescription}</span> |
|
</a> |
|
)) |
|
} |
|
</div> |
|
</div> |
|
</div>
|
|
|