{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "youtube-post",
  "version": "1.2.0",
  "category": "social",
  "meta": {
    "preview": "https://ui.manifest.build/previews/youtube-post.png",
    "version": "1.2.0",
    "changelog": {
      "1.0.0": "Initial release with playable video embed",
      "1.0.1": "Improved alt text to include video title",
      "1.0.3": "Added comprehensive JSDoc documentation",
      "1.1.0": "Moved to social category for better organization",
      "1.1.1": "Updated Props interface with decorative header and sub-parameter JSDoc documentation",
      "1.1.2": "Removed default content data - component only renders explicitly provided data",
      "1.2.0": "Added demo data defaults - component renders demo content when no data prop is provided"
    }
  },
  "changelog": {
    "1.0.0": "Initial release with playable video embed",
    "1.0.1": "Improved alt text to include video title",
    "1.0.3": "Added comprehensive JSDoc documentation",
    "1.1.0": "Moved to social category for better organization",
    "1.1.1": "Updated Props interface with decorative header and sub-parameter JSDoc documentation",
    "1.1.2": "Removed default content data - component only renders explicitly provided data",
    "1.2.0": "Added demo data defaults - component renders demo content when no data prop is provided"
  },
  "title": "YouTube Post",
  "author": "MNFST, Inc",
  "description": "YouTube video card with playable embed.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "dropdown-menu"
  ],
  "files": [
    {
      "path": "registry/social/youtube-post.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { Bookmark, MoreHorizontal, Share, EyeOff, Flag } from \"lucide-react\"\nimport { demoYouTubePost } from './demo/social'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\n\n/**\n * ═══════════════════════════════════════════════════════════════════════════\n * YouTubePostProps\n * ═══════════════════════════════════════════════════════════════════════════\n *\n * Props for the YouTubePost component, which displays a YouTube video embed\n * with thumbnail preview and click-to-play functionality.\n */\nexport interface YouTubePostProps {\n  data?: {\n    /** YouTube channel name. */\n    channel?: string\n    /** Channel avatar letter fallback or image URL. */\n    avatar?: string\n    /** Video title. */\n    title?: string\n    /** Formatted view count (e.g., \"1M views\"). */\n    views?: string\n    /** Time since video was published (e.g., \"2 weeks ago\"). */\n    time?: string\n    /** Video duration in MM:SS or HH:MM:SS format. */\n    duration?: string\n    /** URL of the video thumbnail image. */\n    thumbnail?: string\n    /** Formatted subscriber count for the channel. */\n    subscribers?: string\n    /** Whether the channel has a verified badge. */\n    verified?: boolean\n    /** YouTube video ID used for embedding the player. */\n    videoId?: string\n  }\n}\n\n/**\n * A YouTube video embed component with thumbnail preview and playback.\n * Click the play button to load and play the embedded video.\n *\n * Features:\n * - Thumbnail preview with YouTube play button\n * - Duration badge overlay\n * - Channel avatar and info\n * - Verified channel badge\n * - View count and publish time\n * - Click-to-play video embedding\n * - Dropdown menu (save, share, not interested, report)\n *\n * @component\n * @example\n * ```tsx\n * <YouTubePost\n *   data={{\n *     channel: \"Tech Channel\",\n *     avatar: \"T\",\n *     title: \"How to build amazing UIs\",\n *     views: \"1M views\",\n *     time: \"2 weeks ago\",\n *     duration: \"18:42\",\n *     thumbnail: \"https://img.youtube.com/vi/abc123/maxresdefault.jpg\",\n *     verified: true,\n *     videoId: \"abc123\"\n *   }}\n * />\n * ```\n */\nexport function YouTubePost({ data }: YouTubePostProps) {\n  const resolved: NonNullable<YouTubePostProps['data']> = data ?? demoYouTubePost\n  const channel = resolved?.channel\n  const avatar = resolved?.avatar\n  const title = resolved?.title\n  const views = resolved?.views\n  const time = resolved?.time\n  const duration = resolved?.duration\n  const thumbnail = resolved?.thumbnail\n  const verified = resolved?.verified\n  const videoId = resolved?.videoId\n\n  const [isPlaying, setIsPlaying] = useState(false)\n\n  if (!title && !thumbnail && !videoId) {\n    return null\n  }\n\n  return (\n    <div className=\"rounded-xl border bg-card overflow-hidden\">\n      {/* Thumbnail / Video */}\n      {(thumbnail || videoId) && (\n        <div className=\"relative aspect-video bg-black\">\n          {isPlaying && videoId ? (\n            <iframe\n              className=\"w-full h-full\"\n              src={`https://www.youtube.com/embed/${videoId}?autoplay=1`}\n              title={title ?? 'YouTube video'}\n              allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n              allowFullScreen\n            />\n          ) : (\n            <>\n              {thumbnail && (\n                <img src={thumbnail} alt={title ? `Video thumbnail: ${title}` : 'Video thumbnail'} className=\"w-full h-full object-cover\" />\n              )}\n\n              {/* YouTube play button overlay */}\n              {videoId && (\n                <button\n                  className=\"absolute inset-0 flex items-center justify-center\"\n                  onClick={() => setIsPlaying(true)}\n                  aria-label=\"Play video\"\n                >\n                  <svg className=\"h-10 w-14 cursor-pointer hover:scale-105 transition-transform\" viewBox=\"0 0 1024 721\">\n                    <path fill=\"#FF0000\" d=\"M1013,156.3c0,0-10-70.4-40.6-101.4C933.6,14.2,890,14,870.1,11.6C727.1,1.3,512.7,1.3,512.7,1.3h-0.4c0,0-214.4,0-357.4,10.3C135,14,91.4,14.2,52.6,54.9C22,85.9,12,156.3,12,156.3S1.8,238.9,1.8,321.6v77.5C1.8,481.8,12,564.4,12,564.4s10,70.4,40.6,101.4c38.9,40.7,89.9,39.4,112.6,43.7c81.7,7.8,347.3,10.3,347.3,10.3s214.6-0.3,357.6-10.7c20-2.4,63.5-2.6,102.3-43.3c30.6-31,40.6-101.4,40.6-101.4s10.2-82.7,10.2-165.3v-77.5C1023.2,238.9,1013,156.3,1013,156.3z M407,493V206l276,144L407,493z\"/>\n                    <path fill=\"#FFFFFF\" d=\"M407,493l276-143L407,206V493z\"/>\n                  </svg>\n                </button>\n              )}\n\n              {/* Duration badge */}\n              {duration && (\n                <div className=\"absolute bottom-2 right-2 bg-black/80 text-white text-xs px-1.5 py-0.5 rounded font-medium\">\n                  {duration}\n                </div>\n              )}\n            </>\n          )}\n        </div>\n      )}\n\n      {/* Video info */}\n      {(channel || title) && (\n        <div className=\"p-3\">\n          <div className=\"flex gap-3\">\n            {avatar && (\n              <div className=\"h-9 w-9 rounded-full bg-red-600 text-white flex items-center justify-center font-semibold text-sm shrink-0\">\n                {avatar}\n              </div>\n            )}\n            <div className=\"flex-1 min-w-0\">\n              {title && <h3 className=\"font-semibold text-sm line-clamp-2 leading-tight\">{title}</h3>}\n              {channel && (\n                <div className=\"mt-1.5 flex items-center gap-1 text-xs text-muted-foreground\">\n                  <span>{channel}</span>\n                  {verified && (\n                    <svg className=\"h-3.5 w-3.5\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                      <path d=\"M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\" />\n                    </svg>\n                  )}\n                </div>\n              )}\n              {(views || time) && (\n                <p className=\"text-xs text-muted-foreground\">\n                  {views}{views && time && ' • '}{time}\n                </p>\n              )}\n            </div>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <button className=\"text-muted-foreground hover:text-foreground shrink-0 transition-colors cursor-pointer\">\n                  <MoreHorizontal className=\"h-5 w-5\" />\n                </button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\">\n                <DropdownMenuItem>\n                  <Bookmark className=\"mr-2 h-4 w-4\" />\n                  Save to Watch later\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <Share className=\"mr-2 h-4 w-4\" />\n                  Share\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <EyeOff className=\"mr-2 h-4 w-4\" />\n                  Not interested\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <Flag className=\"mr-2 h-4 w-4\" />\n                  Report\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "components/ui/youtube-post.tsx"
    },
    {
      "path": "registry/social/demo/social.ts",
      "content": "// Demo data for Social category components\n// This file contains sample data used for component previews and documentation\n\nexport const demoXPost = {\n  author: 'Manifest',\n  username: 'manifest_ui',\n  avatar: 'M',\n  verified: true,\n  content: 'Just shipped a new batch of agentic UI components. Build conversational interfaces faster than ever.',\n  time: '2h',\n  likes: '1.2K',\n  retweets: '234',\n  replies: '56',\n  views: '45.2K',\n}\n\nexport const demoInstagramPost = {\n  author: 'manifest.ui',\n  avatar: 'M',\n  verified: true,\n  image:\n    'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800',\n  caption: 'Building the future of agentic UIs, one component at a time.',\n  likes: '2,847',\n  time: '2h',\n}\n\nexport const demoLinkedInPost = {\n  author: 'Manifest',\n  headline: 'Manifest UI | Open Source',\n  avatar: 'M',\n  content: 'Excited to announce our latest milestone! We\\'ve just crossed 10,000 developers using Manifest to build agentic UIs.',\n  time: '1d',\n  reactions: '1,234',\n  topReactions: ['like', 'celebrate', 'love'] as ('like' | 'celebrate' | 'support' | 'love' | 'insightful' | 'funny')[],\n  comments: '56',\n  reposts: '12',\n  postUrl: 'https://linkedin.com/posts/manifest-123',\n  repostUrl: 'https://linkedin.com/shareArticle?url=...',\n}\n\nexport const demoYouTubePost = {\n  channel: 'Manifest',\n  avatar: 'M',\n  title: 'Building Agentic UIs with Manifest',\n  views: '12K',\n  time: '3 days ago',\n  thumbnail:\n    'https://images.unsplash.com/photo-1677442136019-21780ecad995?w=800',\n  duration: '15:42',\n}\n",
      "type": "registry:lib",
      "target": "components/ui/demo/social.ts"
    }
  ],
  "categories": [
    "social"
  ],
  "type": "registry:block"
}