Leaderboard UI improvement

This commit is contained in:
2026-02-07 21:01:24 +01:00
parent 70c3eb1285
commit 9afd6e4fd9
5 changed files with 11 additions and 40 deletions
@@ -1,6 +1,6 @@
"use client";
import { Trophy, Calendar, Globe, TrendingUp } from "lucide-react";
import { Calendar, Globe } from "lucide-react";
import { useState } from "react";
import { Card } from "@/components/ui/card";
@@ -21,15 +21,14 @@ import {
PaginationPrevious,
} from "@/components/ui/pagination";
import LeaderboardRow from "@/app/leaderboards/components/LeaderboardRow";
import StatCard from "@/components/app/StatCard";
import LeaderboardRow from "@/app/leaderboard/components/LeaderboardRow";
import useAction from "@/hook/use-action";
import {
getGlobalLeaderboard,
getWeeklyLeaderboard,
} from "@/modules/leaderboard/actions";
export default function Leaderboards() {
export default function Leaderboard() {
const [global] = useAction(getGlobalLeaderboard);
const [weekly] = useAction(getWeeklyLeaderboard);
@@ -41,40 +40,12 @@ export default function Leaderboards() {
<div className="container mx-auto px-6 space-y-8">
{/* Header */}
<div>
<h1 className="text-4xl font-bold">Leaderboards</h1>
<p className="text-muted-foreground">
The fastest runners in the game. Will you claim a spot?
<h1 className="text-4xl font-bold">Leaderboard</h1>
<p className="text-sm text-muted-foreground mb-4">
1,284 runners · Ranked by performance
</p>
</div>
{/* Stats */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
<StatCard
icon={Globe}
label="Total Runners"
value="12,453"
index={0}
/>
<StatCard
icon={Trophy}
label="World Record"
value="2:34.21"
index={1}
/>
<StatCard
icon={TrendingUp}
label="Runs This Week"
value="847K"
index={2}
/>
<StatCard
icon={Calendar}
label="Until Reset"
value="5d 12h"
index={3}
/>
</div>
{/* Tabs + Filters */}
<div className="flex flex-col md:flex-row gap-4 justify-between">
<Tabs
+2 -2
View File
@@ -84,10 +84,10 @@ export default function Landing() {
<ArrowRight className="h-5 w-5 transition-transform group-hover:translate-x-1" />
</Button>
</Link>
<Link href="/leaderboards">
<Link href="/leaderboard">
<Button variant="hero">
<Trophy className="h-5 w-5" />
View Leaderboards
View Leaderboard
</Button>
</Link>
</div>
+1 -1
View File
@@ -34,7 +34,7 @@ const Footer = () => {
<div>
<h4 className="font-semibold text-foreground mb-4">Quick Links</h4>
<ul className="space-y-2">
{["Problems", "Leaderboards", "Categories", "Rules"].map(
{["Problems", "Leaderboard", "Categories", "Rules"].map(
(link) => (
<li key={link}>
<a
+2 -2
View File
@@ -13,9 +13,9 @@ const navs = [
name: "Problems",
},
{
link: "/leaderboards",
link: "/leaderboard",
icon: Trophy,
name: "Leaderboards",
name: "Leaderboard",
},
{
link: "/runs",