Valentin ROBIN
358bed0c2e
Corrige deux incohérences trouvées en chemin : le compteur de passages dans le char en gold-bright sur marbre (même défaut de contraste déjà vu ailleurs), et le point du Crieur toujours rouge même pour un honneur positif. Réutilise les ornements existants mais jamais appelés (meander-divider entre le podium et le classement, DiamondDivider sur /profile avec une nouvelle convention de carte secondaire). Ajoute une ambiance discrète (fond qui respire très lentement, halo doré sur les cartes marbre, désactivés sous prefers-reduced-motion), étend les confettis et un nouveau son à Icare pour la parité avec la Corne d'Abondance, des loading.tsx sur les pages les plus consultées, et un petit ornement sur les états vides plutôt qu'un texte brut. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
36 lines
1.3 KiB
TypeScript
36 lines
1.3 KiB
TypeScript
import { Avatar } from "@/components/avatar";
|
||
import type { ProfileRow } from "./page";
|
||
|
||
export function EntryRanking({
|
||
profiles,
|
||
entryCounts,
|
||
}: {
|
||
profiles: ProfileRow[];
|
||
entryCounts: Record<string, number>;
|
||
}) {
|
||
const sorted = [...profiles].sort((a, b) => {
|
||
const diff = (entryCounts[b.id] ?? 0) - (entryCounts[a.id] ?? 0);
|
||
return diff !== 0 ? diff : a.pseudo.localeCompare(b.pseudo);
|
||
});
|
||
|
||
return (
|
||
<div className="marble-surface rounded-2xl border border-gold/40 p-4 shadow-lg">
|
||
<p className="mb-2 text-center font-heading text-sm tracking-wide text-text-mut uppercase">
|
||
Passages dans le char
|
||
</p>
|
||
<ul className="grid grid-cols-2 gap-x-4 gap-y-1.5 sm:grid-cols-3 lg:grid-cols-4">
|
||
{sorted.map((p) => {
|
||
const count = entryCounts[p.id] ?? 0;
|
||
return (
|
||
<li key={p.id} className="flex min-w-0 items-center gap-1.5 text-xs">
|
||
<Avatar pseudo={p.pseudo} avatarUrl={p.avatar_url} size="xs" />
|
||
<span className={`truncate ${count === 0 ? "text-text-mut/60" : "text-text-marble"}`}>{p.pseudo}</span>
|
||
<span className="ml-auto shrink-0 font-heading text-sea">{count > 0 ? `×${count}` : "—"}</span>
|
||
</li>
|
||
);
|
||
})}
|
||
</ul>
|
||
</div>
|
||
);
|
||
}
|