89 lines
3.7 KiB
TypeScript
89 lines
3.7 KiB
TypeScript
import { Users } from "lucide-react";
|
|
import { GradientIcon } from "~/components/ui/GradientIcon";
|
|
|
|
// ─── Types ────────────────────────────────────────────────────────────────────
|
|
|
|
export interface TeamsPanelProps {
|
|
teams: Array<{ id: string; name: string; ownerId: string | null }>;
|
|
currentUserId: string | null;
|
|
/** Maps userId → display name */
|
|
ownerMap: Record<string, string | null>;
|
|
/** When non-empty, sorts all teams in draft order and shows position numbers */
|
|
draftSlots: Array<{ team: { id: string } }>;
|
|
}
|
|
|
|
// ─── Public API ───────────────────────────────────────────────────────────────
|
|
|
|
export function TeamsPanel({ teams, currentUserId, ownerMap, draftSlots }: TeamsPanelProps) {
|
|
const hasDraftOrder = draftSlots.length > 0;
|
|
const claimedCount = teams.filter((t) => t.ownerId !== null).length;
|
|
const isFull = claimedCount === teams.length;
|
|
const fillPercent = teams.length > 0 ? Math.round((claimedCount / teams.length) * 100) : 0;
|
|
|
|
const displayTeams = hasDraftOrder
|
|
? (() => {
|
|
const orderMap = new Map(draftSlots.map((s, i) => [s.team.id, i]));
|
|
return teams.toSorted(
|
|
(a, b) => (orderMap.get(a.id) ?? Infinity) - (orderMap.get(b.id) ?? Infinity)
|
|
);
|
|
})()
|
|
: teams.filter((t) => t.ownerId !== null);
|
|
|
|
const showProgressBar = !(hasDraftOrder && isFull);
|
|
|
|
return (
|
|
<div>
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<GradientIcon icon={Users} className="h-5 w-5 shrink-0" />
|
|
<span className="text-xl font-bold leading-none tracking-tight">
|
|
{hasDraftOrder ? "Draft Order" : "Teams"}
|
|
</span>
|
|
</div>
|
|
|
|
{showProgressBar && (
|
|
<div className="mb-4">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
|
|
Filled
|
|
</span>
|
|
<span className="text-sm font-bold">
|
|
{claimedCount}
|
|
<span className="text-muted-foreground font-normal"> / {teams.length}</span>
|
|
</span>
|
|
</div>
|
|
<div className="h-2 w-full rounded-full bg-white/[0.08] overflow-hidden">
|
|
<div
|
|
className="h-full rounded-full bg-gradient-to-r from-[var(--primary)] to-[var(--accent)] transition-all"
|
|
style={{ width: `${fillPercent}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div>
|
|
{displayTeams.map((team, index) => {
|
|
const isOwned = team.ownerId === currentUserId;
|
|
const ownerName = team.ownerId ? ownerMap[team.ownerId] : null;
|
|
return (
|
|
<div key={team.id} className="flex items-center gap-3 py-1.5 border-b last:border-0">
|
|
{hasDraftOrder && (
|
|
<span className="text-xs font-bold text-muted-foreground w-4 shrink-0 text-right">
|
|
{index + 1}
|
|
</span>
|
|
)}
|
|
<p className="font-medium truncate min-w-0 flex-1 text-sm">{team.name}</p>
|
|
<p className="text-xs shrink-0">
|
|
{team.ownerId
|
|
? isOwned
|
|
? <span className="text-primary font-medium">You</span>
|
|
: <span className="text-muted-foreground">{ownerName || "Unknown"}</span>
|
|
: <span className="text-muted-foreground/50">—</span>
|
|
}
|
|
</p>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|