69 lines
2.5 KiB
TypeScript
69 lines
2.5 KiB
TypeScript
 
|
"use client";
|
||
|
|
|
||
|
|
import { useEffect, useState } from "react";
|
||
|
|
import { useRouter } from "next/navigation";
|
||
|
|
import { formatBytes } from "@/lib/format";
|
||
|
|
import { deleteFromLibrary, listLibrary, type LibraryEntryMeta } from "@/lib/pinball/tableLibrary";
|
||
|
|
import { setPendingTable } from "@/lib/pinball/tableSelectionStore";
|
||
|
|
|
||
|
|
export default function TableLibrary() {
|
||
|
|
const router = useRouter();
|
||
|
|
const [entries, setEntries] = useState<LibraryEntryMeta[] | null>(null);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
listLibrary()
|
||
|
|
.then(setEntries)
|
||
|
|
.catch((err) => {
|
||
|
|
console.error("Failed to read table library:", err);
|
||
|
|
setEntries([]);
|
||
|
|
});
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
if (!entries || entries.length === 0) return null;
|
||
|
|
|
||
|
|
const handlePlay = (id: string) => {
|
||
|
|
setPendingTable({ kind: "library", id });
|
||
|
|
router.push("/play");
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleDelete = async (id: string) => {
|
||
|
|
await deleteFromLibrary(id);
|
||
|
|
setEntries((prev) => prev?.filter((entry) => entry.id !== id) ?? null);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="w-full max-w-4xl">
|
||
|
|
<h2 className="mb-3 font-display text-xl tracking-wide text-paper">Your Library</h2>
|
||
|
|
<ul className="divide-y divide-chrome/20 rounded-lg border border-chrome/30 bg-ash">
|
||
|
|
{entries.map((entry) => (
|
||
|
|
<li key={entry.id} className="flex items-center justify-between gap-3 px-4 py-3">
|
||
|
|
<div className="min-w-0">
|
||
|
|
<div className="truncate font-mono text-sm text-paper">{entry.name}</div>
|
||
|
|
<div className="font-mono text-xs text-chrome">
|
||
|
|
{formatBytes(entry.sizeBytes)}
|
||
|
|
{entry.romFileName ? ` · ROM: ${entry.romFileName}` : ""}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex shrink-0 items-center gap-2">
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={() => handlePlay(entry.id)}
|
||
|
|
className="rounded-full border-2 border-marquee bg-marquee/10 px-4 py-1.5 font-display text-sm tracking-wide text-marquee transition hover:bg-marquee/20"
|
||
|
|
>
|
||
|
|
Play
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={() => handleDelete(entry.id)}
|
||
|
|
className="rounded-full border border-chrome/40 px-4 py-1.5 font-display text-sm tracking-wide text-chrome transition hover:border-marquee hover:text-marquee"
|
||
|
|
>
|
||
|
|
Delete
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|