60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
import { useCallback, useMemo, type ReactNode } from "react";
|
|
import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
|
|
import type { ClientRouteView } from "@/src/functions/backend/acme/decorate-client-route";
|
|
import DataTable from "../data-table";
|
|
import buildClientRoutesTableColumns from "./client-routes-table-columns";
|
|
import ClientRouteMobileCard from "./client-route-mobile-card";
|
|
|
|
type Props = {
|
|
routes?: ClientRouteView[];
|
|
hosts_by_id?: Map<number, BUN_SQLITE_WGUI_HOSTS>;
|
|
show_host?: boolean;
|
|
loading?: boolean;
|
|
empty?: ReactNode;
|
|
onDeleted?: ({ id }: { id: number }) => void;
|
|
};
|
|
|
|
export default function ClientRoutesTable({
|
|
routes,
|
|
hosts_by_id,
|
|
show_host,
|
|
loading,
|
|
empty,
|
|
onDeleted,
|
|
}: Props) {
|
|
const columns = useMemo(
|
|
() =>
|
|
buildClientRoutesTableColumns({
|
|
onDeleted,
|
|
hosts_by_id,
|
|
show_host,
|
|
}),
|
|
[onDeleted, hosts_by_id, show_host],
|
|
);
|
|
|
|
const MobileItem = useCallback(
|
|
({ item }: { item: ClientRouteView }) => (
|
|
<ClientRouteMobileCard
|
|
route={item}
|
|
hosts_by_id={hosts_by_id}
|
|
show_host={show_host}
|
|
onDeleted={onDeleted}
|
|
/>
|
|
),
|
|
[hosts_by_id, show_host, onDeleted],
|
|
);
|
|
|
|
return (
|
|
<DataTable
|
|
caption="Client routes"
|
|
items={routes}
|
|
columns={columns}
|
|
getKey={({ item }) => Number(item.id)}
|
|
loading={loading}
|
|
empty={empty}
|
|
skeleton_rows={3}
|
|
MobileItem={MobileItem}
|
|
/>
|
|
);
|
|
}
|