@flanksource/clicky-ui
Version:
Flanksource Clicky UI — React component library built on shadcn/ui with light/dark and density theming.
55 lines (54 loc) • 2.57 kB
JavaScript
import { jsxs, jsx } from "react/jsx-runtime";
import { Icon } from "../data/Icon.js";
import { cn } from "../lib/utils.js";
function InlineError({ title, error, className }) {
const message = error instanceof Error ? error.message : String(error ?? "");
const details = getErrorDetails(error);
const hasDetails = Boolean(details.responseBody || details.status || details.url);
return /* @__PURE__ */ jsxs("div", { className: cn("rounded-xl border border-dashed border-red-300 p-6 text-sm", className), children: [
/* @__PURE__ */ jsxs("div", { className: "text-center", children: [
/* @__PURE__ */ jsx("div", { className: "font-medium text-red-600", children: title }),
message && /* @__PURE__ */ jsx("div", { className: "mt-1 text-muted-foreground", children: message })
] }),
hasDetails && /* @__PURE__ */ jsxs("details", { className: "group mt-3", children: [
/* @__PURE__ */ jsxs("summary", { className: "flex cursor-pointer items-center justify-center gap-1 text-xs text-muted-foreground hover:text-foreground", children: [
/* @__PURE__ */ jsx(
Icon,
{
name: "codicon:chevron-right",
className: "transition-transform group-open:rotate-90"
}
),
"More details"
] }),
/* @__PURE__ */ jsxs("div", { className: "mt-2 space-y-2 text-left font-mono text-xs", children: [
(details.method || details.url || details.status) && /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground", children: [
details.method && /* @__PURE__ */ jsxs("span", { children: [
details.method,
" "
] }),
details.url,
details.status != null && /* @__PURE__ */ jsxs("span", { children: [
" - ",
details.status
] })
] }),
details.responseBody && /* @__PURE__ */ jsx("pre", { className: "max-h-64 overflow-auto rounded-md bg-muted p-2 text-xs", children: details.responseBody })
] })
] })
] });
}
function getErrorDetails(error) {
if (error == null || typeof error !== "object") return {};
const record = error;
const details = {};
if (typeof record.method === "string") details.method = record.method;
if (typeof record.url === "string") details.url = record.url;
if (typeof record.status === "number") details.status = record.status;
if (typeof record.responseBody === "string") details.responseBody = record.responseBody;
return details;
}
export {
InlineError
};
//# sourceMappingURL=InlineError.js.map