// Client/Server Component "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Video 03 * @description A video gallery section with thumbnail grid. * Click thumbnails to play videos in a featured player. * * @slots video, video-container, video-header, video-heading, video-description, * video-gallery, video-player, video-player-image, video-play-button, * video-player-badge, video-player-title, video-player-duration, * video-list, video-list-heading, video-list-item, video-list-thumbnail, * video-list-info, video-list-title, video-list-duration * @variant gallery * * @registryDependencies button badge * @dependencies lucide-react */ import * as React from "react" import { Play, Clock } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Badge } from "@/registry/ui/badge" // ============================================================================ // TYPES // ============================================================================ interface VideoItem { /** Unique identifier */ id: string /** Video title */ title: string /** Video thumbnail */ thumbnail: string /** Video duration */ duration: string /** Video category */ category?: string } interface Video03Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Video items */ videos?: VideoItem[] /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultVideos: VideoItem[] = [ { id: "video-1", title: "Getting Started Guide", thumbnail: "/assets/placeholders/placeholder-16x9.svg", duration: "5:32", category: "Tutorial", }, { id: "video-2", title: "Advanced Features Overview", thumbnail: "/assets/placeholders/placeholder-16x9.svg", duration: "12:45", category: "Tutorial", }, { id: "video-3", title: "Customer Success Story", thumbnail: "/assets/placeholders/placeholder-16x9.svg", duration: "8:20", category: "Case Study", }, { id: "video-4", title: "Product Demo 2024", thumbnail: "/assets/placeholders/placeholder-16x9.svg", duration: "15:00", category: "Demo", }, ] // ============================================================================ // COMPONENT // ============================================================================ function Video03({ heading = "Video Library", description = "Learn how to get the most out of our platform with these helpful videos.", videos = defaultVideos, className, }: Video03Props) { const [activeIndex, setActiveIndex] = React.useState(0) const activeVideo = videos[activeIndex] return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Video Player */}

{/* Main Player */}

{activeVideo?.category && ( {activeVideo.category} )}

{activeVideo?.title}

{/* Thumbnail List */}

{heading}

{activeVideo?.title}

More Videos