developer-roadmap/src/components/FeaturedVideos.astro

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

export interface Props {
  heading: string;
  videos: VideoFileType[];
}

const { heading, videos } = Astro.props;
---

<div class='container'>
  <h1 class='text-2xl sm:text-3xl font-bold block'>{heading}</h1>

  <div class='mt-3 sm:my-5'>
    {videos.map((video) => <VideoListItem video={video} />)}
  </div>

  <a
    href='/videos'
    class='hidden sm:inline transition-colors py-2 px-3 text-xs font-medium rounded-full bg-gradient-to-r from-slate-600 to-black hover:from-blue-600 hover:to-blue-800 text-white'
  >
    View All Videos &rarr;
  </a>

  <div class='block sm:hidden mt-3'>
    <a
      href='/videos'
      class='text-sm font-regular block p-2 border border-black text-black rounded-md text-center hover:bg-black hover:text-gray-50'
    >
      View All Videos &nbsp;&rarr;
    </a>
  </div>
</div>