{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "video-card",
  "title": "Video Card",
  "description": "A YouTube card that stays cheap until it is wanted. The player iframe only mounts on click, or pass href and the card navigates out instead of embedding.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "@duck/theme"
  ],
  "files": [
    {
      "path": "registry/duck/ui/video-card.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { ArrowUpRight, Play } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * VideoCard — a YouTube card that stays cheap until it is wanted. The\n * thumbnail is a plain image; the player iframe only mounts on click, so a\n * page full of these costs nothing on load.\n *\n * Pass `href` instead and the card navigates rather than embedding. That is\n * not a lesser mode: a channel gallery wants the outbound click tracked and\n * the subscription credited, and a page under a strict consent banner cannot\n * mount a third-party player at all.\n */\nfunction VideoCard({\n  className,\n  videoId,\n  title,\n  channel,\n  duration,\n  thumbnail,\n  href,\n  target,\n  rel,\n  onClick,\n  holo = false,\n  ...props\n}: Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  /** YouTube video id, the part after v=. */\n  videoId: string;\n  title: string;\n  channel?: string;\n  /** Runtime label, for example \"12:04\". */\n  duration?: string;\n  /** Override the default YouTube thumbnail. */\n  thumbnail?: string;\n  /**\n   * Navigate here instead of mounting the player. Pass the watch URL, or your\n   * own redirect if the click is being tracked.\n   */\n  href?: string;\n  target?: React.ComponentProps<\"a\">[\"target\"];\n  rel?: string;\n  /** Fires on the play button, or on the link when href is set. */\n  onClick?: React.MouseEventHandler<HTMLElement>;\n  holo?: boolean;\n}) {\n  const [playing, setPlaying] = React.useState(false);\n  const poster =\n    thumbnail ?? `https://i.ytimg.com/vi/${videoId}/maxresdefault.jpg`;\n  const links = Boolean(href);\n\n  const art = (\n    <>\n      <img\n        src={poster}\n        alt=\"\"\n        loading=\"lazy\"\n        decoding=\"async\"\n        className=\"size-full object-cover transition-transform duration-500 ease-[var(--ease-duck)] group-hover/video:scale-105\"\n      />\n      <span className=\"absolute inset-0 bg-[linear-gradient(to_top,oklch(0_0_0/0.55),transparent_55%)]\" />\n      <span className=\"absolute inset-0 grid place-items-center\">\n        <span className=\"grid size-14 place-items-center rounded-full bg-primary text-primary-foreground transition-transform duration-300 ease-[var(--ease-squash)] group-hover/video:scale-110\">\n          {links ? (\n            <ArrowUpRight className=\"size-6\" strokeWidth={2.5} />\n          ) : (\n            <Play className=\"size-6 translate-x-0.5 fill-current\" />\n          )}\n        </span>\n      </span>\n      {duration && (\n        <span className=\"absolute right-2 bottom-2 rounded-md bg-[oklch(0_0_0/0.75)] px-1.5 py-0.5 font-mono text-xs text-white tabular-nums\">\n          {duration}\n        </span>\n      )}\n    </>\n  );\n\n  return (\n    <div\n      data-slot=\"video-card\"\n      data-variant={links ? \"link\" : \"embed\"}\n      className={cn(\n        \"group/video overflow-hidden rounded-2xl bg-card text-card-foreground\",\n        \"transition-[box-shadow,border-color] duration-300 ease-[var(--ease-duck)]\",\n        holo\n          ? \"holo-border hover:duck-glow\"\n          : \"sticker border-border hover:border-primary/50 hover:duck-glow-primary\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"relative aspect-video overflow-hidden bg-muted\">\n        {links ? (\n          <a\n            href={href}\n            target={target ?? \"_blank\"}\n            // noreferrer would also strip the referrer the destination needs to\n            // credit the visit, so this is noopener only.\n            rel={rel ?? (target === \"_self\" ? undefined : \"noopener\")}\n            onClick={onClick}\n            aria-label={`Watch ${title} on YouTube`}\n            className=\"absolute inset-0 block size-full outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset\"\n          >\n            {art}\n          </a>\n        ) : playing ? (\n          <iframe\n            src={`https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1&rel=0`}\n            title={title}\n            allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n            allowFullScreen\n            className=\"absolute inset-0 size-full border-0\"\n          />\n        ) : (\n          <button\n            type=\"button\"\n            onClick={(event) => {\n              onClick?.(event);\n              if (!event.defaultPrevented) setPlaying(true);\n            }}\n            aria-label={`Play ${title}`}\n            className=\"absolute inset-0 size-full cursor-pointer\"\n          >\n            {art}\n          </button>\n        )}\n      </div>\n\n      <div className=\"flex flex-col gap-1 p-4\">\n        <h3 className=\"font-display leading-snug font-bold tracking-tight\">\n          {title}\n        </h3>\n        {channel && <p className=\"text-sm text-muted-foreground\">{channel}</p>}\n      </div>\n    </div>\n  );\n}\n\nexport { VideoCard };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}