developer-roadmap/src/components/VideoListItem.astro

---
import type { VideoFileType } from '../lib/video';

export interface Props {
  video: VideoFileType;
}

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

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

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

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