45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
import type { NFLMatchupState } from "../../utils/types";
|
|
import PlayerCell from "./PlayerCell";
|
|
|
|
export function TeamRow({
|
|
roster,
|
|
isWinning = false,
|
|
}: {
|
|
roster: NFLMatchupState;
|
|
isWinning?: boolean;
|
|
}) {
|
|
const teamName = roster?.owner.metadata.team_name;
|
|
|
|
return (
|
|
<div>
|
|
<div className="flex flex-wrap mb-2">
|
|
<img
|
|
width="30"
|
|
height="30"
|
|
loading="lazy"
|
|
decoding="async"
|
|
alt={teamName ? `${teamName} avatar` : ""}
|
|
className="rounded-lg h-[30px] object-cover"
|
|
src={roster?.owner.metadata.avatar}
|
|
/>
|
|
<h4 className="flex justify-center items-center mx-2 font-semibold">
|
|
{teamName} |
|
|
<span className={`${isWinning && "text-green-500"} pl-1`}>
|
|
{roster?.points}pt
|
|
</span>
|
|
</h4>
|
|
</div>
|
|
|
|
<div className="space-x-2 whitespace-nowrap overflow-x-auto pb-2">
|
|
{roster?.starters.map((v, k) => {
|
|
return (
|
|
<div className="inline-block" key={k}>
|
|
<PlayerCell player={v} />
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|