Function VideoItem

website/src/components/example-generations.tsx:1–40

({
  src,
  poster,
  title,
  repoUrl,
  commits,
}: {
  src: string;
  poster: string;
  title: string;
  repoUrl: string;
  commits: string;
})

const VideoItem = ({
  src,
  poster,
  title,
  repoUrl,
  commits,
}: {
  src: string;
  poster: string;
  title: string;
  repoUrl: string;
  commits: string;
}) => (
  <div className="flex flex-col">
    <div className="rounded-xl border-[1.5px] border-white/10 bg-black overflow-hidden aspect-[16/10]">
      <video
        className="w-full h-full object-cover"
        controls
        muted
        playsInline
        preload="metadata"
        poster={poster}
      >
        <source src={src} type="video/mp4" />
        Your browser does not support the video tag.
      </video>
    </div>
    <div className="mt-3 flex justify-between items-center">
      <a
        href={repoUrl}
        target="_blank"
        rel="noopener noreferrer"
        className="font-medium text-transparent bg-clip-text bg-gradient-to-t from-blue-400 to-blue-600 hover:from-blue-300 hover:to-blue-500 transition-all duration-300"
      >
        {title}
      </a>
      <span className="text-sm text-gray-400">{commits} commits</span>
    </div>
  </div>
);

const videos = [
  {