71 lines
2.0 KiB
TypeScript
71 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { FolderTree, Keyboard, Package, ToggleRight } from "lucide-react";
|
|
import { useCatalogManager } from "./use-catalog-store";
|
|
|
|
export interface CatalogStatsTotals {
|
|
totalPages: number;
|
|
enabledPages: number;
|
|
totalItems: number;
|
|
}
|
|
|
|
export function StatsBar({ totals }: { totals?: CatalogStatsTotals | null }) {
|
|
const { state } = useCatalogManager();
|
|
const selected = state.multiSelectedIds.size;
|
|
const rootTabs = state.rootPages.length;
|
|
|
|
const pages = totals?.totalPages ?? state.nodes.size;
|
|
const enabled = totals?.enabledPages ?? null;
|
|
const items = totals?.totalItems ?? null;
|
|
const loadedOnly = !totals;
|
|
|
|
return (
|
|
<div className="flex items-center justify-between gap-4 px-4 py-1.5 border-t bg-muted/30 text-[11px] text-muted-foreground shrink-0">
|
|
<div className="flex items-center gap-4">
|
|
<span className="flex items-center gap-1">
|
|
<FolderTree className="h-3 w-3" />
|
|
{rootTabs} root
|
|
</span>
|
|
<span>
|
|
{pages} pages
|
|
{loadedOnly ? " loaded" : ""}
|
|
</span>
|
|
{enabled !== null && (
|
|
<span className="flex items-center gap-1">
|
|
<ToggleRight className="h-3 w-3" />
|
|
{enabled} enabled
|
|
</span>
|
|
)}
|
|
{items !== null && (
|
|
<span className="flex items-center gap-1">
|
|
<Package className="h-3 w-3" />
|
|
{items} items
|
|
</span>
|
|
)}
|
|
{selected > 0 && (
|
|
<span className="text-primary font-medium">{selected} selected</span>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<Keyboard className="h-3 w-3" />
|
|
<span>
|
|
<kbd className="rounded border bg-background px-1 font-mono text-[9px]">
|
|
Ctrl+S
|
|
</kbd>{" "}
|
|
save
|
|
<span className="mx-1">·</span>
|
|
<kbd className="rounded border bg-background px-1 font-mono text-[9px]">
|
|
/
|
|
</kbd>{" "}
|
|
search
|
|
<span className="mx-1">·</span>
|
|
<kbd className="rounded border bg-background px-1 font-mono text-[9px]">
|
|
Ctrl+K
|
|
</kbd>{" "}
|
|
quick add
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|