"use client" import { useState } from "react" import { motion } from "framer-motion" import { fadeIn, slideUp, stagger, staggerItem, buttonTapTarget } from "@/lib/animations" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { cn } from "@/lib/utils" import { PlayCircle, PauseCircle, SkipBack, SkipForward, Maximize, Minimize, Subtitles, List, Bookmark, FileText, MessageCircle, CheckCircle, } from "lucide-react" const playlist = [ { title: "1. Welcome to the Course", duration: "3:45", active: true }, { title: "2. Setting Up Your Environment", duration: "5:20", active: false }, { title: "3. Your First Program", duration: "8:10", active: false }, { title: "4. Variables & Data Types", duration: "12:30", active: false }, { title: "5. Control Flow", duration: "15:00", active: false }, { title: "6. Functions", duration: "18:45", active: false }, ] export default function LessonPlayer() { const [playing, setPlaying] = useState(false) return (

{playing ? ( setPlaying(false)} className="size-20 text-white/60 cursor-pointer hover:text-white/90 transition-colors" /> ) : ( setPlaying(true)} className="size-20 text-white/60 cursor-pointer hover:text-white/90 transition-colors" /> )}

{playing ? setPlaying(false)} className="size-6 text-white cursor-pointer" /> : setPlaying(true)} className="size-6 text-white cursor-pointer" />}

Welcome to the Course

Module 1 · Introduction

Notes

Auto-saved

</motion.div>

<motion.div variants={fadeIn} initial="hidden" animate="visible" className="space-y-3">
              <h2 className="font-semibold">Discussion</h2>
              <div className="space-y-3">
                {["Great introduction!", "When is the next assignment due?"].map((msg, i) => (
                  <div key={i} className="rounded-lg bg-muted/30 p-3 text-sm">
                    <p className="text-xs text-muted-foreground mb-1">Student {i + 1}</p>
                    <p>{msg}</p>
                  </div>
                ))}
              </div>
              <div className="flex gap-2">
                <input className="flex-1 rounded-lg border border-border bg-muted/30 px-3 py-2 text-sm outline-none focus:border-primary/50" placeholder="Add a comment..." />
                <motion.div whileTap={buttonTapTarget}>
                  <Button size="sm">Send</Button>
                </motion.div>
              </div>
            </motion.div>
          </div>

<div className="space-y-3">
            <div className="flex items-center justify-between">
              <h2 className="font-semibold">Course Content</h2>
              <List className="size-4 text-muted-foreground" />
            </div>
            <motion.div variants={stagger} initial="hidden" animate="visible" className="space-y-1">
              {playlist.map((item) => (
                <motion.div key={item.title} variants={staggerItem}>
                  <Card className={cn("cursor-pointer border-0 transition-colors", item.active ? "bg-primary/5 ring-1 ring-primary/20" : "bg-muted/30 hover:bg-muted/50")}>
                    <CardContent className="flex items-center justify-between p-3">
                      <div className="flex items-center gap-2">
                        {item.active ? <PlayCircle className="size-4 text-primary" /> : <CheckCircle className="size-4 text-muted-foreground" />}
                        <span className={cn("text-sm", item.active ? "font-medium text-primary" : "text-muted-foreground")}>{item.title}</span>
                      </div>
                      <span className="text-xs text-muted-foreground">{item.duration}</span>
                    </CardContent>
                  </Card>
                </motion.div>
              ))}
            </motion.div>
          </div>
        </div>
      </div>
    </div>
  )
}
</article></body></html>

Lesson Player

Welcome to the Course

Notes

Discussion

Course Content

Welcome to the Course

Notes

Discussion

Course Content