Component structure

2026-02-03 15:00:56 +01:00
parent dd647db28b
commit db776231a1
5 changed files with 110 additions and 102 deletions
@@ -0,0 +1,73 @@
+import { Trophy } from "lucide-react";
+
+interface LeaderboardRowProps {
+  rank: number;
+  username: string;
+  pb: string;
+  runsCount: number;
+  category: string;
+  index?: number;
+}
+
+const LeaderboardRow = ({ rank, username, pb, runsCount, category, index = 0 }: LeaderboardRowProps) => {
+  const getRankStyle = (rank: number) => {
+    if (rank === 1) return "rank-gold";
+    if (rank === 2) return "rank-silver";
+    if (rank === 3) return "rank-bronze";
+    return "bg-secondary text-muted-foreground";
+  };
+
+  const getRankGlow = (rank: number) => {
+    if (rank === 1) return "glow-gold";
+    if (rank === 2) return "glow-silver";
+    if (rank === 3) return "glow-bronze";
+    return "";
+  };
+
+  const isTopThree = rank <= 3;
+
+  return (
+    <tr 
+      className={`group border-b border-border hover:bg-secondary/50 transition-colors animate-fade-in opacity-0 ${isTopThree ? 'bg-secondary/30' : ''}`}
+      style={{ animationDelay: `${index * 0.05}s`, animationFillMode: 'forwards' }}
+    >
+      {/* Rank */}
+      <td className="py-4 px-4">
+        <div className={`inline-flex items-center justify-center w-8 h-8 rounded-lg text-sm font-bold ${getRankStyle(rank)} ${getRankGlow(rank)}`}>
+          {rank <= 3 ? <Trophy className="h-4 w-4" /> : rank}
+        </div>
+      </td>
+
+      {/* Username */}
+      <td className="py-4 px-4">
+        <div className="flex items-center gap-3">
+          <div className="w-8 h-8 rounded-full bg-linear-to-br from-primary/50 to-primary/20 flex items-center justify-center text-xs font-bold text-primary">
+            {username.charAt(0).toUpperCase()}
+          </div>
+          <span className={`font-medium ${isTopThree ? 'text-foreground' : 'text-secondary-foreground'} group-hover:text-primary transition-colors`}>
+            {username}
+          </span>
+        </div>
+      </td>
+
+      {/* PB */}
+      <td className="py-4 px-4">
+        <span className="font-mono text-primary font-semibold">{pb}</span>
+      </td>
+
+      {/* Runs */}
+      <td className="py-4 px-4 text-muted-foreground">
+        {runsCount}
+      </td>
+
+      {/* Category */}
+      <td className="py-4 px-4">
+        <span className="px-2 py-1 rounded-md bg-secondary text-muted-foreground text-xs">
+          {category}
+        </span>
+      </td>
+    </tr>
+  );
+};
+
+export default LeaderboardRow;
@@ -23,7 +23,7 @@ import {
  PaginationPrevious,
 } from "@/components/ui/pagination";

