58 lines
1.6 KiB
TypeScript
58 lines
1.6 KiB
TypeScript
import { memo } from "react";
|
|
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 const SidebarRecentPicks = memo(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()
|
|
.toReversed()
|
|
.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>
|
|
<p className="text-xs text-muted-foreground truncate">
|
|
{pick.team.name}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
});
|