developer-roadmap/src/components/GridItem.astro

---
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 group hover:bg-gray-50 flex h-full flex-col rounded-md border border-gray-200 bg-white p-2.5 hover:border-gray-400/50 sm:rounded-lg sm:p-5'
>
  <span
    class='font-semibold text-md mb-0 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 group-hover:text-gray-500'
    >{description}</span
  >

  {
    isNew && (
      <span class='absolute bottom-1 right-1 rounded-sm bg-yellow-300 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900 sm:px-1.5'>
        New
      </span>
    )
  }
</a>