"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 { Avatar, AvatarFallback } from "@/components/ui/avatar" import { Separator } from "@/components/ui/separator" import { cn } from "@/lib/utils" import { Mic, MicOff, Video, VideoOff, ScreenShare, MessageCircle, Hand, Users, Settings, PhoneOff, } from "lucide-react" const participants = [ { name: "Dr. Sarah Kim", initials: "SK", role: "Instructor", speaking: true }, { name: "Alex M.", initials: "AM", role: "Student", speaking: false }, { name: "Jordan K.", initials: "JK", role: "Student", speaking: false }, { name: "Taylor R.", initials: "TR", role: "Student", speaking: false }, { name: "Morgan L.", initials: "ML", role: "Student", speaking: false }, { name: "Casey P.", initials: "CP", role: "Student", speaking: false }, ] const chatMessages = [ { name: "Alex M.", text: "Can you repeat that part about loops?", time: "2:15 PM" }, { name: "Jordan K.", text: "Great explanation!", time: "2:18 PM" }, { name: "Taylor R.", text: "What about nested loops?", time: "2:20 PM" }, ] export default function LiveClass() { const [micOn, setMicOn] = useState(true) const [camOn, setCamOn] = useState(true) return (

LIVE Intro to Programming

24 watching

Dr. Sarah Kim

{participants.filter((p) => p.role === "Student").slice(0, 5).map((p) => (

{p.initials} {p.name}

))}

Participants (24)

{participants.map((p) => (

{p.initials} {p.name}

{p.role === "Instructor" ? "Instructor" : ""}

))}

Chat

{chatMessages.map((m) => (

{m.name}

{m.text}

{m.time}

))}

) }

Live Class

Participants (24)

Chat

Participants (24)

Chat