121 lines
3.2 KiB
TypeScript
121 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import * as React from "react";
|
|
import { Search } from "lucide-react";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
type ListLike = {
|
|
loading: boolean;
|
|
error: string | null;
|
|
total: number;
|
|
page: number;
|
|
totalPages: number;
|
|
setPage: (p: number) => void;
|
|
};
|
|
|
|
/**
|
|
* Shared chrome for every admin list page: a title with a live total, an
|
|
* optional debounced search box, an optional toolbar (filters/tabs), the
|
|
* table (children), and a pagination footer. Keeps the resource pages tiny.
|
|
*/
|
|
export function ListShell({
|
|
title,
|
|
total,
|
|
searchPlaceholder,
|
|
onQueryChange,
|
|
toolbar,
|
|
list,
|
|
children,
|
|
}: {
|
|
title: string;
|
|
total: number;
|
|
searchPlaceholder?: string;
|
|
onQueryChange?: (q: string) => void;
|
|
toolbar?: React.ReactNode;
|
|
list: ListLike;
|
|
children: React.ReactNode;
|
|
}) {
|
|
const [raw, setRaw] = React.useState("");
|
|
|
|
// Debounce search input → parent query (300ms).
|
|
React.useEffect(() => {
|
|
if (!onQueryChange) return;
|
|
const t = setTimeout(() => onQueryChange(raw.trim()), 300);
|
|
return () => clearTimeout(t);
|
|
}, [raw, onQueryChange]);
|
|
|
|
return (
|
|
<div className="space-y-5">
|
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
<h1 className="text-2xl font-semibold text-foreground">
|
|
{title}
|
|
<span className="ml-2 text-sm font-normal text-muted-foreground">
|
|
{total.toLocaleString()}
|
|
</span>
|
|
</h1>
|
|
{toolbar}
|
|
</div>
|
|
|
|
{onQueryChange ? (
|
|
<div className="relative max-w-md">
|
|
<Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
|
|
<Input
|
|
value={raw}
|
|
onChange={(e) => setRaw(e.target.value)}
|
|
placeholder={searchPlaceholder ?? "Search…"}
|
|
className="pl-9"
|
|
/>
|
|
</div>
|
|
) : null}
|
|
|
|
{list.error ? (
|
|
<p className="text-sm text-destructive">{list.error}</p>
|
|
) : null}
|
|
|
|
<div className={list.loading ? "opacity-60 transition-opacity" : ""}>
|
|
{children}
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between text-sm text-muted-foreground">
|
|
<span>
|
|
Page {list.page} of {list.totalPages}
|
|
{list.loading ? " · loading…" : ""}
|
|
</span>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
disabled={list.page <= 1 || list.loading}
|
|
onClick={() => list.setPage(list.page - 1)}
|
|
>
|
|
Previous
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
disabled={list.page >= list.totalPages || list.loading}
|
|
onClick={() => list.setPage(list.page + 1)}
|
|
>
|
|
Next
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** Centered empty-state row spanning the table. */
|
|
export function EmptyRow({ cols, label }: { cols: number; label: string }) {
|
|
return (
|
|
<tr>
|
|
<td
|
|
colSpan={cols}
|
|
className="px-4 py-10 text-center text-sm text-muted-foreground"
|
|
>
|
|
{label}
|
|
</td>
|
|
</tr>
|
|
);
|
|
}
|