@flanksource/clicky-ui
Version:
Flanksource Clicky UI — React component library built on shadcn/ui with light/dark and density theming.
57 lines (56 loc) • 2.72 kB
JavaScript
import { jsxs, jsx, Fragment } from "react/jsx-runtime";
import { useState, useMemo } from "react";
import { MethodBadge } from "../data/MethodBadge.js";
const defaultCommandHref = (operationId) => `/commands/${operationId}`;
function EndpointList({
operations,
definition,
renderLink,
getCommandHref = defaultCommandHref
}) {
const [search, setSearch] = useState("");
const filtered = useMemo(() => {
if (!search) return operations;
const q = search.toLowerCase();
return operations.filter(
(op) => {
var _a, _b;
return op.path.toLowerCase().includes(q) || ((_a = op.operation.summary) == null ? void 0 : _a.toLowerCase().includes(q)) || ((_b = op.operation.operationId) == null ? void 0 : _b.toLowerCase().includes(q));
}
);
}, [operations, search]);
if (operations.length === 0) {
return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-dashed p-8", children: [
/* @__PURE__ */ jsx("h2", { className: "text-lg font-medium", children: definition.emptyTitle || `No ${definition.title} endpoints found` }),
/* @__PURE__ */ jsx("p", { className: "mt-2 max-w-2xl text-sm text-muted-foreground", children: definition.emptyDescription || "This area is reserved in the information architecture, but the current OpenAPI surface does not expose matching operations yet." })
] });
}
return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
/* @__PURE__ */ jsx(
"input",
{
placeholder: `Search ${definition.title.toLowerCase()}...`,
value: search,
onChange: (e) => setSearch(e.target.value),
className: "w-full max-w-lg rounded-lg border bg-background px-3 py-2 text-sm outline-none placeholder:text-muted-foreground focus:ring-2 focus:ring-ring"
}
),
/* @__PURE__ */ jsx("div", { className: "space-y-2", children: filtered.map((op) => {
const operationId = op.operation.operationId ?? `${op.method}:${op.path}`;
return renderLink({
key: `${op.method}:${op.path}`,
to: getCommandHref(operationId, op),
className: "flex items-center gap-3 rounded-xl border bg-card p-3 transition-colors hover:border-emerald-200 hover:bg-emerald-50/50",
children: /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(MethodBadge, { method: op.method }),
/* @__PURE__ */ jsx("code", { className: "text-sm", children: op.path }),
op.operation.summary && /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs text-muted-foreground", children: op.operation.summary })
] })
});
}) })
] });
}
export {
EndpointList
};
//# sourceMappingURL=EndpointList.js.map