Statcard

src/app/leaderboards/page.tsx

@@ -24,6 +24,7 @@ import {
 } from "@/components/ui/pagination";
 
 import LeaderboardRow from "@/app/leaderboards/components/LeaderboardRow";
+import CenterStatCard from "@/components/app/CenterStatCard";
 
 const globalLeaderboard = [
   {
@@ -190,10 +191,14 @@ export default function Leaderboards() {
 
         {/* Stats */}
         <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-          <StatCard icon={Globe} label="Total Runners" value="12,453" />
-          <StatCard icon={Trophy} label="World Record" value="2:34.21" />
-          <StatCard icon={TrendingUp} label="Runs This Week" value="847K" />
-          <StatCard icon={Calendar} label="Until Reset" value="5d 12h" />
+          <CenterStatCard icon={Globe} label="Total Runners" value="12,453" />
+          <CenterStatCard icon={Trophy} label="World Record" value="2:34.21" />
+          <CenterStatCard
+            icon={TrendingUp}
+            label="Runs This Week"
+            value="847K"
+          />
+          <CenterStatCard icon={Calendar} label="Until Reset" value="5d 12h" />
         </div>
 
         {/* Tabs + Filters */}
@@ -269,25 +274,3 @@ export default function Leaderboards() {
     </div>
   );
 }
-
-/* ---------- helpers ---------- */
-
-function StatCard({
-  icon: Icon,
-  label,
-  value,
-}: {
-  icon: any;
-  label: string;
-  value: string;
-}) {
-  return (
-    <Card>
-      <CardHeader className="pb-2 text-center">
-        <Icon className="mx-auto h-5 w-5 text-primary" />
-        <CardTitle className="font-mono text-2xl">{value}</CardTitle>
-        <p className="text-xs text-muted-foreground">{label}</p>
-      </CardHeader>
-    </Card>
-  );
-}

src/app/runs/page.tsx

@@ -15,7 +15,7 @@ import {
 } from "@/components/ui/table";
 import { cn } from "@/lib/utils";
 import LiveRunRow from "./components/LiveRunNow";
-import StatCard from "./components/StatCard";
+import CenterStatCard from "@/components/app/CenterStatCard";
 
 /* ---------------- mock data ---------------- */
 
@@ -81,10 +81,10 @@ export default function LiveRuns() {
 
         {/* Stats */}
         <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-          <StatCard icon={Zap} label="Live Runs" value="42" />
-          <StatCard icon={Users} label="Active Runners" value="39" />
-          <StatCard icon={Timer} label="Avg Runtime" value="1:47" />
-          <StatCard icon={TrendingUp} label="PB Pace Runs" value="7" />
+          <CenterStatCard icon={Zap} label="Live Runs" value="42" />
+          <CenterStatCard icon={Users} label="Active Runners" value="39" />
+          <CenterStatCard icon={Timer} label="Avg Runtime" value="1:47" />
+          <CenterStatCard icon={TrendingUp} label="PB Pace Runs" value="7" />
         </div>
 
         {/* Filters */}

src/components/app/CenterStatCard.tsx

@@ -1,6 +1,6 @@
-import { Card, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
-export default function StatCard({
+export default function CenterStatCard({
   icon: Icon,
   label,
   value,