90 lines
2.3 KiB
TypeScript
90 lines
2.3 KiB
TypeScript
|
import type { ReactNode } from "react";
|
||
|
|
import { cn } from "~/lib/utils";
|
||
|
|
|
||
|
|
type CoronaVariant =
|
||
|
|
| "gradient"
|
||
|
|
| "electric"
|
||
|
|
| "emerald"
|
||
|
|
| "amber"
|
||
|
|
| "coral";
|
||
|
|
|
||
|
|
interface DraftPickCellProps {
|
||
|
|
pickNumber: number;
|
||
|
|
round: number;
|
||
|
|
pickInRound: number;
|
||
|
|
state: "picked" | "current" | "upcoming";
|
||
|
|
pick?: {
|
||
|
|
participant: { name: string };
|
||
|
|
sport: { name: string };
|
||
|
|
};
|
||
|
|
corona?: CoronaVariant;
|
||
|
|
className?: string;
|
||
|
|
children?: ReactNode;
|
||
|
|
}
|
||
|
|
|
||
|
|
const coronaClasses: Record<CoronaVariant, string> = {
|
||
|
|
gradient: "[background:linear-gradient(to_bottom,#adf661,#2ce1c1)]",
|
||
|
|
electric: "bg-electric",
|
||
|
|
emerald: "bg-emerald-500",
|
||
|
|
amber: "bg-amber-accent",
|
||
|
|
coral: "bg-coral-accent",
|
||
|
|
};
|
||
|
|
|
||
|
|
export function DraftPickCell({
|
||
|
|
pickNumber,
|
||
|
|
round,
|
||
|
|
pickInRound,
|
||
|
|
state,
|
||
|
|
pick,
|
||
|
|
corona = "gradient",
|
||
|
|
className,
|
||
|
|
children,
|
||
|
|
}: DraftPickCellProps) {
|
||
|
|
const showCorona = state === "picked";
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className={cn(
|
||
|
|
"relative flex-1 min-w-32 overflow-hidden",
|
||
|
|
className,
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
{showCorona && (
|
||
|
|
<div
|
||
|
|
className={cn(
|
||
|
|
"absolute top-0.5 bottom-0.5 left-0 right-0 rounded-lg",
|
||
|
|
coronaClasses[corona],
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
<div
|
||
|
|
className={cn(
|
||
|
|
"relative z-10 h-20 border-2 rounded-lg p-2 transition-all",
|
||
|
|
showCorona && "mr-1",
|
||
|
|
state === "current"
|
||
|
|
? "border-electric bg-electric/20 shadow-lg shadow-electric/30 ring-2 ring-electric/50 animate-pulse"
|
||
|
|
: state === "picked"
|
||
|
|
? "bg-muted border-transparent"
|
||
|
|
: "border-border bg-card",
|
||
|
|
)}
|
||
|
|
title={`Overall Pick #${pickNumber}`}
|
||
|
|
>
|
||
|
|
<div className="text-xs font-mono text-muted-foreground mb-1">
|
||
|
|
{round}.{String(pickInRound).padStart(2, "0")}
|
||
|
|
</div>
|
||
|
|
{state === "picked" && pick ? (
|
||
|
|
<div className="text-xs">
|
||
|
|
<div className="font-semibold truncate">{pick.participant.name}</div>
|
||
|
|
<div className="text-muted-foreground truncate">
|
||
|
|
{pick.sport.name}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
) : state === "current" ? (
|
||
|
|
<div className="text-sm font-bold text-electric">On Clock</div>
|
||
|
|
) : null}
|
||
|
|
{children && <div className="absolute inset-0 pointer-events-none [&_*]:pointer-events-auto">{children}</div>}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|