"use client" import { useState } from "react" import { motion } from "framer-motion" import { fadeIn, stagger, staggerItem, cardHoverTarget, buttonTap } from "@/lib/animations" import { GradientMesh } from "@/components/backgrounds/gradient-mesh" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { Gamepad2, Search, Clock, Download, Star, MoreHorizontal, Play, Trash2, List, Grid3X3 } from "lucide-react" import { cn } from "@/lib/utils" interface LibraryGame { title: string genre: string hours: string lastPlayed: string installed: boolean color: string image: string } const library: LibraryGame[] = [ { title: "Shadow Strike", genre: "Action", hours: "340", lastPlayed: "Today", installed: true, color: "from-red-500 to-orange-500", image: "SS" }, { title: "Dragon Quest VII", genre: "RPG", hours: "128", lastPlayed: "Yesterday", installed: true, color: "from-blue-500 to-purple-500", image: "DQ" }, { title: "Empire Rising", genre: "Strategy", hours: "89", lastPlayed: "3 days ago", installed: true, color: "from-green-500 to-teal-500", image: "ER" }, { title: "Turbo Racer X", genre: "Racing", hours: "45", lastPlayed: "1 week ago", installed: true, color: "from-yellow-500 to-red-500", image: "TR" }, { title: "Mystic Blocks", genre: "Puzzle", hours: "23", lastPlayed: "2 weeks ago", installed: false, color: "from-pink-500 to-rose-500", image: "MB" }, { title: "Crystal Saga Online", genre: "RPG", hours: "512", lastPlayed: "Today", installed: true, color: "from-indigo-500 to-violet-500", image: "CS" }, { title: "Brawl Arena", genre: "Action", hours: "89", lastPlayed: "5 days ago", installed: true, color: "from-red-600 to-rose-600", image: "BA" }, { title: "Tactical Command", genre: "Strategy", hours: "34", lastPlayed: "1 month ago", installed: false, color: "from-amber-500 to-orange-500", image: "TC" }, ] const filters = ["All", "Installed", "Recent", "Most Played"] export default function GameLibrary() { const [search, setSearch] = useState("") const [filter, setFilter] = useState("All") const [view, setView] = useState<"grid" | "list">("grid") const filtered = library.filter((g) => { const matchSearch = g.title.toLowerCase().includes(search.toLowerCase()) if (filter === "Installed") return matchSearch && g.installed if (filter === "Recent") return matchSearch if (filter === "Most Played") return matchSearch return matchSearch }) const sorted = filter === "Most Played" ? [...filtered].sort((a, b) => Number(b.hours) - Number(a.hours)) : filtered return (

My Library

{library.length} games in your collection.

setSearch(e.target.value)} className="pl-10" />

{filters.map((f) => ( ))}

{sorted.map((game) => ( {view === "grid" ? (

{game.image} {!game.installed && ( Not Installed )}

{game.title}

{game.genre}

{game.hours} hrs {game.lastPlayed}

{game.installed && ( )} ) : (

{game.image}

{game.title}

{game.genre} · {game.hours} hrs

{game.installed ? ( ) : ( )}

)} ))} {filtered.length === 0 && ( No games match your search. )}

) }

Game Library

My Library

My Library