[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { redirect } from "next/navigation" export default function Home() { redirect("/rankings/overall") } [V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]plaintext:file="public/logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-FVZR8KQ1esJ5C5F46i8yvWBY2pwWEk.png" isMerged="true" [V0_FILE]typescriptreact:file="app/admin/login/page.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { users } from "@/lib/data" export default function AdminLogin() { const [username, setUsername] = useState("") const [password, setPassword] = useState("") const [error, setError] = useState("") const router = useRouter() const handleLogin = (e: React.FormEvent) => { e.preventDefault() const user = users.find((u) => u.username === username && u.password === password) if (user) { // In a real app, you'd set a cookie or use a proper auth system localStorage.setItem("adminLoggedIn", "true") router.push("/admin/dashboard") } else { setError("Invalid username or password") } } return (

Admin Panel Login to access the admin dashboard

) } [V0_FILE]typescriptreact:file="components/ui/toast.tsx" isMerged="true" import * as React from "react" import * as ToastPrimitives from "@radix-ui/react-toast" import { cva, type VariantProps } from "class-variance-authority" import { X } from "lucide-react" import { cn } from "@/lib/utils" const ToastProvider = ToastPrimitives.Provider const ToastViewport = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastViewport.displayName = ToastPrimitives.Viewport.displayName const toastVariants = cva( "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full", { variants: { variant: { default: "border bg-background text-foreground", destructive: "destructive group border-destructive bg-destructive text-destructive-foreground", }, }, defaultVariants: { variant: "default", }, }, ) const Toast = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, variant, ...props }, ref) => { return }) Toast.displayName = ToastPrimitives.Root.displayName const ToastAction = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastAction.displayName = ToastPrimitives.Action.displayName const ToastClose = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastClose.displayName = ToastPrimitives.Close.displayName const ToastTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastTitle.displayName = ToastPrimitives.Title.displayName const ToastDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastDescription.displayName = ToastPrimitives.Description.displayName type ToastProps = React.ComponentPropsWithoutRef type ToastActionElement = React.ReactElement export { type ToastProps, type ToastActionElement, ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction, } [V0_FILE]typescriptreact:file="components/ui/toaster.tsx" isMerged="true" "use client" import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "@/components/ui/toast" import { useToast } from "@/components/ui/use-toast" export function Toaster() { const { toasts } = useToast() return ( {toasts.map(({ id, title, description, action, ...props }) => (

{title && {title}} {description && {description}}

{action} ))} ) } [V0_FILE]typescriptreact:file="app/admin/settings/page.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Switch } from "@/components/ui/switch" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { gameModes } from "@/lib/data" export default function AdminSettings() { const [successMessage, setSuccessMessage] = useState(null) const [siteSettings, setSiteSettings] = useState({ siteName: "MCTIERS", siteDescription: "Player rankings and tiers for competitive gaming", maintenanceMode: false, defaultGameMode: "overall", }) const [accountSettings, setAccountSettings] = useState({ username: "leco", currentPassword: "", newPassword: "", confirmPassword: "", }) // Load settings from localStorage on initial render useEffect(() => { const storedSettings = localStorage.getItem("mctiers-settings") if (storedSettings) { setSiteSettings(JSON.parse(storedSettings)) } }, []) // Clear success message after 3 seconds useEffect(() => { if (successMessage) { const timer = setTimeout(() => { setSuccessMessage(null) }, 3000) return () => clearTimeout(timer) } }, [successMessage]) const handleSaveSiteSettings = () => { // Save settings to localStorage localStorage.setItem("mctiers-settings", JSON.stringify(siteSettings)) // Show success message setSuccessMessage("Site settings saved successfully!") } const handleChangePassword = () => { if (accountSettings.newPassword !== accountSettings.confirmPassword) { setSuccessMessage("Error: New passwords don't match!") return } if (accountSettings.currentPassword !== "leco121") { setSuccessMessage("Error: Current password is incorrect!") return } // In a real app, this would make an API call to change the password console.log("Password changed successfully") // Show success message setSuccessMessage("Password changed successfully!") // Reset password fields setAccountSettings({ ...accountSettings, currentPassword: "", newPassword: "", confirmPassword: "", }) } return (

Settings

{successMessage && (

{successMessage}

)} Site Settings Account Site Settings Manage your site settings and preferences.

Site Name setSiteSettings({ ...siteSettings, siteName: e.target.value })} className="bg-[#0f1520] border-[#2a3244]" />

Site Description setSiteSettings({ ...siteSettings, siteDescription: e.target.value })} className="bg-[#0f1520] border-[#2a3244]" />

Default Game Mode

setSiteSettings({ ...siteSettings, maintenanceMode: checked })} /> Maintenance Mode

Account Settings Manage your account and change your password.

Username setAccountSettings({ ...accountSettings, username: e.target.value })} className="bg-[#0f1520] border-[#2a3244]" />

Current Password setAccountSettings({ ...accountSettings, currentPassword: e.target.value })} className="bg-[#0f1520] border-[#2a3244]" />

New Password setAccountSettings({ ...accountSettings, newPassword: e.target.value })} className="bg-[#0f1520] border-[#2a3244]" />

