38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
import type { NFLPlayer } from "../../utils/types";
|
|
import { useMemo } from "react";
|
|
|
|
export default function PlayerCell({ player }: { player: NFLPlayer | null }) {
|
|
const injuryStatus = useMemo(() => {
|
|
if (player && player.injury_status) {
|
|
if (player.injury_status.toLowerCase() === "ir") {
|
|
return player.injury_status;
|
|
} else {
|
|
return `${player.injury_status[0]}.`;
|
|
}
|
|
}
|
|
}, [player?.injury_status]);
|
|
|
|
if (player && player.full_name) {
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<div>
|
|
{/* a player name is data, not a document section — this was an <h1>,
|
|
and with a full roster per team it produced most of the page's
|
|
heading elements */}
|
|
<p className="font-semibold text-base">{player.full_name}</p>
|
|
<p>
|
|
{player?.position} · {player?.team} {injuryStatus && "·"}{" "}
|
|
{player?.injury_status && (
|
|
<span className="text-red-500 font-semibold">{injuryStatus}</span>
|
|
)}
|
|
</p>
|
|
</div>
|
|
<p className="flex justify-center items-center">
|
|
<span className="font-semibold">{player.points}</span>
|
|
</p>
|
|
<div className="inline-block min-h-[1em] w-0.5 self-stretch bg-neutral-100 dark:bg-white/30"></div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|