"use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { fadeIn, stagger, staggerItem, cardHoverTarget, buttonTap } from "@/lib/animations" import { GradientMesh } from "@/components/backgrounds/gradient-mesh" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Avatar, AvatarFallback } from "@/components/ui/avatar" import { Input } from "@/components/ui/input" import { Separator } from "@/components/ui/separator" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Users, Search, UserPlus, MessageCircle, Gamepad2, Clock, X, Check, MoreHorizontal } from "lucide-react" interface Friend { name: string initials: string status: "Online" | "In Game" | "Away" | "Offline" game?: string lastSeen?: string } const friends: Friend[] = [ { name: "ShadowNinja", initials: "SN", status: "Online" }, { name: "BlazeFury", initials: "BF", status: "In Game", game: "Shadow Strike" }, { name: "CrystalMage", initials: "CM", status: "Online" }, { name: "ThunderStrike", initials: "TS", status: "In Game", game: "Dragon Quest VII" }, { name: "NightHawk", initials: "NH", status: "Away", lastSeen: "10 min ago" }, { name: "SteelPhoenix", initials: "SP", status: "Online" }, { name: "FrostByte", initials: "FB", status: "Offline", lastSeen: "2 hrs ago" }, { name: "IronWolf", initials: "IW", status: "Offline", lastSeen: "1 day ago" }, { name: "QuantumRift", initials: "QR", status: "In Game", game: "Empire Rising" }, { name: "ArcAngel", initials: "AA", status: "Offline", lastSeen: "3 days ago" }, ] const pendingRequests = [ { name: "NeonKnight", initials: "NK", mutual: 3 }, { name: "StarChaser", initials: "SC", mutual: 1 }, ] const statusColor = (status: string) => { switch (status) { case "Online": return "bg-green-500" case "In Game": return "bg-blue-500" case "Away": return "bg-amber-500" default: return "bg-muted-foreground/30" } } export default function FriendsGaming() { const [search, setSearch] = useState("") const filtered = friends.filter((f) => f.name.toLowerCase().includes(search.toLowerCase())) return (

Friends

{friends.filter((f) => f.status === "Online" || f.status === "In Game").length} online

setSearch(e.target.value)} className="pl-10" /> All ({friends.length}) Online ({friends.filter((f) => f.status !== "Offline").length}) Pending ({pendingRequests.length})

{filtered.map((friend) => (

{friend.initials}

{friend.name}

{friend.status} {friend.game && <>· {friend.game}} {friend.lastSeen && <>· {friend.lastSeen}}

))}

{filtered.length === 0 && (

No friends match your search.

)}

{friends.filter((f) => f.status !== "Offline").map((friend) => (

{friend.initials}

{friend.name}

{friend.status}{friend.game ? ` - ${friend.game}` : ""}

))}

{pendingRequests.map((req) => (

{req.initials}

{req.name}

{req.mutual} mutual friends

))}

) }

Friends Gaming

Friends

Friends