@flanksource/clicky-ui/dist/data/LogViewer.js

Flanksource Clicky UI — React component library built on shadcn/ui with light/dark and density theming.

import { jsxs, jsx } from "react/jsx-runtime";
import { useState, useMemo } from "react";
import { cn } from "../lib/utils.js";
function LogViewer({
  logs,
  collapsedLines = 5,
  maxExpandedVh = 70,
  bgClass = "bg-muted",
  borderClass = "border-border",
  className
}) {
  const [expanded, setExpanded] = useState(false);
  const lines = useMemo(() => logs.split("\n"), [logs]);
  const hasMore = lines.length > collapsedLines;
  const maxHeight = expanded ? `${maxExpandedVh}vh` : `${collapsedLines * 1.4}em`;
  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
    /* @__PURE__ */ jsx(
      "pre",
      {
        className: cn(
          "mt-0.5 text-[11px] text-muted-foreground rounded p-1.5 whitespace-pre-wrap overflow-y-auto border transition-all duration-200",
          bgClass,
          borderClass
        ),
        style: { maxHeight },
        children: expanded ? logs : lines.slice(0, collapsedLines).join("\n")
      }
    ),
    hasMore && /* @__PURE__ */ jsx(
      "button",
      {
        type: "button",
        className: cn(
          "text-[10px] mt-0.5",
          expanded ? "text-muted-foreground" : "text-primary hover:opacity-80"
        ),
        onClick: () => setExpanded((e) => !e),
        children: expanded ? `▲ Collapse (${lines.length} lines)` : `▼ Show more (${lines.length} lines)`
      }
    )
  ] });
}
export {
  LogViewer
};
//# sourceMappingURL=LogViewer.js.map