69 lines
2.6 KiB
TypeScript
69 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { LibraryItemCard } from "./library-item-card";
|
|
import { ScheduleFromLibraryDialog } from "./schedule-from-library-dialog";
|
|
import { AddToBlockDialog } from "./add-to-block-dialog";
|
|
import { Button } from "@/components/ui/button";
|
|
import type { LibraryItemFull } from "@/lib/types";
|
|
|
|
interface Props {
|
|
items: LibraryItemFull[];
|
|
total: number;
|
|
page: number;
|
|
pageSize: number;
|
|
isLoading: boolean;
|
|
selected: Set<string>;
|
|
onToggleSelect: (id: string) => void;
|
|
onPageChange: (page: number) => void;
|
|
selectedItems: LibraryItemFull[];
|
|
}
|
|
|
|
export function LibraryGrid({
|
|
items, total, page, pageSize, isLoading,
|
|
selected, onToggleSelect, onPageChange, selectedItems,
|
|
}: Props) {
|
|
const totalPages = Math.ceil(total / pageSize);
|
|
|
|
return (
|
|
<div className="flex flex-1 flex-col min-h-0">
|
|
<div className="flex-1 overflow-y-auto p-6">
|
|
{isLoading ? (
|
|
<p className="text-sm text-zinc-500">Loading…</p>
|
|
) : items.length === 0 ? (
|
|
<p className="text-sm text-zinc-500">No items found. Run a library sync to populate the library.</p>
|
|
) : (
|
|
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
|
|
{items.map(item => (
|
|
<LibraryItemCard
|
|
key={item.id}
|
|
item={item}
|
|
selected={selected.has(item.id)}
|
|
onToggle={() => onToggleSelect(item.id)}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{totalPages > 1 && (
|
|
<div className="flex items-center justify-between border-t border-zinc-800 px-6 py-3">
|
|
<p className="text-xs text-zinc-500">{total.toLocaleString()} items total</p>
|
|
<div className="flex gap-2">
|
|
<Button size="sm" variant="outline" disabled={page === 0} onClick={() => onPageChange(page - 1)}>Prev</Button>
|
|
<span className="flex items-center text-xs text-zinc-400">{page + 1} / {totalPages}</span>
|
|
<Button size="sm" variant="outline" disabled={page >= totalPages - 1} onClick={() => onPageChange(page + 1)}>Next</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{selected.size > 0 && (
|
|
<div className="fixed bottom-6 left-1/2 -translate-x-1/2 flex items-center gap-3 rounded-full border border-zinc-700 bg-zinc-900 px-6 py-3 shadow-2xl">
|
|
<span className="text-sm text-zinc-300">{selected.size} selected</span>
|
|
<ScheduleFromLibraryDialog selectedItems={selectedItems} />
|
|
<AddToBlockDialog selectedItems={selectedItems} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|