Community

About

"use client" import { useState } from "react" import { Bell, ChevronRight, Clock, Flame, Gift, Home, Menu, MessageSquare, Settings, Shield, ShoppingBag, Users, X, } from "lucide-react" import Image from "next/image" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" export default function FreeFireDashboard() { const [sidebarOpen, setSidebarOpen] = useState(false) return ( <div className="min-h-screen bg-gradient-to-b from-zinc-900 to-black text-white"> {/* Mobile sidebar overlay */} {sidebarOpen && ( <div className="fixed inset-0 bg-black/80 z-40 lg:hidden" onClick={() => setSidebarOpen(false)} /> )} {/* Sidebar */} <div className={`fixed top-0 left-0 bottom-0 w-64 bg-zinc-900 border-r border-zinc-800 z-50 transition-transform duration-300 lg:translate-x-0 ${sidebarOpen ? "translate-x-0" : "-translate-x-full"}`} > <div className="flex items-center justify-between p-4 border-b border-zinc-800"> <div className="flex items-center gap-2"> <Flame className="h-6 w-6 text-orange-500" /> <span className="font-bold text-xl">FREE FIRE</span> </div> <Button variant="ghost" size="icon" onClick={() => setSidebarOpen(false)} className="lg:hidden"> <X className="h-5 w-5" /> </Button> </div> <div className="p-4"> <div className="flex flex-col gap-1"> <Link href="#" className="flex items-center gap-3 px-3 py-2 rounded-md bg-zinc-800 text-orange-500"> <Home className="h-5 w-5" /> <span>Home</span> </Link> <Link href="#" className="flex items-center gap-3 px-3 py-2 rounded-md hover:bg-zinc-800"> <Users className="h-5 w-5" /> <span>Squad</span> </Link> <Link href="#" className="flex items-center gap-3 px-3 py-2 rounded-md hover:bg-zinc-800"> <ShoppingBag className="h-5 w-5" /> <span>Store</span> </Link> <Link href="#" className="flex items-center gap-3 px-3 py-2 rounded-md hover:bg-zinc-800"> <Gift className="h-5 w-5" /> <span>Events</span> </Link> <Link href="#" className="flex items-center gap-3 px-3 py-2 rounded-md hover:bg-zinc-800"> <MessageSquare className="h-5 w-5" /> <span>Messages</span> </Link> <Link href="#" className="flex items-center gap-3 px-3 py-2 rounded-md hover:bg-zinc-800"> <Settings className="h-5 w-5" /> <span>Settings</span> </Link> </div> </div> </div> {/* Main content */} <div className="lg:pl-64"> {/* Header */} <header className="sticky top-0 z-30 flex items-center justify-between p-4 bg-zinc-900/80 backdrop-blur-sm border-b border-zinc-800"> <Button variant="ghost" size="icon" onClick={() => setSidebarOpen(true)} className="lg:hidden"> <Menu className="h-5 w-5" /> </Button> <div className="flex items-center gap-4 ml-auto"> <Button variant="ghost" size="icon" className="relative"> <Bell className="h-5 w-5" /> <span className="absolute top-0 right-0 w-2 h-2 bg-orange-500 rounded-full"></span> </Button> <div className="flex items-center gap-2"> <div className="relative w-8 h-8 rounded-full overflow-hidden border-2 border-orange-500"> <Image src="/placeholder.svg?height=32&width=32" alt="Profile" width={32} height={32} className="object-cover" /> </div> <span className="font-medium hidden sm:inline">SansiPlayer</span> </div> </div> </header> {/* Main content */} <main className="p-4"> {/* Player stats */} <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> <Card className="bg-zinc-800/50 border-zinc-700"> <CardHeader className="pb-2"> <CardTitle className="text-sm font-medium text-zinc-400">Level</CardTitle> </CardHeader> <CardContent> <div className="flex items-center justify-between"> <div className="text-2xl font-bold">42</div> <div className="text-xs text-zinc-400"> <Progress value={75} className="h-2 w-24 bg-zinc-700" /> <div className="mt-1">7,500 / 10,000 XP</div> </div> </div> </CardContent> </Card> <Card className="bg-zinc-800/50 border-zinc-700"> <CardHeader className="pb-2"> <CardTitle className="text-sm font-medium text-zinc-400">K/D Ratio</CardTitle> </CardHeader> <CardContent> <div className="flex items-center justify-between"> <div className="text-2xl font-bold">3.75</div> <div className="text-xs text-zinc-400"> <div className="flex items-center gap-1"> <span className="text-green-500">+0.25</span> <span>this week</span> </div> </div> </div> </CardContent> </Card> <Card className="bg-zinc-800/50 border-zinc-700"> <CardHeader className="pb-2"> <CardTitle className="text-sm font-medium text-zinc-400">Rank</CardTitle> </CardHeader> <CardContent> <div className="flex items-center justify-between"> <div className="text-2xl font-bold">Heroic</div> <div className="relative w-10 h-10"> <Shield className="h-10 w-10 text-yellow-500" /> </div> </div> </CardContent> </Card> </div> {/* Game modes */} <Tabs defaultValue="battle-royale" className="mb-6"> <TabsList className="bg-zinc-800/50 border border-zinc-700"> <TabsTrigger value="battle-royale">Battle Royale</TabsTrigger> <TabsTrigger value="clash-squad">Clash Squad</TabsTrigger> <TabsTrigger value="ranked">Ranked</TabsTrigger> </TabsList> <TabsContent value="battle-royale" className="mt-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <Card className="bg-zinc-800/50 border-zinc-700 overflow-hidden"> <div className="relative h-40"> <Image src="/placeholder.svg?height=160&width=400" alt="Bermuda Map" width={400} height={160} className="object-cover w-full h-full" /> <div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent flex items-end p-4"> <div> <h3 className="font-bold text-lg">Bermuda</h3> <p className="text-sm text-zinc-300">Classic Battle Royale</p> </div> </div> </div> <CardFooter className="flex justify-between"> <div className="flex items-center gap-1 text-sm"> <Users className="h-4 w-4" /> <span>50 squads</span> </div> <Button size="sm" className="bg-orange-500 hover:bg-orange-600"> Play Now </Button> </CardFooter> </Card> <Card className="bg-zinc-800/50 border-zinc-700 overflow-hidden"> <div className="relative h-40"> <Image src="/placeholder.svg?height=160&width=400" alt="Kalahari Map" width={400} height={160} className="object-cover w-full h-full" /> <div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent flex items-end p-4"> <div> <h3 className="font-bold text-lg">Kalahari</h3> <p className="text-sm text-zinc-300">Desert Map</p> </div> </div> </div> <CardFooter className="flex justify-between"> <div className="flex items-center gap-1 text-sm"> <Users className="h-4 w-4" /> <span>48 squads</span> </div> <Button size="sm" className="bg-orange-500 hover:bg-orange-600"> Play Now </Button> </CardFooter> </Card> </div> </TabsContent> <TabsContent value="clash-squad" className="mt-4"> <Card className="bg-zinc-800/50 border-zinc-700"> <CardContent className="pt-6"> <div className="text-center"> <h3 className="text-lg font-bold mb-2">4v4 Combat</h3> <p className="text-zinc-400 mb-4">Fast-paced action with your squad</p> <Button className="bg-orange-500 hover:bg-orange