developer-roadmap/src/components/GuideListItem.astro

---
import type { GuideFileType, GuideFrontmatter } from '../lib/guide';
import { type QuestionGroupType } from '../lib/question-group';

export interface Props {
  guide: GuideFileType | QuestionGroupType;
}

function isQuestionGroupType(
  guide: GuideFileType | QuestionGroupType,
): guide is QuestionGroupType {
  return (guide as QuestionGroupType).questions !== undefined;
}

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

let pageUrl = '';
let guideType = '';

if (isQuestionGroupType(guide)) {
  pageUrl = `/questions/${id}`;
  guideType = 'Questions';
} else {
  const excludedBySlug = (frontmatter as GuideFrontmatter).excludedBySlug;
  pageUrl = excludedBySlug ? excludedBySlug : `/guides/${id}`;
  guideType = (frontmatter as GuideFrontmatter).type;
}
---

<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={pageUrl}
>
  <span
    class='text-sm transition-transform group-hover:translate-x-2 md:text-base'
  >
    {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'>
    {guideType}
  </span>

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