developer-roadmap/src/components/FeaturedItems/FeaturedItem.astro

---
import AstroIcon from '../AstroIcon.astro';
import { MarkFavorite } from './MarkFavorite';
export interface FeaturedItemType {
  isUpcoming?: boolean;
  isNew?: boolean;
  url: string;
  text: string;
  allowBookmark?: boolean;
}

export interface Props extends FeaturedItemType {}

const {
  isUpcoming = false,
  isNew = false,
  text,
  url,
  allowBookmark = true,
} = 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='relative z-20 text-slate-400'>
    {text}
  </span>

  {
    allowBookmark && (
      <MarkFavorite
        resourceId={url.split('/').pop()!}
        resourceType={
          url.includes('best-practices') ? 'best-practice' : 'roadmap'
        }
        client:only='react'
      />
    )
  }

  {
    isNew && (
      <span class='absolute bottom-1.5 right-2 flex items-center rounded-br rounded-tl text-xs font-medium text-purple-300'>
        <span class='flex h-2 w-2'>
          <span class='absolute inline-flex h-2 w-2 animate-ping rounded-full bg-purple-400 opacity-75' />
          <span class='relative inline-flex h-2 w-2 rounded-full bg-purple-500' />
        </span>
      </span>
    )
  }

  {
    isUpcoming && (
      <span class='absolute bottom-1.5 right-2 flex items-center rounded-br rounded-tl text-xs font-medium text-slate-500'>
        <span class='mr-1.5 flex h-2 w-2'>
          <span class='absolute inline-flex h-2 w-2 animate-ping rounded-full bg-slate-500 opacity-75' />
          <span class='relative inline-flex h-2 w-2 rounded-full bg-slate-600' />
        </span>
        Upcoming
      </span>
    )
  }
  <span
    data-progress
    class='absolute bottom-0 left-0 top-0 z-10 w-0 bg-[#172a3a] transition-[width] duration-300'
  ></span>
</a>