developer-roadmap/src/components/GuideListItem.astro

---
import type { GuideFileType } from '../lib/guide';
import { replaceVariables } from '../lib/markdown';

export interface Props {
  guide: GuideFileType;
}

const { guide } = Astro.props;
const { frontmatter, id } = guide;
---

<a
  class:list={[
    'text-md group block flex items-center justify-between border-b py-2 text-gray-600 no-underline hover:text-blue-600',
  ]}
  href={frontmatter.excludedBySlug
    ? frontmatter.excludedBySlug
    : `/guides/${id}`}
>
  <span
    class='text-sm transition-transform group-hover:translate-x-2 md:text-base'
  >
    {replaceVariables(frontmatter.title)}

    {
      frontmatter.isNew && (
        <span class='ml-1.5 rounded-sm bg-green-300 px-1.5 py-0.5 text-xs font-medium uppercase text-green-900'>
          New
          <span class='hidden sm:inline'>
            &middot;
            {new Date(frontmatter.date).toLocaleString('default', {
              month: 'long',
            })}
          </span>
        </span>
      )
    }
  </span>
  <span class='hidden text-xs capitalize text-gray-500 sm:block'>
    {frontmatter.type}
  </span>

  <span class='block text-xs text-gray-400 sm:hidden'> &raquo;</span>
</a>