// Client/Server Component "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Video 01 * @description A centered video section with play button overlay and thumbnail. * Great for product demos, explainer videos, or testimonials. * * @slots video, video-container, video-header, video-badge, video-heading, * video-description, video-player, video-thumbnail, video-play-button, * video-duration, video-iframe, video-close * @variant centered * * @registryDependencies badge button * @dependencies lucide-react */ import * as React from "react" import { Play, X } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Badge } from "@/registry/ui/badge" import { Button } from "@/registry/ui/button" // ============================================================================ // TYPES // ============================================================================ interface Video01Props { /** Section badge text */ badge?: string /** Section heading */ heading?: string /** Section description */ description?: string /** Video thumbnail URL */ thumbnail?: string /** Video embed URL (YouTube, Vimeo, etc.) */ videoUrl?: string /** Video duration text */ duration?: string /** Additional CSS classes */ className?: string } // ============================================================================ // COMPONENT // ============================================================================ function Video01({ badge = "Product Demo", heading = "See how it works in 2 minutes", description = "Watch our quick product tour and discover how easy it is to get started.", thumbnail = "/assets/placeholders/placeholder-16x9.svg", videoUrl = "https://www.youtube.com/embed/Bo9IHicdCtE?rel=0", duration = "2:34", className, }: Video01Props) { const [isPlaying, setIsPlaying] = React.useState(false) return (

{/* Header */}

{badge}

{heading}

{description && (

{description}

)}

{/* Video Container */}

{!isPlaying ? ( <> {/* Thumbnail */}

{/* Play Button */} {/* Duration Badge */} {duration}

) : ( <> {/* Video Iframe */}