Kirubel-Kibru-Yaltopia
89440985f1
Some checks failed
Deploy to Cloudflare Workers / deploy (push) Has been cancelled
118 lines
4.4 KiB
TypeScript
118 lines
4.4 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import Link from "next/link";
|
|
import { api } from "@/lib/api/client";
|
|
import { GlassCard } from "@/components/ui/glass-card";
|
|
import { PageHeader } from "@/components/dashboard/page-header";
|
|
import { TeamIcon } from "@/components/teams/TeamIcon";
|
|
|
|
type Row = {
|
|
competition_id: string;
|
|
competition_name: string;
|
|
league_id: string;
|
|
league_name: string;
|
|
team_name: string;
|
|
team_nickname: string | null;
|
|
team_icon: string | null;
|
|
points: number;
|
|
goals_for: number;
|
|
goals_against: number;
|
|
goal_difference: number;
|
|
played: number;
|
|
};
|
|
|
|
export function ManagerCompetitionsTable({
|
|
title,
|
|
description,
|
|
mode,
|
|
}: {
|
|
title: string;
|
|
description: string;
|
|
mode: "league" | "cup";
|
|
}) {
|
|
const [rows, setRows] = useState<Row[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
api.manager
|
|
.competitions(mode)
|
|
.then((data) => setRows(data as Row[]))
|
|
.catch((e) => setError(e.message))
|
|
.finally(() => setLoading(false));
|
|
}, [mode]);
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<PageHeader title={title} description={description} />
|
|
|
|
{error && <p className="text-sm text-red-400">{error}</p>}
|
|
|
|
<GlassCard title="Your competitions">
|
|
{loading ? (
|
|
<p className="text-sm text-[var(--color-muted)]">Loading…</p>
|
|
) : rows.length === 0 ? (
|
|
<p className="text-sm text-[var(--color-muted)]">
|
|
You are not assigned as manager to any {mode === "league" ? "league" : "cup"}{" "}
|
|
yet. Ask your league master to link your account to a team.
|
|
</p>
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b border-white/10 text-left text-[var(--color-muted)]">
|
|
<th className="pb-3 pr-4">Competition</th>
|
|
<th className="pb-3 pr-4">Team</th>
|
|
<th className="pb-3 pr-4 text-center">P</th>
|
|
<th className="pb-3 pr-4 text-center">Pts</th>
|
|
<th className="pb-3 pr-4 text-center">GS</th>
|
|
<th className="pb-3 pr-4 text-center">GA</th>
|
|
<th className="pb-3 pr-4 text-center">GD</th>
|
|
<th className="pb-3"> </th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{rows.map((r) => (
|
|
<tr key={`${r.competition_id}-${r.team_name}`} className="border-b border-white/5">
|
|
<td className="py-3 pr-4">
|
|
<p className="font-medium">{r.competition_name}</p>
|
|
<p className="text-xs text-[var(--color-muted)]">{r.league_name}</p>
|
|
</td>
|
|
<td className="py-3 pr-4">
|
|
<div className="flex items-center gap-2">
|
|
<TeamIcon icon={r.team_icon} className="h-4 w-4 text-cyan-400" />
|
|
<span>{r.team_name}</span>
|
|
{r.team_nickname && (
|
|
<span className="text-xs text-[var(--color-muted)]">
|
|
({r.team_nickname})
|
|
</span>
|
|
)}
|
|
</div>
|
|
</td>
|
|
<td className="py-3 pr-4 text-center">{r.played}</td>
|
|
<td className="py-3 pr-4 text-center font-semibold text-cyan-400">
|
|
{r.points}
|
|
</td>
|
|
<td className="py-3 pr-4 text-center">{r.goals_for}</td>
|
|
<td className="py-3 pr-4 text-center">{r.goals_against}</td>
|
|
<td className="py-3 pr-4 text-center">{r.goal_difference}</td>
|
|
<td className="py-3">
|
|
<Link
|
|
href={`/leagues/${r.league_id}/competitions/${r.competition_id}/my-team`}
|
|
className="text-cyan-400 hover:underline"
|
|
>
|
|
Open
|
|
</Link>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</GlassCard>
|
|
</div>
|
|
);
|
|
}
|