developer-roadmap/src/components/VideoHeader.astro

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

export interface Props {
  video: VideoFileType;
}

const { video } = Astro.props;
const { frontmatter } = video;
const { author } = frontmatter;
---

<div class='bg-white border-b py-5 sm:py-12'>
  <div class='container text-left sm:text-center'>
    <p
      class='text-gray-400 hidden sm:flex items-center justify-start sm:justify-center'
    >
      <a
        href={author.url}
        target='_blank'
        class='font-medium hover:text-gray-600 inline-flex items-center hover:underline'
      >
        <img
          alt={author.name}
          src={author.imageUrl}
          class='w-5 h-5 inline mr-2 rounded-full'
        />
        {author.name}
      </a>
      <span class='mx-1.5'>&middot;</span>
      <span class='capitalize'>Illustrated Video</span>
    </p>
    <h1 class='text-2xl sm:text-5xl my-0 sm:my-3.5 font-bold'>
      {frontmatter.title}
    </h1>
    <p class='hidden sm:block text-gray-400 text-md'>
      {frontmatter.description}
    </p>
  </div>
</div>