"use client" /** * @name Video 07 * @description A course video player with progress tracking UI. * Perfect for online learning platforms and educational content. * * @slots video, video-container, video-header, video-course-title, * video-progress-wrapper, video-progress-bar, video-progress-fill, * video-progress-text, video-main, video-player-wrapper, video-player, * video-thumbnail, video-play-button, video-lesson-info, video-lesson-number, * video-lesson-title, video-lesson-duration, video-nav-buttons, * video-nav-button, video-lessons, video-lesson-item, video-lesson-check, * video-lesson-content * @variant course * * @registryDependencies badge button * @dependencies lucide-react */ import * as React from "react" import { Play, Clock, CheckCircle, Circle, ChevronLeft, ChevronRight, } from "lucide-react" import { Badge } from "@/registry/ui/badge" import { Button } from "@/registry/ui/button" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface LessonItem { id: string title: string duration: string completed?: boolean thumbnail: string } interface Video07Props { courseTitle?: string lessons?: LessonItem[] className?: string idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultLessons: LessonItem[] = [ { id: "lesson-1", title: "Welcome and Course Overview", duration: "3:45", completed: true, thumbnail: "/assets/placeholders/placeholder-16x9.svg", }, { id: "lesson-2", title: "Understanding the Fundamentals", duration: "12:30", completed: true, thumbnail: "/assets/placeholders/placeholder-16x9.svg", }, { id: "lesson-3", title: "Hands-on Project Setup", duration: "8:15", completed: false, thumbnail: "/assets/placeholders/placeholder-16x9.svg", }, { id: "lesson-4", title: "Building Your First Feature", duration: "15:00", completed: false, thumbnail: "/assets/placeholders/placeholder-16x9.svg", }, { id: "lesson-5", title: "Testing and Deployment", duration: "10:45", completed: false, thumbnail: "/assets/placeholders/placeholder-16x9.svg", }, { id: "lesson-6", title: "Course Wrap-up and Next Steps", duration: "5:20", completed: false, thumbnail: "/assets/placeholders/placeholder-16x9.svg", }, ] // ============================================================================ // COMPONENT // ============================================================================ function Video07({ courseTitle = "Complete Developer Bootcamp", lessons = defaultLessons, className, idBase = "video-07", }: Video07Props) { const [activeIndex, setActiveIndex] = React.useState(2) const activeLesson = lessons[activeIndex] const headingId = `${idBase}-heading` const completedCount = lessons.filter((l) => l.completed).length const progressPercentage = Math.round((completedCount / lessons.length) * 100) const goToPrevious = () => { if (activeIndex > 0) { setActiveIndex(activeIndex - 1) } } const goToNext = () => { if (activeIndex < lessons.length - 1) { setActiveIndex(activeIndex + 1) } } return (

{/* Header with Progress */}

{courseTitle}

{progressPercentage}% complete

{/* Main Player */}

{/* Lesson Info */}

Lesson {activeIndex + 1}

{activeLesson?.title}

{/* Navigation Buttons */}

{/* Lessons List */}

Course Content

{lessons.map((lesson, index) => ( ))}

) } export default Video07 export { Video07, type Video07Props }