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.
50 lines
1.4 KiB
50 lines
1.4 KiB
--- |
|
export interface FeaturedItemType { |
|
isUpcoming?: boolean; |
|
isNew?: boolean; |
|
url: string; |
|
text: string; |
|
} |
|
|
|
export interface Props extends FeaturedItemType {} |
|
|
|
const { isUpcoming = false, isNew = false, text, url } = Astro.props; |
|
--- |
|
|
|
<a |
|
class:list={[ |
|
'group border border-slate-800 bg-slate-900 p-2.5 sm:p-3.5 block no-underline rounded-lg relative text-slate-400 font-regular text-md hover:border-slate-600 hover:text-slate-100 overflow-hidden', |
|
{ |
|
'opacity-50': isUpcoming, |
|
}, |
|
]} |
|
href={url} |
|
> |
|
<span class='text-slate-400 relative z-20'> |
|
{text} |
|
</span> |
|
|
|
{ |
|
isNew && ( |
|
<span class='absolute bottom-1.5 right-2 text-xs font-medium rounded-br rounded-tl text-purple-300 flex items-center'> |
|
<span class='flex h-2 w-2 mr-1.5'> |
|
<span class='animate-ping absolute inline-flex h-2 w-2 rounded-full bg-purple-400 opacity-75' /> |
|
<span class='relative inline-flex rounded-full h-2 w-2 bg-purple-500' /> |
|
</span> |
|
New |
|
</span> |
|
) |
|
} |
|
|
|
{ |
|
isUpcoming && ( |
|
<span class='absolute bottom-1.5 right-2 text-xs font-medium rounded-br rounded-tl text-slate-500 flex items-center'> |
|
<span class='flex h-2 w-2 mr-1.5'> |
|
<span class='animate-ping absolute inline-flex h-2 w-2 rounded-full bg-slate-500 opacity-75' /> |
|
<span class='relative inline-flex rounded-full h-2 w-2 bg-slate-600' /> |
|
</span> |
|
Upcoming |
|
</span> |
|
) |
|
} |
|
</a>
|
|
|