"use client" /** * @name Video 04 * @description A video carousel section with horizontal scrolling cards. * Great for showcasing multiple videos in a compact space. * * @slots video, video-container, video-header, video-heading, video-description, * video-nav-buttons, video-nav-button, video-carousel, video-card, * video-card-thumbnail, video-card-play, video-card-category, * video-card-info, video-card-title, video-card-duration * @variant carousel * * @registryDependencies button badge card * @dependencies lucide-react */ import * as React from "react" import { Play, Clock, ChevronLeft, ChevronRight } from "lucide-react" import { Button } from "@/registry/ui/button" import { Badge } from "@/registry/ui/badge" import { Card, CardContent } from "@/registry/ui/card" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface VideoItem { id: string title: string thumbnail: string duration: string category?: string } interface Video04Props { heading?: string description?: string videos?: VideoItem[] onPlay?: (id: string) => void className?: string idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultVideos: VideoItem[] = [ { id: "vid-1", title: "Platform Overview", thumbnail: "/assets/placeholders/placeholder-16x9.svg", duration: "4:32", category: "Overview" }, { id: "vid-2", title: "Dashboard Walkthrough", thumbnail: "/assets/placeholders/placeholder-16x9.svg", duration: "8:15", category: "Tutorial" }, { id: "vid-3", title: "Integration Setup", thumbnail: "/assets/placeholders/placeholder-16x9.svg", duration: "6:40", category: "Tutorial" }, { id: "vid-4", title: "Team Collaboration", thumbnail: "/assets/placeholders/placeholder-16x9.svg", duration: "5:20", category: "Feature" }, { id: "vid-5", title: "Advanced Analytics", thumbnail: "/assets/placeholders/placeholder-16x9.svg", duration: "12:00", category: "Deep Dive" }, ] // ============================================================================ // COMPONENT // ============================================================================ function Video04({ heading = "Learn from Videos", description = "Watch our curated collection of tutorials and feature walkthroughs", videos = defaultVideos, onPlay, className, idBase = "video-04", }: Video04Props) { const scrollRef = React.useRef(null) const headingId = `${idBase}-heading` const scroll = (direction: "left" | "right") => { if (scrollRef.current) { const scrollAmount = 320 scrollRef.current.scrollBy({ left: direction === "left" ? -scrollAmount : scrollAmount, behavior: "smooth", }) } } return (

{heading}

{description && (

{description}

)}

{videos.map((video) => ( onPlay?.(video.id)} >

{video.category && ( {video.category} )}

{video.title}

))}

) } export default Video04 export { Video04, type Video04Props }