Confirm New Password setAccountSettings({ ...accountSettings, confirmPassword: e.target.value })} className="bg-[#0f1520] border-[#2a3244]" />

) } [V0_FILE]typescriptreact:file="app/admin/logs/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Button } from "@/components/ui/button" import { Trash2 } from "lucide-react" interface LogEntry { id: string action: string user: string timestamp: string details: string } export default function AdminLogs() { const [logs, setLogs] = useState([]) const [successMessage, setSuccessMessage] = useState(null) // Generate some sample logs on initial render useEffect(() => { const storedLogs = localStorage.getItem("mctiers-logs") if (storedLogs) { setLogs(JSON.parse(storedLogs)) } else { // Generate sample logs if none exist const sampleLogs: LogEntry[] = [ { id: "1", action: "Player Added", user: "leco", timestamp: new Date(Date.now() - 1000 * 60 * 5).toISOString(), // 5 minutes ago details: "Added player Lurrn to the leaderboard", }, { id: "2", action: "Player Updated", user: "leco", timestamp: new Date(Date.now() - 1000 * 60 * 30).toISOString(), // 30 minutes ago details: "Updated BlvckWlf's tier in Duels", }, { id: "3", action: "Game Mode Modified", user: "leco", timestamp: new Date(Date.now() - 1000 * 60 * 60 * 2).toISOString(), // 2 hours ago details: "Modified Axe game mode icon", }, { id: "4", action: "Player Deleted", user: "leco", timestamp: new Date(Date.now() - 1000 * 60 * 60 * 24).toISOString(), // 1 day ago details: "Removed player from Bedwars leaderboard", }, { id: "5", action: "Settings Changed", user: "leco", timestamp: new Date(Date.now() - 1000 * 60 * 60 * 48).toISOString(), // 2 days ago details: "Updated site description", }, ] setLogs(sampleLogs) localStorage.setItem("mctiers-logs", JSON.stringify(sampleLogs)) } }, []) // Clear success message after 3 seconds useEffect(() => { if (successMessage) { const timer = setTimeout(() => { setSuccessMessage(null) }, 3000) return () => clearTimeout(timer) } }, [successMessage]) // Add a new log entry (for demonstration purposes) const addLogEntry = () => { const newLog: LogEntry = { id: Date.now().toString(), action: "Manual Log", user: "leco", timestamp: new Date().toISOString(), details: "Manually added log entry", } const updatedLogs = [newLog, ...logs] setLogs(updatedLogs) localStorage.setItem("mctiers-logs", JSON.stringify(updatedLogs)) setSuccessMessage("New log entry added successfully!") } // Clear all logs const clearLogs = () => { setLogs([]) localStorage.removeItem("mctiers-logs") setSuccessMessage("All logs cleared successfully!") } // Format timestamp for display const formatTimestamp = (timestamp: string) => { const date = new Date(timestamp) return date.toLocaleString() } return (

Activity Logs

{successMessage &&

{successMessage}

}

Action User Timestamp Details {logs.length > 0 ? ( logs.map((log) => ( {log.action} {log.user} {formatTimestamp(log.timestamp)} {log.details} )) ) : ( No logs found. Activity will be recorded here. )}

) } [V0_FILE]typescriptreact:file="app/admin/layout.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useEffect, useState } from "react" import { useRouter, usePathname } from "next/navigation" import Link from "next/link" import Image from "next/image" import { Trophy, Users, GamepadIcon, Settings, LogOut, ClipboardList } from "lucide-react" export default function AdminLayout({ children, }: Readonly<{ children: React.ReactNode }>) { const [isLoggedIn, setIsLoggedIn] = useState(false) const [isLoading, setIsLoading] = useState(true) const router = useRouter() const pathname = usePathname() useEffect(() => { // Check if user is logged in const adminLoggedIn = localStorage.getItem("adminLoggedIn") === "true" setIsLoggedIn(adminLoggedIn) setIsLoading(false) // Redirect to login if not logged in and not already on login page if (!adminLoggedIn && pathname !== "/admin/login") { router.push("/admin/login") } }, [pathname, router]) const handleLogout = () => { localStorage.removeItem("adminLoggedIn") setIsLoggedIn(false) router.push("/admin/login") } // Show nothing while checking auth status if (isLoading) { return null } // If on login page or not logged in, just show the children (login form) if (pathname === "/admin/login" || !isLoggedIn) { return <>{children} } // Admin layout with sidebar return (

