63 lines
2.1 KiB
TypeScript
63 lines
2.1 KiB
TypeScript
|
import { Star } from "lucide-react";
|
||
|
|
import { TeamAvatar } from "~/components/TeamAvatar";
|
||
|
|
|
||
|
|
interface RankingsRowProps {
|
||
|
|
teamId: string;
|
||
|
|
teamName: string;
|
||
|
|
participantName: string;
|
||
|
|
ownerName?: string | null;
|
||
|
|
isOwned: boolean;
|
||
|
|
rankLabel?: string | number;
|
||
|
|
points?: number;
|
||
|
|
showPoints: boolean;
|
||
|
|
rowClass: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function RankingsRow({
|
||
|
|
teamId,
|
||
|
|
teamName,
|
||
|
|
participantName,
|
||
|
|
ownerName,
|
||
|
|
isOwned,
|
||
|
|
rankLabel,
|
||
|
|
points,
|
||
|
|
showPoints,
|
||
|
|
rowClass,
|
||
|
|
}: RankingsRowProps) {
|
||
|
|
return (
|
||
|
|
<div className={rowClass}>
|
||
|
|
<div className="flex items-center gap-3 flex-1 min-w-0">
|
||
|
|
<TeamAvatar teamId={teamId} teamName={teamName} />
|
||
|
|
<div className="min-w-0">
|
||
|
|
<p className={`font-medium text-sm leading-tight truncate${isOwned ? " text-electric" : ""}`}>
|
||
|
|
{participantName}
|
||
|
|
{isOwned && <Star className="inline ml-1.5 h-3 w-3 fill-current text-electric" />}
|
||
|
|
</p>
|
||
|
|
{ownerName && (
|
||
|
|
<p className="text-xs text-muted-foreground truncate">{ownerName}</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{(rankLabel !== undefined || showPoints) && (
|
||
|
|
<div className="flex items-center gap-4 w-full border-t border-border/30 pt-2 mt-1 sm:w-auto sm:border-0 sm:pt-0 sm:mt-0 sm:shrink-0">
|
||
|
|
{rankLabel !== undefined && (
|
||
|
|
<div className="text-right shrink-0 flex-1 sm:flex-none">
|
||
|
|
<p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Rank</p>
|
||
|
|
<span className="text-2xl font-bold leading-none">{rankLabel}</span>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
{showPoints && rankLabel !== undefined && (
|
||
|
|
<div className="h-8 w-px bg-border shrink-0 self-center" />
|
||
|
|
)}
|
||
|
|
{showPoints && (
|
||
|
|
<div className="text-right shrink-0 flex-1 sm:flex-none">
|
||
|
|
<p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Points</p>
|
||
|
|
<span className="text-2xl font-bold leading-none text-electric">{points ?? 0}</span>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|