{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "youtube-video-player-demo",
  "type": "registry:component",
  "registryDependencies": [
    "youtube-video-player"
  ],
  "files": [
    {
      "path": "registry/default/example/youtube-video-player-demo.tsx",
      "content": "\"use client\"\n\nimport { YouTubePlayer } from \"@/registry/default/ui/youtube-video-player\"\n\nexport default function YouTubeVideoPlayerDemo() {\n  return (\n    <div className=\"space-y-12 p-8\">\n      <div className=\"space-y-4\">\n        <h1 className=\"text-3xl font-bold\">YouTube Video Player Examples</h1>\n        <p className=\"text-muted-foreground\">\n          A collection of YouTube video player examples showcasing different\n          configurations and styling options.\n        </p>\n      </div>\n\n      {/* Custom Thumbnail */}\n      <section className=\"space-y-4\">\n        <div>\n          <h2 className=\"mb-2 text-2xl font-semibold\">Custom Thumbnail</h2>\n          <p className=\"text-muted-foreground\">\n            Player with a custom thumbnail image instead of the default YouTube\n            thumbnail.\n          </p>\n        </div>\n        <div className=\"max-w-2xl\">\n          <YouTubePlayer\n            videoId=\"jNQXAC9IVRw\"\n            title=\"Me at the zoo - First YouTube Video\"\n            customThumbnail=\"https://images.unsplash.com/photo-1611162617474-5b21e879e113?w=800&h=450&fit=crop&crop=center\"\n          />\n        </div>\n      </section>\n\n      {/* Custom Styling */}\n      <section className=\"space-y-4\">\n        <div>\n          <h2 className=\"mb-2 text-2xl font-semibold\">Custom Styling</h2>\n          <p className=\"text-muted-foreground\">\n            Player with custom styling classes for different elements.\n          </p>\n        </div>\n        <div className=\"max-w-2xl\">\n          <YouTubePlayer\n            videoId=\"kJQP7kiw5Fk\"\n            title=\"Despacito - Luis Fonsi ft. Daddy Yankee\"\n            containerClassName=\"border-2 border-primary rounded-2xl shadow-2xl\"\n            thumbnailImageClassName=\"opacity-90 saturate-150\"\n            playButtonClassName=\"bg-primary/20 border-border/20 hover:bg-primary/30\"\n            playIconClassName=\"text-secondary fill-secondary\"\n            titleClassName=\"text-secondary font-bold\"\n            controlsClassName=\"right-4 top-4\"\n            expandButtonClassName=\"bg-secondary/20 hover:bg-secondary/30 border-secondary text-secondary\"\n          />\n        </div>\n      </section>\n\n      {/* Multiple Players Grid */}\n      <section className=\"space-y-4\">\n        <div>\n          <h2 className=\"mb-2 text-2xl font-semibold\">Multiple Players</h2>\n          <p className=\"text-muted-foreground\">\n            A grid of multiple video players with different content.\n          </p>\n        </div>\n        <div className=\"grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3\">\n          <YouTubePlayer\n            videoId=\"9bZkp7q19f0\"\n            title=\"PSY - GANGNAM STYLE\"\n            className=\"w-full\"\n          />\n          <YouTubePlayer\n            videoId=\"fJ9rUzIMcZQ\"\n            title=\"Queen – Bohemian Rhapsody\"\n            className=\"w-full\"\n          />\n          <YouTubePlayer\n            videoId=\"L_jWHffIx5E\"\n            title=\"Smash Mouth - All Star\"\n            className=\"w-full\"\n          />\n          <YouTubePlayer\n            videoId=\"hTWKbfoikeg\"\n            title=\"Nirvana - Smells Like Teen Spirit\"\n            className=\"w-full\"\n          />\n          <YouTubePlayer\n            videoId=\"djV11Xbc914\"\n            title=\"a-ha - Take On Me\"\n            className=\"w-full\"\n          />\n          <YouTubePlayer\n            videoId=\"ZbZSe6N_BXs\"\n            title=\"Happy - Pharrell Williams\"\n            className=\"w-full\"\n          />\n        </div>\n      </section>\n\n      {/* Different Aspect Ratios */}\n      <section className=\"space-y-4\">\n        <div>\n          <h2 className=\"mb-2 text-2xl font-semibold\">Different Sizes</h2>\n          <p className=\"text-muted-foreground\">\n            Players in different container sizes to show responsive behavior.\n          </p>\n        </div>\n        <div className=\"space-y-8\">\n          {/* Small */}\n          <div>\n            <h3 className=\"mb-3 text-lg font-medium\">Small (300px)</h3>\n            <div className=\"w-[300px]\">\n              <YouTubePlayer\n                videoId=\"2yJgwwDcgV8\"\n                title=\"Nyan Cat [original]\"\n              />\n            </div>\n          </div>\n\n          {/* Medium */}\n          <div>\n            <h3 className=\"mb-3 text-lg font-medium\">Medium (500px)</h3>\n            <div className=\"w-[500px]\">\n              <YouTubePlayer videoId=\"oHg5SJYRHA0\" title=\"RickRoll'D\" />\n            </div>\n          </div>\n\n          {/* Large */}\n          <div>\n            <h3 className=\"mb-3 text-lg font-medium\">Large (800px)</h3>\n            <div className=\"w-[800px]\">\n              <YouTubePlayer videoId=\"y6120QOlsfU\" title=\"Darude - Sandstorm\" />\n            </div>\n          </div>\n        </div>\n      </section>\n\n      {/* URL Formats */}\n      <section className=\"space-y-4\">\n        <div>\n          <h2 className=\"mb-2 text-2xl font-semibold\">Different URL Formats</h2>\n          <p className=\"text-muted-foreground\">\n            The player can handle different YouTube URL formats automatically.\n          </p>\n        </div>\n        <div className=\"grid grid-cols-1 gap-6 md:grid-cols-2\">\n          {/* Regular video ID */}\n          <div>\n            <h3 className=\"mb-2 text-sm font-medium\">\n              Video ID: \"dQw4w9WgXcQ\"\n            </h3>\n            <YouTubePlayer videoId=\"dQw4w9WgXcQ\" title=\"Using Video ID\" />\n          </div>\n\n          {/* Full YouTube URL */}\n          <div>\n            <h3 className=\"mb-2 text-sm font-medium\">\n              Full URL: \"https://www.youtube.com/watch?v=dQw4w9WgXcQ\"\n            </h3>\n            <YouTubePlayer\n              videoId=\"https://www.youtube.com/watch?v=dQw4w9WgXcQ\"\n              title=\"Using Full YouTube URL\"\n            />\n          </div>\n\n          {/* Short URL */}\n          <div>\n            <h3 className=\"mb-2 text-sm font-medium\">\n              Short URL: \"https://youtu.be/dQw4w9WgXcQ\"\n            </h3>\n            <YouTubePlayer\n              videoId=\"https://youtu.be/dQw4w9WgXcQ\"\n              title=\"Using Short YouTube URL\"\n            />\n          </div>\n        </div>\n      </section>\n\n      {/* Feature Highlights */}\n      <section className=\"space-y-4\">\n        <div>\n          <h2 className=\"mb-2 text-2xl font-semibold\">Features</h2>\n          <div className=\"grid grid-cols-1 gap-6 md:grid-cols-2\">\n            <div className=\"space-y-2\">\n              <h3 className=\"text-lg font-medium\">✨ Key Features</h3>\n              <ul className=\"text-muted-foreground space-y-1 text-sm\">\n                <li>• Expandable full-screen mode</li>\n                <li>• Custom thumbnails support</li>\n                <li>• Smooth animations with Framer Motion</li>\n                <li>• Keyboard shortcuts (ESC to close)</li>\n                <li>• Responsive design</li>\n                <li>• Accessible controls</li>\n                <li>• Multiple URL format support</li>\n              </ul>\n            </div>\n            <div className=\"space-y-2\">\n              <h3 className=\"text-lg font-medium\">🎨 Customization</h3>\n              <ul className=\"text-muted-foreground space-y-1 text-sm\">\n                <li>• Fully customizable styling</li>\n                <li>• Custom play button designs</li>\n                <li>• Thumbnail overlay effects</li>\n                <li>• Control button positioning</li>\n                <li>• Container and backdrop styling</li>\n                <li>• Title and text customization</li>\n              </ul>\n            </div>\n          </div>\n        </div>\n      </section>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}