{children}

) } [V0_FILE]typescriptreact:file="lib/types.ts" isEdit="true" isMerged="true" export interface Player { id: string username: string avatarUrl: string rank: "Combat Master" | "Combat Ace" points: number region: "NA" | "EU" | "ASIA" tiers: PlayerTier[] } export interface PlayerTier { gameModeId: string tier: string } export interface GameMode { id: string name: string icon: string order: number } export interface User { username: string password: string } [V0_FILE]typescriptreact:file="lib/store.tsx" isMerged="true" "use client" import { createContext, useContext, useState, useEffect, type ReactNode } from "react" import { players as initialPlayers, gameModes as initialGameModes } from "@/lib/data" import type { Player, GameMode } from "@/lib/types" interface StoreContextType { players: Player[] gameModes: GameMode[] updatePlayers: (players: Player[]) => void updateGameModes: (gameModes: GameMode[]) => void } const StoreContext = createContext(undefined) export function StoreProvider({ children }: { children: ReactNode }) { const [players, setPlayers] = useState([]) const [gameModes, setGameModes] = useState([]) // Load initial data from localStorage or use default data useEffect(() => { const storedPlayers = localStorage.getItem("mctiers-players") const storedGameModes = localStorage.getItem("mctiers-gamemodes") if (storedPlayers) { setPlayers(JSON.parse(storedPlayers)) } else { setPlayers(initialPlayers) } if (storedGameModes) { setGameModes(JSON.parse(storedGameModes)) } else { setGameModes(initialGameModes) } }, []) // Update functions that also update localStorage const updatePlayers = (newPlayers: Player[]) => { setPlayers(newPlayers) localStorage.setItem("mctiers-players", JSON.stringify(newPlayers)) } const updateGameModes = (newGameModes: GameMode[]) => { setGameModes(newGameModes) localStorage.setItem("mctiers-gamemodes", JSON.stringify(newGameModes)) } return ( {children} ) } export function useStore() { const context = useContext(StoreContext) if (context === undefined) { throw new Error("useStore must be used within a StoreProvider") } return context } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" import { Toaster } from "@/components/ui/toaster" import { StoreProvider } from "@/lib/store" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Relife Tierlist", description: "Player rankings and tiers for competitive gaming", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/admin/players/page.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Label } from "@/components/ui/label" import { Plus, Pencil, Trash2 } from "lucide-react" import type { Player, PlayerTier } from "@/lib/types" import { useStore } from "@/lib/store" export default function AdminPlayers() { const { players, gameModes, updatePlayers } = useStore() const [searchQuery, setSearchQuery] = useState("") const [isAddPlayerOpen, setIsAddPlayerOpen] = useState(false) const [isEditPlayerOpen, setIsEditPlayerOpen] = useState(false) const [selectedPlayer, setSelectedPlayer] = useState(null) const [successMessage, setSuccessMessage] = useState(null) // New player form state const [newPlayer, setNewPlayer] = useState({ username: "", avatarUrl: "", rank: "Combat Ace" as "Combat Master" | "Combat Ace", points: 0, region: "NA" as "NA" | "EU" | "ASIA", tiers: {} as Record, }) // Clear success message after 3 seconds useEffect(() => { if (successMessage) { const timer = setTimeout(() => { setSuccessMessage(null) }, 3000) return () => clearTimeout(timer) } }, [successMessage]) // Filter players based on search query const filteredPlayers = players.filter((player) => player.username.toLowerCase().includes(searchQuery.toLowerCase())) const handleEditPlayer = (player: Player) => { // Create a deep copy of the player to avoid direct state mutation setSelectedPlayer(JSON.parse(JSON.stringify(player))) setIsEditPlayerOpen(true) } const handleAddPlayer = () => { // Convert tiers object to array format const tierArray: PlayerTier[] = [] Object.entries(newPlayer.tiers).forEach(([gameModeId, data]) => { if (data.tier && data.tier !== "none") { tierArray.push({ gameModeId, tier: data.tier, }) } }) // Create new player object const player: Player = { id: Date.now().toString(), // Generate a unique ID username: newPlayer.username, avatarUrl: newPlayer.avatarUrl || `https://mc-heads.net/avatar/${newPlayer.username}`, rank: newPlayer.rank, points: newPlayer.points, region: newPlayer.region, tiers: tierArray, } // Add player to state const updatedPlayers = [...players, player] updatePlayers(updatedPlayers) // Show success message setSuccessMessage(`Player ${player.username} has been added successfully!`) // Close dialog and reset form setIsAddPlayerOpen(false) setNewPlayer({ username: "", avatarUrl: "", rank: "Combat Ace", points: 0, region: "NA", tiers: {}, }) } const handleUpdatePlayer = () => { if (!selectedPlayer) return // Update player in state const updatedPlayers = players.map((p) => (p.id === selectedPlayer.id ? selectedPlayer : p)) updatePlayers(updatedPlayers) // Show success message setSuccessMessage(`Player ${selectedPlayer.username} has been updated successfully!`) // Close dialog setIsEditPlayerOpen(false) } const handleDeletePlayer = (playerId: string) => { // Find player name for success message const playerName = players.find((p) => p.id === playerId)?.username || "Player" // Remove player from state const updatedPlayers = players.filter((p) => p.id !== playerId) updatePlayers(updatedPlayers) // Show success message setSuccessMessage(`Player ${playerName} has been deleted successfully!`) } const handleTierChange = (gameModeId: string, value: string) => { if (!selectedPlayer) return const updatedTiers = [...selectedPlayer.tiers] const existingTierIndex = updatedTiers.findIndex((t) => t.gameModeId === gameModeId) if (value === "none") { // Remove tier if "none" is selected if (existingTierIndex !== -1) { updatedTiers.splice(existingTierIndex, 1) } } else { // Update or add tier if (existingTierIndex !== -1) { updatedTiers[existingTierIndex].tier = value } else { updatedTiers.push({ gameModeId, tier: value, }) } } setSelectedPlayer({ ...selectedPlayer, tiers: updatedTiers, }) } const handleNewPlayerTierChange = (gameModeId: string, value: string) => { setNewPlayer({ ...newPlayer, tiers: { ...newPlayer.tiers, [gameModeId]: { tier: value, }, }, }) } return (

Players

{successMessage &&

{successMessage}

}

setSearchQuery(e.target.value)} className="max-w-sm bg-[#1a2234] border-[#2a3244]" />

