124 lines
3.9 KiB
TypeScript
124 lines
3.9 KiB
TypeScript
import { useState } from "react";
|
|
import type { ReactNode } from "react";
|
|
import { ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
|
|
import { Button } from "~/components/ui/button";
|
|
import { cn } from "~/lib/utils";
|
|
|
|
interface DraftSidebarProps {
|
|
collapsed: boolean;
|
|
onCollapsedChange: (collapsed: boolean) => void;
|
|
queueSection: ReactNode;
|
|
recentPicksSection: ReactNode;
|
|
settingsSection?: ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export function DraftSidebar({
|
|
collapsed,
|
|
onCollapsedChange,
|
|
queueSection,
|
|
recentPicksSection,
|
|
settingsSection,
|
|
className,
|
|
}: DraftSidebarProps) {
|
|
const [queueOpen, setQueueOpen] = useState(true);
|
|
const [picksOpen, setPicksOpen] = useState(true);
|
|
|
|
if (collapsed) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"relative flex-shrink-0 bg-card border-r border-border transition-all duration-300 flex flex-col h-full",
|
|
"w-12 hidden lg:flex",
|
|
className
|
|
)}
|
|
>
|
|
<div className="flex-1" />
|
|
<div className="border-t border-border p-2 flex-shrink-0">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => onCollapsedChange(false)}
|
|
className="w-full"
|
|
aria-label="Expand sidebar"
|
|
>
|
|
<ChevronRight className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{/* Mobile backdrop */}
|
|
<div
|
|
className="fixed inset-0 bg-black/50 z-40 lg:hidden"
|
|
onClick={() => onCollapsedChange(true)}
|
|
aria-label="Close sidebar"
|
|
/>
|
|
|
|
<div
|
|
className={cn(
|
|
"relative flex-shrink-0 bg-card border-r border-border transition-all duration-300 flex flex-col",
|
|
"w-[300px]",
|
|
"fixed inset-y-0 left-0 z-50 lg:relative lg:z-auto",
|
|
className
|
|
)}
|
|
>
|
|
<div className="flex-1 flex flex-col min-h-0 overflow-hidden">
|
|
{/* Queue Section */}
|
|
<div className={cn("flex flex-col border-b", queueOpen ? "flex-1 min-h-0" : "flex-shrink-0")}>
|
|
<button
|
|
onClick={() => setQueueOpen((o) => !o)}
|
|
className="px-4 py-3 bg-muted/50 hover:bg-muted flex items-center justify-between w-full flex-shrink-0"
|
|
>
|
|
<h2 className="font-semibold text-sm">My Queue</h2>
|
|
<ChevronDown className={cn("h-4 w-4 transition-transform", queueOpen && "rotate-180")} />
|
|
</button>
|
|
{queueOpen && (
|
|
<div className="flex-1 overflow-y-auto min-h-0">
|
|
{queueSection}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Picks Section */}
|
|
<div className={cn("flex flex-col", picksOpen ? "flex-1 min-h-0" : "flex-shrink-0")}>
|
|
<button
|
|
onClick={() => setPicksOpen((o) => !o)}
|
|
className="px-4 py-3 bg-muted/50 hover:bg-muted flex items-center justify-between w-full flex-shrink-0"
|
|
>
|
|
<h2 className="font-semibold text-sm">Picks</h2>
|
|
<ChevronDown className={cn("h-4 w-4 transition-transform", picksOpen && "rotate-180")} />
|
|
</button>
|
|
{picksOpen && (
|
|
<div className="flex-1 overflow-y-auto min-h-0">
|
|
{recentPicksSection}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{settingsSection && (
|
|
<div className="border-t border-border px-4 py-3 flex-shrink-0">
|
|
{settingsSection}
|
|
</div>
|
|
)}
|
|
|
|
<div className="border-t border-border p-2 flex-shrink-0">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => onCollapsedChange(true)}
|
|
className="w-full flex items-center justify-center gap-2"
|
|
aria-label="Collapse sidebar"
|
|
>
|
|
<ChevronLeft className="h-4 w-4" />
|
|
<span className="text-sm">Hide Sidebar</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|