"use client" /** * @name Video 06 * @description A video playlist with sidebar navigation. * Perfect for video series, courses, or categorized content. * * @slots video, video-container, video-main, video-player-wrapper, video-player, * video-thumbnail, video-play-button, video-info, video-title, * video-description, video-meta, video-sidebar, video-sidebar-header, * video-sidebar-title, video-playlist, video-playlist-item, * video-playlist-thumbnail, video-playlist-content, video-playlist-number * @variant playlist * * @registryDependencies badge button * @dependencies lucide-react */ import * as React from "react" import { Play, Clock, List } from "lucide-react" import { Badge } from "@/registry/ui/badge" import { Button } from "@/registry/ui/button" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface PlaylistItem { id: string title: string duration: string thumbnail: string description?: string } interface Video06Props { playlistTitle?: string videos?: PlaylistItem[] className?: string idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultVideos: PlaylistItem[] = [ { id: "vid-1", title: "Introduction to the Platform", duration: "5:32", thumbnail: "/assets/placeholders/placeholder-16x9.svg", description: "Get started with the basics of our platform and learn the core concepts.", }, { id: "vid-2", title: "Setting Up Your First Project", duration: "8:45", thumbnail: "/assets/placeholders/placeholder-16x9.svg", description: "Learn how to create and configure your first project from scratch.", }, { id: "vid-3", title: "Advanced Configuration Options", duration: "12:20", thumbnail: "/assets/placeholders/placeholder-16x9.svg", description: "Deep dive into advanced settings and customization options.", }, { id: "vid-4", title: "Team Collaboration Features", duration: "7:15", thumbnail: "/assets/placeholders/placeholder-16x9.svg", description: "Discover how to work effectively with your team using our collaboration tools.", }, { id: "vid-5", title: "Best Practices and Tips", duration: "10:00", thumbnail: "/assets/placeholders/placeholder-16x9.svg", description: "Expert tips and best practices to get the most out of the platform.", }, ] // ============================================================================ // COMPONENT // ============================================================================ function Video06({ playlistTitle = "Getting Started Series", videos = defaultVideos, className, idBase = "video-06", }: Video06Props) { const [activeIndex, setActiveIndex] = React.useState(0) const activeVideo = videos[activeIndex] const headingId = `${idBase}-heading` return (

{/* Main Player */}

{/* Video Info */}

{activeVideo?.title}

{activeVideo?.description && (

{activeVideo.description}

)}

Video {activeIndex + 1} of {videos.length}

{/* Sidebar Playlist */}

{videos.map((video, index) => ( ))}

) } export default Video06 export { Video06, type Video06Props }