61 lines
1.7 KiB
TypeScript
61 lines
1.7 KiB
TypeScript
|
import { Badge } from "~/components/ui/badge";
|
||
|
|
|
||
|
|
interface SidebarRecentPicksProps {
|
||
|
|
picks: Array<{
|
||
|
|
id: string;
|
||
|
|
pickNumber: number;
|
||
|
|
round: number;
|
||
|
|
participant: {
|
||
|
|
name: string;
|
||
|
|
};
|
||
|
|
sport: {
|
||
|
|
name: string;
|
||
|
|
};
|
||
|
|
team: {
|
||
|
|
name: string;
|
||
|
|
};
|
||
|
|
}>;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function SidebarRecentPicks({ picks }: SidebarRecentPicksProps) {
|
||
|
|
return (
|
||
|
|
<div className="p-4">
|
||
|
|
{picks.length === 0 ? (
|
||
|
|
<p className="text-muted-foreground text-sm text-center py-8">
|
||
|
|
No picks yet...
|
||
|
|
</p>
|
||
|
|
) : (
|
||
|
|
<div className="space-y-1.5">
|
||
|
|
{picks
|
||
|
|
.slice()
|
||
|
|
.reverse()
|
||
|
|
.map((pick) => (
|
||
|
|
<div
|
||
|
|
key={pick.id}
|
||
|
|
className="flex items-center justify-between p-2 bg-muted rounded-lg text-sm"
|
||
|
|
>
|
||
|
|
<div className="flex items-center gap-2 min-w-0 flex-1">
|
||
|
|
<Badge variant="outline" className="text-xs flex-shrink-0">
|
||
|
|
#{pick.pickNumber}
|
||
|
|
</Badge>
|
||
|
|
<div className="min-w-0 flex-1">
|
||
|
|
<p className="font-semibold truncate">{pick.participant.name}</p>
|
||
|
|
<p className="text-xs text-muted-foreground truncate">
|
||
|
|
{pick.sport.name}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="text-right flex-shrink-0 ml-2">
|
||
|
|
<p className="font-medium text-xs truncate max-w-[100px]">{pick.team.name}</p>
|
||
|
|
<p className="text-xs text-muted-foreground">
|
||
|
|
R{pick.round}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|