Username Rank Points Region Actions {filteredPlayers.map((player) => ( {player.username} {player.rank} {player.points} {player.region}

))}

{/* Add Player Dialog */} {/* Edit Player Dialog */}

) } [V0_FILE]typescriptreact:file="app/admin/gamemodes/page.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { Label } from "@/components/ui/label" import { Plus, Pencil, Trash2, MoveUp, MoveDown } from "lucide-react" import type { GameMode } from "@/lib/types" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { useStore } from "@/lib/store" export default function AdminGameModes() { const { gameModes, updateGameModes } = useStore() const [isAddGameModeOpen, setIsAddGameModeOpen] = useState(false) const [isEditGameModeOpen, setIsEditGameModeOpen] = useState(false) const [selectedGameMode, setSelectedGameMode] = useState(null) const [successMessage, setSuccessMessage] = useState(null) // New game mode form state const [newGameMode, setNewGameMode] = useState({ name: "", icon: "trophy", }) // Clear success message after 3 seconds useEffect(() => { if (successMessage) { const timer = setTimeout(() => { setSuccessMessage(null) }, 3000) return () => clearTimeout(timer) } }, [successMessage]) const handleEditGameMode = (gameMode: GameMode) => { setSelectedGameMode({ ...gameMode }) setIsEditGameModeOpen(true) } const handleAddGameMode = () => { // Create new game mode object const gameMode: GameMode = { id: Date.now().toString(), // Generate a unique ID name: newGameMode.name, icon: newGameMode.icon, order: gameModes.length + 1, // Set order to the end } // Add game mode to state const updatedGameModes = [...gameModes, gameMode] updateGameModes(updatedGameModes) // Show success message setSuccessMessage(`Game mode ${gameMode.name} has been added successfully!`) // Close dialog and reset form setIsAddGameModeOpen(false) setNewGameMode({ name: "", icon: "trophy", }) } const handleUpdateGameMode = () => { if (!selectedGameMode) return // Update game mode in state const updatedGameModes = gameModes.map((gm) => (gm.id === selectedGameMode.id ? selectedGameMode : gm)) updateGameModes(updatedGameModes) // Show success message setSuccessMessage(`Game mode ${selectedGameMode.name} has been updated successfully!`) // Close dialog setIsEditGameModeOpen(false) } const handleDeleteGameMode = (gameModeId: string) => { // Find game mode name for success message const gameModeName = gameModes.find((gm) => gm.id === gameModeId)?.name || "Game mode" // Remove game mode from state const updatedGameModes = gameModes.filter((gm) => gm.id !== gameModeId) updateGameModes(updatedGameModes) // Show success message setSuccessMessage(`Game mode ${gameModeName} has been deleted successfully!`) } const handleMoveUp = (index: number) => { if (index === 0) return // Already at the top const updatedGameModes = [...gameModes] const temp = updatedGameModes[index] updatedGameModes[index] = updatedGameModes[index - 1] updatedGameModes[index - 1] = temp // Update order property updatedGameModes.forEach((gm, i) => { gm.order = i + 1 }) updateGameModes(updatedGameModes) setSuccessMessage(`Game mode ${temp.name} moved up in the order.`) } const handleMoveDown = (index: number) => { if (index === gameModes.length - 1) return // Already at the bottom const updatedGameModes = [...gameModes] const temp = updatedGameModes[index] updatedGameModes[index] = updatedGameModes[index + 1] updatedGameModes[index + 1] = temp // Update order property updatedGameModes.forEach((gm, i) => { gm.order = i + 1 }) updateGameModes(updatedGameModes) setSuccessMessage(`Game mode ${temp.name} moved down in the order.`) } return (

Game Modes

{successMessage &&

{successMessage}

}

Order Name Icon Actions {gameModes.map((gameMode, index) => (

{gameMode.order}

{gameMode.name} {gameMode.icon}

))}

