// "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Video 05 * @description A full-width video hero section with background overlay. * Great for featured video content and product launches. * * @slots video, video-background, video-overlay, video-content, video-badge, * video-heading, video-description, video-play-button, video-play-icon, * video-meta, video-meta-item * @variant hero * * @registryDependencies badge * @dependencies lucide-react */ import * as React from "react" import { PlayCircle, Clock, Eye } from "lucide-react" import { Badge } from "@/registry/ui/badge" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface Video05Props { title?: string description?: string thumbnail?: string duration?: string views?: string category?: string onPlay?: () => void className?: string idBase?: string } // ============================================================================ // COMPONENT // ============================================================================ function Video05({ title = "Introducing Our New Platform", description = "Watch how we're revolutionizing the way teams collaborate and build products together.", thumbnail = "/assets/placeholders/placeholder-16x9.svg", duration = "3:45", views = "125K", category = "Product Launch", onPlay, className, idBase = "video-05", }: Video05Props) { const headingId = `${idBase}-heading` return (

{category && ( {category} )}

{title}

{description && (

{description}

)}

) } export default Video05 export { Video05, type Video05Props }