"use client" import { motion } from "framer-motion" import { Play, Pause, SkipBack, SkipForward, Volume2, Maximize, List, Heart, Share2, ChevronDown, Clock, } from "lucide-react" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { Avatar } from "@/components/ui/avatar" import { cn } from "@/lib/utils" import { fadeIn, stagger, staggerItem, cardHover, cardHoverTarget } from "@/lib/animations" const playlist = [ { id: 1, title: "Getting Started Guide", duration: "12:34", views: "45K", active: true }, { id: 2, title: "Advanced Techniques", duration: "18:22", views: "32K", active: false }, { id: 3, title: "Project Walkthrough", duration: "24:15", views: "28K", active: false }, { id: 4, title: "Tips & Tricks", duration: "8:47", views: "67K", active: false }, { id: 5, title: "Best Practices 2026", duration: "15:03", views: "19K", active: false }, ] export default function VideoPlayer() { return (

12:34 / 18:22

Advanced Techniques Tutorial

1.2M views • 2 days ago Tutorial

Alfred Njobvu

12.4K subscribers

Playlist

5 videos

{playlist.map((item) => (

{item.title}

{item.duration}

{item.views} ))}

) }

Video Player

Advanced Techniques Tutorial

Playlist

Advanced Techniques Tutorial

Playlist