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.
39 lines
1.0 KiB
39 lines
1.0 KiB
--- |
|
import type { RoadmapFileType } from '../lib/roadmap'; |
|
|
|
export interface Props { |
|
url: string; |
|
title: string; |
|
description: string; |
|
isNew: boolean; |
|
} |
|
|
|
const { url, title, description, isNew } = Astro.props; |
|
--- |
|
|
|
<a |
|
href={url} |
|
class='relative flex h-full flex-col rounded-md border border-gray-200 bg-white p-2.5 hover:border-gray-400 sm:rounded-lg sm:p-5' |
|
> |
|
<span |
|
class='text-md mb-0 font-semibold text-gray-900 hover:text-black sm:mb-1.5 sm:text-xl' |
|
> |
|
{title} |
|
</span> |
|
<span |
|
class='hidden text-sm leading-normal text-gray-400 sm:block' |
|
set:html={description} |
|
/> |
|
|
|
{ |
|
isNew && ( |
|
<span class='flex items-center gap-1.5 absolute bottom-1.5 right-1 rounded-sm text-xs font-semibold uppercase text-purple-500 sm:px-1.5'> |
|
<span class='relative flex h-2 w-2'> |
|
<span class='absolute inline-flex h-full w-full animate-ping rounded-full bg-purple-400 opacity-75' /> |
|
<span class='relative inline-flex h-2 w-2 rounded-full bg-purple-500' /> |
|
</span> |
|
New |
|
</span> |
|
) |
|
} |
|
</a>
|
|
|