Scaffold V1: auth, profils et leaderboard

Next.js 16 + Tailwind + Supabase (Auth, Postgres, Storage). Connexion par pseudo/mot de passe via email interne dérivé, RLS avec points protégés au niveau colonne, pages login/signup/leaderboard/profile. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-11 14:52:18 +02:00
parent b216d59b94
commit 87cd286e5a
31 changed files with 8022 additions and 19 deletions
@@ -0,0 +1,56 @@
+import { createClient } from "@/lib/supabase/server";
+import { Avatar } from "@/components/avatar";
+
+export default async function LeaderboardPage() {
+  const supabase = await createClient();
+  const { data: profiles, error } = await supabase
+    .from("profiles")
+    .select("id, pseudo, avatar_url, points")
+    .order("points", { ascending: false });
+
+  return (
+    <div className="mx-auto w-full max-w-2xl px-4 py-8">
+      <h1 className="mb-6 text-2xl font-semibold text-navy">Leaderboard</h1>
+
+      {error && (
+        <p role="alert" className="text-sm text-red-700">
+          Impossible de charger le leaderboard pour le moment.
+        </p>
+      )}
+
+      {!error && profiles?.length === 0 && (
+        <p className="text-sm text-ink/70">Personne n&apos;est encore inscrit.</p>
+      )}
+
+      {!error && profiles && profiles.length > 0 && (
+        <ol className="flex flex-col gap-2">
+          {profiles.map((profile, index) => {
+            const rank = index + 1;
+            const isFirst = rank === 1;
+            return (
+              <li
+                key={profile.id}
+                className={`flex items-center gap-4 rounded-lg border px-4 py-3 ${
+                  isFirst
+                    ? "border-gold bg-gold/10"
+                    : "border-navy/10 bg-white"
+                }`}
+              >
+                <span
+                  className={`w-6 shrink-0 text-center font-semibold ${
+                    isFirst ? "text-gold" : "text-navy/60"
+                  }`}
+                >
+                  {rank}
+                </span>
+                <Avatar pseudo={profile.pseudo} avatarUrl={profile.avatar_url} size="sm" />
+                <span className="flex-1 truncate font-medium">{profile.pseudo}</span>
+                <span className="font-semibold text-navy">{profile.points}</span>
+              </li>
+            );
+          })}
+        </ol>
+      )}
+    </div>
+  );
+}