Kirubel-Kibru-Yaltopia
89440985f1
Some checks failed
Deploy to Cloudflare Workers / deploy (push) Has been cancelled
67 lines
2.5 KiB
TypeScript
67 lines
2.5 KiB
TypeScript
import { TeamBadge } from "@/components/teams/TeamBadge";
|
|
|
|
type Standing = {
|
|
team_id: string;
|
|
team_name: string;
|
|
logo_path: string | null;
|
|
played: number;
|
|
won: number;
|
|
drawn: number;
|
|
lost: number;
|
|
goals_for: number;
|
|
goals_against: number;
|
|
goal_difference: number;
|
|
points: number;
|
|
};
|
|
|
|
export function StandingsTable({ standings }: { standings: Standing[] }) {
|
|
const sorted = [...standings].sort((a, b) => {
|
|
if (b.points !== a.points) return b.points - a.points;
|
|
if (b.goal_difference !== a.goal_difference)
|
|
return b.goal_difference - a.goal_difference;
|
|
if (b.goals_for !== a.goals_for) return b.goals_for - a.goals_for;
|
|
return a.team_name.localeCompare(b.team_name);
|
|
});
|
|
|
|
return (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b border-white/10 text-left text-xs text-[var(--color-muted)]">
|
|
<th className="pb-3 pr-2">#</th>
|
|
<th className="pb-3 pr-4">Team</th>
|
|
<th className="pb-3 px-2 text-center">P</th>
|
|
<th className="pb-3 px-2 text-center">W</th>
|
|
<th className="pb-3 px-2 text-center">D</th>
|
|
<th className="pb-3 px-2 text-center">L</th>
|
|
<th className="pb-3 px-2 text-center">GF</th>
|
|
<th className="pb-3 px-2 text-center">GA</th>
|
|
<th className="pb-3 px-2 text-center">GD</th>
|
|
<th className="pb-3 pl-2 text-center">Pts</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{sorted.map((row, i) => (
|
|
<tr key={row.team_id} className="border-b border-white/5">
|
|
<td className="py-3 pr-2 text-[var(--color-muted)]">{i + 1}</td>
|
|
<td className="py-3 pr-4">
|
|
<TeamBadge name={row.team_name} logoPath={row.logo_path} size="sm" />
|
|
</td>
|
|
<td className="px-2 text-center">{row.played}</td>
|
|
<td className="px-2 text-center">{row.won}</td>
|
|
<td className="px-2 text-center">{row.drawn}</td>
|
|
<td className="px-2 text-center">{row.lost}</td>
|
|
<td className="px-2 text-center">{row.goals_for}</td>
|
|
<td className="px-2 text-center">{row.goals_against}</td>
|
|
<td className="px-2 text-center">{row.goal_difference}</td>
|
|
<td className="pl-2 text-center font-semibold text-cyan-400">
|
|
{row.points}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
}
|