{/* Add Game Mode Dialog */} {/* Edit Game Mode Dialog */}

) } [V0_FILE]typescriptreact:file="app/rankings/overall/page.tsx" isEdit="true" isMerged="true" "use client" import { Navbar } from "@/components/navbar" import { PlayerCard } from "@/components/player-card" import { useStore } from "@/lib/store" export default function OverallRankings() { const { players, gameModes } = useStore() // Sort players by points in descending order const sortedPlayers = [...players].sort((a, b) => b.points - a.points) return (

PLAYER

REGION

TIERS

{sortedPlayers.map((player, index) => ( ))}

) } [V0_FILE]typescriptreact:file="app/rankings/uhc/page.tsx" isEdit="true" isMerged="true" "use client" import { Navbar } from "@/components/navbar" import { TierList } from "@/components/tier-list" import { Button } from "@/components/ui/button" import { Eye } from "lucide-react" import { useStore } from "@/lib/store" export default function UHCRankings() { const { players } = useStore() return (

) } [V0_FILE]typescriptreact:file="app/rankings/duels/page.tsx" isEdit="true" isMerged="true" "use client" import { Navbar } from "@/components/navbar" import { TierList } from "@/components/tier-list" import { Button } from "@/components/ui/button" import { Eye } from "lucide-react" import { useStore } from "@/lib/store" export default function DuelsRankings() { const { players } = useStore() return (

) } [V0_FILE]typescriptreact:file="app/rankings/bedwars/page.tsx" isEdit="true" isMerged="true" "use client" import { Navbar } from "@/components/navbar" import { TierList } from "@/components/tier-list" import { Button } from "@/components/ui/button" import { Eye } from "lucide-react" import { useStore } from "@/lib/store" export default function BedwarsRankings() { const { players } = useStore() return (

) } [V0_FILE]typescriptreact:file="app/rankings/sword/page.tsx" isEdit="true" isMerged="true" "use client" import { Navbar } from "@/components/navbar" import { TierList } from "@/components/tier-list" import { Button } from "@/components/ui/button" import { Eye } from "lucide-react" import { useStore } from "@/lib/store" export default function SwordRankings() { const { players } = useStore() return (

) } [V0_FILE]typescriptreact:file="app/rankings/axe/page.tsx" isEdit="true" isMerged="true" "use client" import { Navbar } from "@/components/navbar" import { TierList } from "@/components/tier-list" import { Button } from "@/components/ui/button" import { Eye } from "lucide-react" import { useStore } from "@/lib/store" export default function AxeRankings() { const { players } = useStore() return (

) } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } } @layer base { * { @apply border-border; } body { background-color: #0f1520; color: hsl(var(--foreground)); } } .tier-badge { display: flex; align-items: center; justify-content: center; border-radius: 9999px; width: 2rem; height: 2rem; font-size: 0.75rem; font-weight: 700; position: relative; } .tier-badge.ht1 { background-color: #eab308; color: #000; } .tier-badge.ht2 { background-color: #9ca3af; color: #000; } .tier-badge.ht3 { background-color: #b45309; color: #fff; } .tier-badge.lt1 { background-color: #eab308; color: #000; } .tier-badge.lt2 { background-color: #9ca3af; color: #000; } .tier-badge.lt3 { background-color: #b45309; color: #fff; } .tier-badge.lt4 { background-color: #9333ea; color: #fff; } .tier-badge.ht4 { background-color: #9333ea; color: #fff; } .region-badge { padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.25rem; padding-bottom: 0.25rem; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 700; } .region-badge.na { background-color: #991b1b; color: #fff; } .region-badge.eu { background-color: #166534; color: #fff; } .region-badge.asia { background-color: #1e40af; color: #fff; } .rank-badge { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; } .rank-badge.master { color: #eab308; } .rank-badge.ace { color: #ef4444; } .gamemode-icon { width: 1.5rem; height: 1.5rem; } .tier-column { min-width: 300px; background-color: #1a2234; border-radius: 0.375rem; } .tier-header { display: flex; align-items: center; justify-content: center; padding: 0.5rem; font-size: 1.125rem; font-weight: 700; } .tier-1-header { background-color: #ca8a04; } .tier-2-header { background-color: #6b7280; } .tier-3-header { background-color: #b45309; } .tier-4-header { background-color: #1a2234; } .tier-5-header { background-color: #1a2234; } .tier-player { display: flex; align-items: center; padding: 0.5rem; border-bottom-width: 1px; border-color: #2a3244; cursor: pointer; } .tier-player:hover { background-color: #2a3244; } [V0_FILE]typescriptreact:file="app/admin/dashboard/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Trophy, Users, GamepadIcon, Activity } from "lucide-react" import { useStore } from "@/lib/store" export default function AdminDashboard() { const { players, gameModes } = useStore() const [recentUpdates, setRecentUpdates] = useState<{ action: string; timestamp: string }[]>([ { action: "Added player Lurrn to UHC leaderboard", timestamp: "2 hours ago" }, { action: "Updated BlvckWlf's tier in Duels", timestamp: "5 hours ago" }, { action: "Modified Axe game mode icon", timestamp: "Yesterday" }, { action: "Removed player from Bedwars leaderboard", timestamp: "2 days ago" }, ]) // Calculate stats const totalPlayers = players.length const totalGameModes = gameModes.length // Find top ranked player const topPlayer = [...players].sort((a, b) => b.points - a.points)[0] // Count players by region const regionCounts = players.reduce( (acc, player) => { acc[player.region] = (acc[player.region] || 0) + 1 return acc }, {} as Record, ) // Count players by rank const rankCounts = players.reduce( (acc, player) => { acc[player.rank] = (acc[player.rank] || 0) + 1 return acc }, {} as Record, ) return (

Admin Dashboard

Total Players

{totalPlayers}

+2 from last week

Game Modes

{totalGameModes}

+1 from last month

Top Rank

{topPlayer?.username || "N/A"}

{topPlayer?.points || 0} points

Active Regions

{Object.keys(regionCounts).length}

{Object.keys(regionCounts).join(", ")}

Recent Updates Latest changes to the leaderboard

{recentUpdates.map((update, index) => (

{update.action}

{update.timestamp}

))}

Player Distribution Players by rank and region

By Rank

Combat Master

{rankCounts["Combat Master"] || 0}

Combat Ace

{rankCounts["Combat Ace"] || 0}

By Region

North America

{regionCounts["NA"] || 0}

Europe

{regionCounts["EU"] || 0}

Asia

{regionCounts["ASIA"] || 0}

) } [V0_FILE]typescriptreact:file="lib/data.ts" isEdit="true" import type { Player, GameMode } from "./types" export const gameModes: GameMode[] = [ { id: "overall", name: "Overall", icon: "trophy", order: 1 }, { id: "netherite-pot", name: "Netherite Pot", icon: "flask", order: 2 }, { id: "diamond-pot", name: "Diamond Pot", icon: "flask", order: 3 }, { id: "sword", name: "Sword", icon: "sword", order: 4 }, { id: "uhc", name: "UHC", icon: "heart", order: 5 }, { id: "axe", name: "Axe", icon: "axe", order: 6 }, { id: "crystal", name: "Crystal", icon: "gem", order: 7 }, { id: "smp", name: "SMP", icon: "mountain", order: 8 }, ] export const players: Player[] = [ { id: "1", username: "Marlowww", avatarUrl: "https://mc-heads.net/avatar/Marlowww", rank: "Combat Master", points: 355, region: "NA", tiers: [ { gameModeId: "overall", tier: "HT1" }, { gameModeId: "netherite-pot", tier: "HT1" }, { gameModeId: "diamond-pot", tier: "HT1" }, { gameModeId: "uhc", tier: "LT1" }, { gameModeId: "sword", tier: "HT2" }, { gameModeId: "axe", tier: "LT2" }, { gameModeId: "crystal", tier: "HT3" }, { gameModeId: "smp", tier: "LT3" }, ], }, { id: "2", username: "ItzRealMe", avatarUrl: "https://mc-heads.net/avatar/ItzRealMe", rank: "Combat Master", points: 320, region: "NA", tiers: [ { gameModeId: "overall", tier: "HT3" }, { gameModeId: "netherite-pot", tier: "HT3" }, { gameModeId: "diamond-pot", tier: "HT1" }, { gameModeId: "uhc", tier: "HT1" }, { gameModeId: "sword", tier: "LT2" }, { gameModeId: "axe", tier: "LT2" }, { gameModeId: "crystal", tier: "HT1" }, { gameModeId: "smp", tier: "HT2" }, ], }, { id: "3", username: "Swight", avatarUrl: "https://mc-heads.net/avatar/Swight", rank: "Combat Master", points: 250, region: "NA", tiers: [ { gameModeId: "overall", tier: "HT1" }, { gameModeId: "netherite-pot", tier: "HT2" }, { gameModeId: "diamond-pot", tier: "LT2" }, { gameModeId: "uhc", tier: "LT2" }, { gameModeId: "sword", tier: "HT3" }, { gameModeId: "axe", tier: "LT3" }, { gameModeId: "crystal", tier: "HT2" }, { gameModeId: "smp", tier: "LT1" }, ], }, { id: "4", username: "coldified", avatarUrl: "https://mc-heads.net/avatar/coldified", rank: "Combat Ace", points: 206, region: "EU", tiers: [ { gameModeId: "overall", tier: "LT2" }, { gameModeId: "netherite-pot", tier: "LT2" }, { gameModeId: "diamond-pot", tier: "HT3" }, { gameModeId: "uhc", tier: "HT3" }, { gameModeId: "sword", tier: "HT1" }, { gameModeId: "axe", tier: "HT1" }, { gameModeId: "crystal", tier: "LT3" }, { gameModeId: "smp", tier: "HT3" }, ], }, { id: "5", username: "BlvckWlf", avatarUrl: "https://mc-heads.net/avatar/BlvckWlf", rank: "Combat Ace", points: 206, region: "EU", tiers: [ { gameModeId: "overall", tier: "HT1" }, { gameModeId: "netherite-pot", tier: "LT2" }, { gameModeId: "diamond-pot", tier: "HT3" }, { gameModeId: "uhc", tier: "HT3" }, { gameModeId: "sword", tier: "HT1" }, { gameModeId: "axe", tier: "HT2" }, { gameModeId: "crystal", tier: "LT2" }, { gameModeId: "smp", tier: "HT1" }, ], }, { id: "6", username: "Kylaz", avatarUrl: "https://mc-heads.net/avatar/Kylaz", rank: "Combat Ace", points: 190, region: "ASIA", tiers: [ { gameModeId: "overall", tier: "HT1" }, { gameModeId: "netherite-pot", tier: "HT2" }, { gameModeId: "diamond-pot", tier: "LT3" }, { gameModeId: "uhc", tier: "LT3" }, { gameModeId: "sword", tier: "LT2" }, { gameModeId: "axe", tier: "HT3" }, { gameModeId: "crystal", tier: "HT1" }, { gameModeId: "smp", tier: "LT2" }, ], }, { id: "7", username: "Lurrn", avatarUrl: "https://mc-heads.net/avatar/Lurrn", rank: "Combat Ace", points: 186, region: "EU", tiers: [ { gameModeId: "overall", tier: "LT3" }, { gameModeId: "netherite-pot", tier: "LT4" }, { gameModeId: "diamond-pot", tier: "HT1" }, { gameModeId: "uhc", tier: "HT1" }, { gameModeId: "sword", tier: "LT2" }, { gameModeId: "axe", tier: "HT2" }, { gameModeId: "crystal", tier: "LT1" }, { gameModeId: "smp", tier: "HT4" }, ], }, { id: "8", username: "janekv", avatarUrl: "https://mc-heads.net/avatar/janekv", rank: "Combat Ace", points: 169, region: "ASIA", tiers: [ { gameModeId: "overall", tier: "LT2" }, { gameModeId: "netherite-pot", tier: "LT2" }, { gameModeId: "diamond-pot", tier: "LT3" }, { gameModeId: "uhc", tier: "LT3" }, { gameModeId: "sword", tier: "LT1" }, { gameModeId: "axe", tier: "HT2" }, { gameModeId: "crystal", tier: "LT3" }, { gameModeId: "smp", tier: "HT1" }, ], }, ] export const users = [ { username: "leco", password: "leco121", }, ] [V0_FILE]typescriptreact:file="components/navbar.tsx" isEdit="true" "use client" import type React from "react" import Link from "next/link" import { Trophy, Gem, Heart, FlaskRoundIcon as Flask, Gamepad2, Sword, Axe, Mountain } from "lucide-react" import { Search } from "./search" import { useStore } from "@/lib/store" interface NavbarProps { activeGameMode?: string } export function Navbar({ activeGameMode = "overall" }: NavbarProps) { const { gameModes } = useStore() // Map of icon names to components const iconMap: Record = { trophy: , flask: ( ), sword: , heart: , axe: , gem: , mountain: , } // Sort game modes by order const sortedGameModes = [...gameModes].sort((a, b) => a.order - b.order) return (

RELIFE TIERLIST

{sortedGameModes.map((gameMode) => ( {iconMap[gameMode.icon] || } ))}

) } [V0_FILE]typescriptreact:file="components/search.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import { useRouter } from "next/navigation" import { Input } from "@/components/ui/input" import { SearchIcon, X, Trophy } from "lucide-react" import { useStore } from "@/lib/store" import Image from "next/image" import { Dialog, DialogContent } from "@/components/ui/dialog" export function Search() { const { players } = useStore() const router = useRouter() const [searchQuery, setSearchQuery] = useState("") const [showResults, setShowResults] = useState(false) const [isDialogOpen, setIsDialogOpen] = useState(false) const searchRef = useRef(null) // Filter players based on search query const filteredPlayers = players .filter((player) => player.username.toLowerCase().includes(searchQuery.toLowerCase())) .slice(0, 5) // Limit to 5 results const handleSearch = (e: React.FormEvent) => { e.preventDefault() if (searchQuery.trim() === "") return // If there's only one result, navigate to that player's profile if (filteredPlayers.length === 1) { // Find the player's position in the overall rankings const position = players.sort((a, b) => b.points - a.points).findIndex((p) => p.id === filteredPlayers[0].id) + 1 // Open dialog with player details setIsDialogOpen(true) } else if (filteredPlayers.length > 1) { // Show results dropdown setShowResults(true) } } const handlePlayerClick = (playerId: string) => { // Find the player's position in the overall rankings const position = players.sort((a, b) => b.points - a.points).findIndex((p) => p.id === playerId) + 1 // Close results dropdown setShowResults(false) setSearchQuery("") // Open dialog with player details setIsDialogOpen(true) } // Close results when clicking outside useEffect(() => { function handleClickOutside(event: MouseEvent) { if (searchRef.current && !searchRef.current.contains(event.target as Node)) { setShowResults(false) } } document.addEventListener("mousedown", handleClickOutside) return () => { document.removeEventListener("mousedown", handleClickOutside) } }, []) return (

