Profile stat card

src/app/leaderboards/page.tsx

@@ -24,7 +24,7 @@ import {
 } from "@/components/ui/pagination";
 
 import LeaderboardRow from "@/app/leaderboards/components/LeaderboardRow";
-import CenterStatCard from "@/components/app/CenterStatCard";
+import StatCard from "@/components/app/StatCard";
 
 const globalLeaderboard = [
   {
@@ -191,14 +191,10 @@ export default function Leaderboards() {
 
         {/* Stats */}
         <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-          <CenterStatCard icon={Globe} label="Total Runners" value="12,453" />
+          <StatCard icon={Globe} label="Total Runners" value="12,453" />
-          <CenterStatCard icon={Trophy} label="World Record" value="2:34.21" />
+          <StatCard icon={Trophy} label="World Record" value="2:34.21" />
-          <CenterStatCard
+          <StatCard icon={TrendingUp} label="Runs This Week" value="847K" />
-            icon={TrendingUp}
+          <StatCard icon={Calendar} label="Until Reset" value="5d 12h" />
-            label="Runs This Week"
-            value="847K"
-          />
-          <CenterStatCard icon={Calendar} label="Until Reset" value="5d 12h" />
         </div>
 
         {/* Tabs + Filters */}

src/app/profile/components/ProfileStatCard.tsx

@@ -0,0 +1,46 @@
+import { LucideIcon } from "lucide-react";
+
+interface StatCardProps {
+  label: string;
+  value: string;
+  icon: LucideIcon;
+  trend?: string;
+  index?: number;
+}
+
+export default function ProfileStatCard({
+  label,
+  value,
+  icon: Icon,
+  trend,
+  index = 0,
+}: StatCardProps) {
+  return (
+    <div
+      className="bg-card border border-border rounded-xl p-5 card-hover animate-fade-in opacity-0"
+      style={{
+        animationDelay: `${index * 0.1}s`,
+        animationFillMode: "forwards",
+      }}
+    >
+      <div className="flex items-start justify-between mb-3">
+        <div className="p-2 rounded-lg bg-primary/10">
+          <Icon className="h-5 w-5 text-primary" />
+        </div>
+        {trend && (
+          <span
+            className={`text-xs font-medium ${
+              trend.startsWith("+")
+                ? "text-emerald-400"
+                : "text-muted-foreground"
+            }`}
+          >
+            {trend}
+          </span>
+        )}
+      </div>
+      <p className="text-2xl font-bold text-foreground font-mono">{value}</p>
+      <p className="text-sm text-muted-foreground mt-1">{label}</p>
+    </div>
+  );
+}

src/app/profile/page.tsx

@@ -7,7 +7,7 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
 
-import StatCard from "@/components/app/StatCard";
+import ProfileStatCard from "@/app/profile/components/ProfileStatCard";
 
 export default function Profile() {
   const user = {
@@ -64,26 +64,26 @@ export default function Profile() {
 
         {/* Stats */}
         <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-          <StatCard
+          <ProfileStatCard
             label="Total Runs"
             value={user.totalRuns.toLocaleString()}
             icon={Zap}
             index={0}
           />
-          <StatCard
+          <ProfileStatCard
             label="Clean Runs"
             value={user.cleanRuns.toString()}
             icon={Target}
             trend="+12 this week"
             index={1}
           />
-          <StatCard
+          <ProfileStatCard
             label="Global Rank"
             value={`#${user.rank}`}
             icon={Trophy}
             index={2}
           />
-          <StatCard
+          <ProfileStatCard
             label="Avg Time"
             value={user.avgTime}
             icon={Timer}

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

src/components/app/CenterStatCard.tsx

@@ -1,21 +0,0 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-
-export default function CenterStatCard({
-  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/components/app/StatCard.tsx

@@ -1,35 +1,21 @@
-import { LucideIcon } from "lucide-react";
+import { Card, CardHeader, CardTitle } from "@/components/ui/card";
 
-interface StatCardProps {
+export default function StatCard({
+  icon: Icon,
+  label,
+  value,
+}: {
+  icon: any;
   label: string;
   value: string;
-  icon: LucideIcon;
+}) {
-  trend?: string;
-  index?: number;
-}
-
-const StatCard = ({ label, value, icon: Icon, trend, index = 0 }: StatCardProps) => {
   return (
-    <div 
+    <Card>
-      className="bg-card border border-border rounded-xl p-5 card-hover animate-fade-in opacity-0"
+      <CardHeader className="pb-2 text-center">
-      style={{ animationDelay: `${index * 0.1}s`, animationFillMode: 'forwards' }}
+        <Icon className="mx-auto h-5 w-5 text-primary" />
-    >
+        <CardTitle className="font-mono text-2xl">{value}</CardTitle>
-      <div className="flex items-start justify-between mb-3">
+        <p className="text-xs text-muted-foreground">{label}</p>
-        <div className="p-2 rounded-lg bg-primary/10">
+      </CardHeader>
-          <Icon className="h-5 w-5 text-primary" />
+    </Card>
-        </div>
-        {trend && (
-          <span className={`text-xs font-medium ${
-            trend.startsWith('+') ? 'text-emerald-400' : 'text-muted-foreground'
-          }`}>
-            {trend}
-          </span>
-        )}
-      </div>
-      <p className="text-2xl font-bold text-foreground font-mono">{value}</p>
-      <p className="text-sm text-muted-foreground mt-1">{label}</p>
-    </div>
   );
-};
+}
-
-export default StatCard;