106 lines
3 KiB
TypeScript
106 lines
3 KiB
TypeScript
import { Button } from "~/components/ui/button";
|
||
import { Badge } from "~/components/ui/badge";
|
||
import { AutodraftSettings } from "~/components/AutodraftSettings";
|
||
|
||
interface QueueSectionProps {
|
||
queue: Array<{
|
||
id: string;
|
||
participantId: string;
|
||
}>;
|
||
availableParticipants: Array<{
|
||
id: string;
|
||
name: string;
|
||
}>;
|
||
eligibility: {
|
||
flexPicksUsed: number;
|
||
flexPicksAvailable: number;
|
||
picksBySport: Record<string, number>;
|
||
sportAvailability: Record<
|
||
string,
|
||
{ sportName: string; sportId: string }
|
||
>;
|
||
ineligibleReasons: Record<string, string>;
|
||
} | null;
|
||
seasonId: string;
|
||
teamId: string;
|
||
isMyTurn: boolean;
|
||
userAutodraft: {
|
||
isEnabled: boolean;
|
||
mode: "next_pick" | "while_on";
|
||
};
|
||
onClearQueue: () => void;
|
||
onRemoveFromQueue: (queueId: string) => void;
|
||
onAutodraftUpdate: (isEnabled: boolean, mode: "next_pick" | "while_on") => void;
|
||
}
|
||
|
||
export function QueueSection({
|
||
queue,
|
||
availableParticipants,
|
||
eligibility,
|
||
seasonId,
|
||
teamId,
|
||
isMyTurn,
|
||
userAutodraft,
|
||
onClearQueue,
|
||
onRemoveFromQueue,
|
||
onAutodraftUpdate,
|
||
}: QueueSectionProps) {
|
||
return (
|
||
<div className="p-4">
|
||
<div className="flex items-center justify-between mb-4">
|
||
<h3 className="text-lg font-semibold">Queue ({queue.length})</h3>
|
||
{queue.length > 0 && (
|
||
<Button variant="outline" size="sm" onClick={onClearQueue}>
|
||
Clear
|
||
</Button>
|
||
)}
|
||
</div>
|
||
|
||
{/* Queue List */}
|
||
{queue.length === 0 ? (
|
||
<p className="text-muted-foreground text-sm text-center py-8">
|
||
Click participants to add to your queue
|
||
</p>
|
||
) : (
|
||
<div className="space-y-1.5 mb-4">
|
||
{queue.map((item, index) => (
|
||
<div
|
||
key={item.id}
|
||
className="flex items-center justify-between p-2 bg-muted rounded-lg"
|
||
>
|
||
<div className="flex items-center gap-2">
|
||
<Badge variant="default" className="text-xs">{index + 1}</Badge>
|
||
<div>
|
||
<p className="font-semibold text-sm">
|
||
{availableParticipants.find(
|
||
(p) => p.id === item.participantId
|
||
)?.name || "Unknown"}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
className="h-7 w-7 text-destructive hover:text-destructive hover:bg-destructive/10"
|
||
onClick={() => onRemoveFromQueue(item.id)}
|
||
title="Remove from queue"
|
||
>
|
||
<span className="text-lg">×</span>
|
||
</Button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{/* Autodraft Settings */}
|
||
<AutodraftSettings
|
||
seasonId={seasonId}
|
||
teamId={teamId}
|
||
isEnabled={userAutodraft.isEnabled}
|
||
mode={userAutodraft.mode}
|
||
isMyTurn={isMyTurn}
|
||
onUpdate={onAutodraftUpdate}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|