Statcard

src/app/runs/components/StatCard.tsx

@@ -1,21 +0,0 @@
-import { Card, CardHeader, CardTitle } from "@/components/ui/card";
-
-export default 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 */}