{ setSearchQuery(e.target.value) if (e.target.value.length > 0) { setShowResults(true) } else { setShowResults(false) } }} className="w-[200px] pl-9 bg-[#1a2234] border-[#2a3244] text-sm rounded-md" /> {searchQuery && ( )} {/* Search Results Dropdown */} {showResults && searchQuery && (

{filteredPlayers.length > 0 ? (

handlePlayerClick(player.id)} >

{player.username}

) : (

No players found

)}

)} {/* Player Details Dialog */}

) } [V0_FILE]typescriptreact:file="components/player-card.tsx" isEdit="true" "use client" import type React from "react" import Image from "next/image" import { Trophy, Award, Gem, Heart, FlaskRoundIcon as Flask, Sword, Axe, Mountain } from "lucide-react" import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog" import { PlayerProfile } from "./player-profile" import type { Player, GameMode } from "@/lib/types" interface PlayerCardProps { player: Player position: number gameModes: GameMode[] } export function PlayerCard({ player, position, gameModes }: PlayerCardProps) { // Map of icon names to components const iconMap: Record = { trophy: , flask: , sword: , heart: , axe: , gem: , mountain: , } return ( ) } [V0_FILE]typescriptreact:file="components/player-profile.tsx" isEdit="true" "use client" import type React from "react" import Image from "next/image" import { Trophy, Award, X, Gem, Heart, FlaskRoundIcon as Flask, Sword, Axe, Mountain } from "lucide-react" import { DialogClose } from "@/components/ui/dialog" import type { Player, GameMode } from "@/lib/types" interface PlayerProfileProps { player: Player position: number gameModes: GameMode[] } export function PlayerProfile({ player, position, gameModes }: PlayerProfileProps) { // Map of icon names to components const iconMap: Record = { trophy: , flask: , sword: , heart: , axe: , gem: , mountain: , } return (