-import LeaderboardRow from "@/components/app/LeaderboardRow";
+import LeaderboardRow from "@/app/leaderboards/components/LeaderboardRow";

 const globalLeaderboard = [
  {
@@ -0,0 +1,86 @@
+"use client";
+
+import { Eye } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { TableRow, TableCell } from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+export default function LiveRunRow({
+  index,
+  username,
+  problem,
+  category,
+  time,
+  pace,
+  status,
+}: any) {
+  const pacePositive = pace.startsWith("+");
+  const isTop = status === "pb";
+
+  return (
+    <TableRow
+      className={cn(
+        "opacity-0 animate-fade-in",
+        isTop ? "bg-primary/5 hover:bg-primary/10" : "hover:bg-secondary/50",
+      )}
+      style={{
+        animationDelay: `${index * 0.05}s`,
+        animationFillMode: "forwards",
+      }}
+    >
+      <TableCell className="font-medium pl-5">
+        {isTop ? `🔥 ${username}` : username}
+      </TableCell>
+
+      <TableCell>
+        <div className="flex flex-col gap-1">
+          <span>{problem}</span>
+          <Badge variant="outline" className="w-fit text-xs">
+            {category}
+          </Badge>
+        </div>
+      </TableCell>
+
+      <TableCell
+        className={`font-mono ${isTop ? "text-primary font-bold" : ""}`}
+      >
+        {time}
+      </TableCell>
+
+      <TableCell>
+        <Badge
+          className={
+            pacePositive
+              ? "bg-red-500/10 text-red-400"
+              : "bg-green-500/10 text-green-400"
+          }
+        >
+          {pace}
+        </Badge>
+      </TableCell>
+
+      <TableCell>
+        <div className="flex items-center gap-2 text-sm">
+          <span
+            className={`h-2 w-2 rounded-full ${
+              status === "pb"
+                ? "bg-green-500"
+                : status === "danger"
+                  ? "bg-red-500"
+                  : "bg-emerald-400"
+            }`}
+          />
+          Live
+        </div>
+      </TableCell>
+
+      <TableCell className="text-right pr-5">
+        <Button size="sm" variant={isTop ? "default" : "ghost"}>
+          <Eye className="h-4 w-4 mr-1" />
+          Watch
+        </Button>
+      </TableCell>
+    </TableRow>
+  );
+}
@@ -0,0 +1,21 @@
+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>
+  );
+}
@@ -14,6 +14,8 @@ import {
  TableCell,
 } from "@/components/ui/table";
 import { cn } from "@/lib/utils";
+import LiveRunRow from "./components/LiveRunNow";
+import StatCard from "./components/StatCard";

 /* ---------------- mock data ---------------- */

@@ -121,104 +123,3 @@ export default function LiveRuns() {
    </div>
  );
 }
-
-function LiveRunRow({
-  index,
-  username,
-  problem,
-  category,
-  time,
-  pace,
-  status,
-}: any) {
-  const pacePositive = pace.startsWith("+");
-  const isTop = status === "pb";
-
-  return (
-    <TableRow
-      className={cn(
-        "opacity-0 animate-fade-in",
-        isTop ? "bg-primary/5 hover:bg-primary/10" : "hover:bg-secondary/50",
-      )}
-      style={{
-        animationDelay: `${index * 0.05}s`,
-        animationFillMode: "forwards",
-      }}
-    >
-      <TableCell className="font-medium pl-5">
-        {isTop ? `🔥 ${username}` : username}
-      </TableCell>
-
-      <TableCell>
-        <div className="flex flex-col gap-1">
-          <span>{problem}</span>
-          <Badge variant="outline" className="w-fit text-xs">
-            {category}
-          </Badge>
-        </div>
-      </TableCell>
-
-      <TableCell
-        className={`font-mono ${isTop ? "text-primary font-bold" : ""}`}
-      >
-        {time}
-      </TableCell>
-
-      <TableCell>
-        <Badge
-          className={
-            pacePositive
-              ? "bg-red-500/10 text-red-400"
-              : "bg-green-500/10 text-green-400"
-          }
-        >
-          {pace}
-        </Badge>
-      </TableCell>
-
-      <TableCell>
-        <div className="flex items-center gap-2 text-sm">
-          <span
-            className={`h-2 w-2 rounded-full ${
-              status === "pb"
-                ? "bg-green-500"
-                : status === "danger"
-                  ? "bg-red-500"
-                  : "bg-emerald-400"
-            }`}
-          />
-          Live
-        </div>
-      </TableCell>
-
-      <TableCell className="text-right pr-5">
-        <Button size="sm" variant={isTop ? "default" : "ghost"}>
-          <Eye className="h-4 w-4 mr-1" />
-          Watch
-        </Button>
-      </TableCell>
-    </TableRow>
-  );
-}
-
-/* ---------------- 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>
-  );
-}