78 lines
2.4 KiB
TypeScript
78 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { useCallback, useState } from "react";
|
|
import { api, type AdminCollection } from "@/lib/api";
|
|
import { usePagedList } from "@/lib/use-paged-list";
|
|
import { ListShell, EmptyRow } from "@/components/list-shell";
|
|
import { Table, THead, TR, TH, TD } from "@/components/ui/table";
|
|
import { fmtDate } from "@/lib/utils";
|
|
import { Clamp } from "@/components/ui/clamp";
|
|
|
|
export default function CollectionsPage() {
|
|
const [q, setQ] = useState("");
|
|
const fetcher = useCallback(
|
|
(limit: number, offset: number) => api.collections(q, limit, offset),
|
|
[q],
|
|
);
|
|
const list = usePagedList<AdminCollection>(fetcher, [q]);
|
|
|
|
return (
|
|
<ListShell
|
|
title="Collections"
|
|
total={list.total}
|
|
searchPlaceholder="Search title, description, or owner…"
|
|
onQueryChange={setQ}
|
|
list={list}
|
|
>
|
|
<Table>
|
|
<THead>
|
|
<TR>
|
|
<TH>Collection</TH>
|
|
<TH>Owner</TH>
|
|
<TH>Items</TH>
|
|
<TH>Visibility</TH>
|
|
<TH>Created</TH>
|
|
</TR>
|
|
</THead>
|
|
<tbody>
|
|
{list.items.length === 0 && !list.loading ? (
|
|
<EmptyRow cols={5} label="No collections found." />
|
|
) : (
|
|
list.items.map((c) => (
|
|
<TR key={c.id}>
|
|
<TD className="max-w-md">
|
|
<Clamp lines={2} className="font-medium">
|
|
{c.title}
|
|
</Clamp>
|
|
{c.description ? (
|
|
<Clamp className="mt-0.5 text-xs text-muted-foreground">
|
|
{c.description}
|
|
</Clamp>
|
|
) : null}
|
|
</TD>
|
|
<TD className="max-w-[14rem]">
|
|
<Clamp className="font-medium">{c.owner_name}</Clamp>
|
|
<Clamp className="text-xs text-muted-foreground">
|
|
{`@${c.owner_handle}`}
|
|
</Clamp>
|
|
</TD>
|
|
<TD>{c.item_count}</TD>
|
|
<TD>
|
|
<span
|
|
className={
|
|
c.is_public ? "text-foreground" : "text-muted-foreground"
|
|
}
|
|
>
|
|
{c.is_public ? "Public" : "Private"}
|
|
</span>
|
|
</TD>
|
|
<TD className="whitespace-nowrap">{fmtDate(c.created_at)}</TD>
|
|
</TR>
|
|
))
|
|
)}
|
|
</tbody>
|
|
</Table>
|
|
</ListShell>
|
|
);
|
|
}
|