{player.username}

{player.rank === "Combat Master" ? ( ) : ( )} {player.rank}

{player.region === "NA" ? "North America" : player.region === "EU" ? "Europe" : "Asia"}

POSITION

{position}.

OVERALL ({player.points} points)

TIERS

{player.tiers.map((tier, index) => { const gameMode = gameModes.find((gm) => gm.id === tier.gameModeId) return (

{gameMode && iconMap[gameMode.icon]}

{tier.tier}

) })} {Array(8 - player.tiers.length) .fill(0) .map((_, index) => (

))}

) } [V0_FILE]typescriptreact:file="components/tier-list.tsx" isEdit="true" "use client" import type React from "react" import Image from "next/image" import { ChevronDown, Trophy, Gem, Heart, FlaskRoundIcon as Flask, Sword, Axe, Mountain } from "lucide-react" import type { Player } from "@/lib/types" import { useStore } from "@/lib/store" interface TierListProps { players: Player[] gameMode: string } export function TierList({ players, gameMode }: TierListProps) { const { gameModes } = useStore() // Get the current game mode icon const currentGameMode = gameModes.find((gm) => gm.id === gameMode) const gameModeIcon = currentGameMode?.icon || "trophy" // Map of icon names to components const iconMap: Record = { trophy: , flask: , sword: , heart: , axe: , gem: , mountain: , } // Group players by tier for the specific gameMode const tier1Players: Player[] = [] const tier2Players: Player[] = [] const tier3Players: Player[] = [] const tier4Players: Player[] = [] const tier5Players: Player[] = [] players.forEach((player) => { const tierForGameMode = player.tiers.find((t) => t.gameModeId === gameMode) if (!tierForGameMode) return if (tierForGameMode.tier === "HT1") { tier1Players.push(player) } else if (tierForGameMode.tier === "HT2") { tier2Players.push(player) } else if (tierForGameMode.tier === "HT3") { tier3Players.push(player) } else if (tierForGameMode.tier === "HT4" || tierForGameMode.tier === "LT1") { tier4Players.push(player) } else { tier5Players.push(player) } }) return (

{iconMap[gameModeIcon]} Tier 1

{tier1Players.map((player, index) => (

{player.username}

))}

{iconMap[gameModeIcon]} Tier 2

{tier2Players.map((player, index) => (

{player.username}

))}

{iconMap[gameModeIcon]} Tier 3

{tier3Players.map((player, index) => (

{player.username}

))}

{iconMap[gameModeIcon]} Tier 4

{tier4Players.map((player, index) => (

{player.username}

))}

{iconMap[gameModeIcon]} Tier 5

{tier5Players.map((player, index) => (

{player.username}

))}

) } [V0_FILE]typescriptreact:file="app/rankings/netherite-pot/page.tsx" "use client" import { Navbar } from "@/components/navbar" import { TierList } from "@/components/tier-list" import { Button } from "@/components/ui/button" import { Eye } from "lucide-react" import { useStore } from "@/lib/store" export default function NetheritePotRankings() { const { players } = useStore() return (

) } [V0_FILE]typescriptreact:file="app/rankings/diamond-pot/page.tsx" "use client" import { Navbar } from "@/components/navbar" import { TierList } from "@/components/tier-list" import { Button } from "@/components/ui/button" import { Eye } from "lucide-react" import { useStore } from "@/lib/store" export default function DiamondPotRankings() { const { players } = useStore() return (

) } [V0_FILE]typescriptreact:file="app/rankings/crystal/page.tsx" "use client" import { Navbar } from "@/components/navbar" import { TierList } from "@/components/tier-list" import { Button } from "@/components/ui/button" import { Eye } from "lucide-react" import { useStore } from "@/lib/store" export default function CrystalRankings() { const { players } = useStore() return (

) } [V0_FILE]typescriptreact:file="app/rankings/smp/page.tsx" "use client" import { Navbar } from "@/components/navbar" import { TierList } from "@/components/tier-list" import { Button } from "@/components/ui/button" import { Eye } from "lucide-react" import { useStore } from "@/lib/store" export default function SMPRankings() { const { players } = useStore() return (

) } [V0_FILE]typescriptreact:file="app/rankings/potions/page.tsx" isDeleted="true" isEdit="true" ...deleted... [V0_FILE]typescriptreact:file="app/rankings/bridge/page.tsx" isDeleted="true" isEdit="true" ...deleted... [V0_FILE]typescriptreact:file="app/rankings/hammer/page.tsx" isDeleted="true" isEdit="true" ...deleted...

Settings

Activity Logs

Players

Game Mode Tiers

Game Mode Tiers

Game Modes

Admin Dashboard

By Rank

By Region

RELIFE TIERLIST

{filteredPlayers[0].username}

POSITION

{player.username}

POSITION

TIERS

About

Tags

Share

About

Tags

Share

More from spaceyleco-6209

More Templates Like This

About

Tags

Share

About

Tags

Share

More from spaceyleco-6209

More Templates Like This