"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 { Badge } from "@/components/ui/badge" import { Avatar } from "@/components/ui/avatar" import { Input } from "@/components/ui/input" import { Separator } from "@/components/ui/separator" import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs" import { cn } from "@/lib/utils" import { Search, UserPlus, UserCheck, Users, X, MessageCircle, MoreHorizontal, } from "lucide-react" const friends = [ { id: 1, name: "Alex Morgan", avatar: "AM", mutual: 12, online: true, status: "Online" }, { id: 2, name: "Sam Rivera", avatar: "SR", mutual: 8, online: true, status: "Online" }, { id: 3, name: "Jordan Chen", avatar: "JC", mutual: 15, online: false, status: "Last seen 2h ago" }, { id: 4, name: "Riley Patel", avatar: "RP", mutual: 5, online: false, status: "Last seen 1d ago" }, { id: 5, name: "Taylor Kim", avatar: "TK", mutual: 9, online: true, status: "Online" }, { id: 6, name: "Morgan Lee", avatar: "ML", mutual: 3, online: false, status: "Last seen 3d ago" }, { id: 7, name: "Casey Brown", avatar: "CB", mutual: 7, online: true, status: "Online" }, { id: 8, name: "Jamie Wilson", avatar: "JW", mutual: 11, online: false, status: "Last seen 5h ago" }, ] const suggestions = [ { name: "Quinn Adams", avatar: "QA", mutual: 4, reason: "Followed by Alex Morgan" }, { name: "Drew Foster", avatar: "DF", mutual: 6, reason: "In Design Community group" }, { name: "Blake Torres", avatar: "BT", mutual: 2, reason: "Followed by Sam Rivera" }, ] export default function FriendsList() { return (

Friends

All Friends Online Suggestions {friends.map((friend) => (

{friend.avatar} {friend.online &&

}

{friend.name}

{friend.status}

{friend.mutual} mutual friends

))} {friends.filter(f => f.online).map((friend) => (

{friend.avatar}

{friend.name}

Online

))} {suggestions.map((s) => (

{s.avatar}

{s.name}

{s.mutual} mutual friends

{s.reason}

))}

Find Friends

) }

Friends List

Friends

Friends