@llamaindex/ui/dist/chunk-PUTUD3FN.mjs

A comprehensive UI component library built with React, TypeScript, and Tailwind CSS for LlamaIndex applications

import { Card } from './chunk-2QCOUGFK.mjs';
import { cn } from './chunk-MG2ARK3A.mjs';
import { useState, useEffect } from 'react';
import { jsx, jsxs } from 'react/jsx-runtime';

var variantStyles = {
  total: {
    dot: "bg-gray-800",
    subtitle: "text-gray-600"
  },
  awaiting: {
    dot: "bg-orange-500"
  },
  approved: {
    dot: "bg-green-500"
  },
  rejected: {
    dot: "bg-red-500"
  }
};
async function fetchCountData(params) {
  var _a;
  const data = await params.client.search({
    pageSize: 0,
    filter: params.filter,
    includeTotal: true
  });
  return (_a = data.totalSize) != null ? _a : 0;
}
function ItemCount({
  title,
  filter = {},
  variant = "total",
  subtitle,
  client
}) {
  const [count, setCount] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const styles = variantStyles[variant];
  useEffect(() => {
    fetchCountData({ filter, client }).then(setCount).catch((err) => setError(err.message)).finally(() => setLoading(false));
  }, [filter, client]);
  return /* @__PURE__ */ jsx(Card, { className: "p-6 bg-white border border-gray-200 hover:shadow-md transition-shadow", children: /* @__PURE__ */ jsx("div", { className: "flex items-start justify-between", children: /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
      /* @__PURE__ */ jsx("div", { className: cn("w-2 h-2 rounded-full", styles.dot) }),
      /* @__PURE__ */ jsx("h4", { className: cn("text-md font-medium"), children: title })
    ] }),
    loading && /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
      /* @__PURE__ */ jsx("div", { className: "w-8 h-8 border-2 border-gray-300 border-t-gray-600 rounded-full animate-spin" }),
      /* @__PURE__ */ jsx("span", { className: "text-gray-500 text-sm", children: "Loading..." })
    ] }),
    error && /* @__PURE__ */ jsxs("div", { className: "text-red-500 text-sm", children: [
      "Error: ",
      error
    ] }),
    count !== null && /* @__PURE__ */ jsxs("div", { children: [
      subtitle && /* @__PURE__ */ jsx("p", { className: cn("text-sm", "text-zinc-500"), children: subtitle }),
      /* @__PURE__ */ jsx("p", { className: "text-3xl font-bold text-gray-900 mt-3", children: count.toLocaleString() })
    ] })
  ] }) }) });
}

export { ItemCount };