"use client" import { motion } from "framer-motion" import { fadeIn, slideUp, buttonTapTarget } from "@/lib/animations" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Avatar } from "@/components/ui/avatar" import { Input } from "@/components/ui/input" import { Separator } from "@/components/ui/separator" import { cn } from "@/lib/utils" import { Heart, MessageCircle, Share2, X, Send, SmilePlus, Volume2, VolumeX, Mic, MicOff, Camera, CameraOff, Users, Gift, MoreHorizontal, Eye, } from "lucide-react" const viewers = [ { name: "Alex", avatar: "A" }, { name: "Sam", avatar: "S" }, { name: "Jordan", avatar: "J" }, { name: "Riley", avatar: "R" }, { name: "Taylor", avatar: "T" }, ] const chatMessages = [ { user: "Alex M.", text: "Love this stream!", time: "just now" }, { user: "Sam R.", text: "Great content as always!", time: "1m ago" }, { user: "Jordan C.", text: "Can you talk about the design process?", time: "2m ago" }, ] export default function LiveStream() { return (

LIVE 234

Stream Preview

Jordan Davis

Designing a UI component library

Live Chat

{viewers.slice(0, 3).map((v) => ( {v.avatar} ))}

{viewers.length}+

{chatMessages.map((msg, i) => (

{msg.user} : {msg.text}

))}

) }

Live Stream