"use client" import { motion } from "framer-motion" import { fadeIn, slideUp, stagger, staggerItem, buttonTapTarget } from "@/lib/animations" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Avatar } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { cn } from "@/lib/utils" import { Search, Phone, Video, MoreHorizontal, Send, Paperclip, SmilePlus, ChevronLeft, } from "lucide-react" const conversations = [ { id: 1, name: "Alex Morgan", avatar: "AM", lastMsg: "Sounds great! Let me know when you're free", time: "2m ago", unread: 2, online: true }, { id: 2, name: "Sam Rivera", avatar: "SR", lastMsg: "I'll send the files over by EOD", time: "1h ago", unread: 0, online: true }, { id: 3, name: "Jordan Chen", avatar: "JC", lastMsg: "Can you review the latest mockup?", time: "3h ago", unread: 1, online: false }, { id: 4, name: "Riley Patel", avatar: "RP", lastMsg: "Thanks for the help yesterday!", time: "1d ago", unread: 0, online: false }, { id: 5, name: "Taylor Kim", avatar: "TK", lastMsg: "The event starts at 7PM", time: "2d ago", unread: 0, online: false }, ] const messages = [ { id: 1, from: "them", text: "Hey! How's the project going?", time: "10:30 AM" }, { id: 2, from: "me", text: "Going well! Just finishing up the final screens.", time: "10:32 AM" }, { id: 3, from: "them", text: "Sounds great! Let me know when you're free", time: "10:33 AM" }, ] export default function Messages() { return (

Messages

{conversations.map((conv) => ( ))}

Alex Morgan

Online

{messages.map((msg) => (

{msg.text}

{msg.time}

))}

) }