2cd4096e70
- Added AvailableParticipantsSection for participant search and filtering. - Created DraftGridSection for displaying the draft grid with team timers and context menu. - Developed QueueSection for managing participant queue and autodraft settings. - Introduced RecentPicksSection to show recent draft picks. - Implemented TeamsDraftedGrid to visualize drafted participants by team and sport. - Added collapsible UI components for better layout management. - Established tabbed navigation for draft board, recent picks, and teams drafted. - Enhanced responsiveness for mobile and desktop views. - Updated styles for a cohesive design across components.
58 lines
1.6 KiB
TypeScript
58 lines
1.6 KiB
TypeScript
import { Badge } from "~/components/ui/badge";
|
|
|
|
interface RecentPicksSectionProps {
|
|
picks: Array<{
|
|
id: string;
|
|
pickNumber: number;
|
|
round: number;
|
|
participant: {
|
|
name: string;
|
|
};
|
|
sport: {
|
|
name: string;
|
|
};
|
|
team: {
|
|
name: string;
|
|
};
|
|
}>;
|
|
}
|
|
|
|
export function RecentPicksSection({ picks }: RecentPicksSectionProps) {
|
|
return (
|
|
<div className="h-full flex flex-col p-4">
|
|
<h2 className="text-xl font-semibold mb-4">Recent Picks</h2>
|
|
{picks.length === 0 ? (
|
|
<p className="text-muted-foreground text-sm">No picks yet...</p>
|
|
) : (
|
|
<div className="space-y-2 overflow-y-auto">
|
|
{picks
|
|
.slice()
|
|
.reverse()
|
|
.slice(0, 10)
|
|
.map((pick) => (
|
|
<div
|
|
key={pick.id}
|
|
className="flex items-center justify-between p-3 bg-muted rounded-lg"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<Badge variant="outline">#{pick.pickNumber}</Badge>
|
|
<div>
|
|
<p className="font-semibold">{pick.participant.name}</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
{pick.sport.name}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="text-right">
|
|
<p className="font-medium">{pick.team.name}</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
Round {pick.round}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|