@lobehub/ui/es/dashboard/MetricStrip/MetricStrip.mjs

Lobe UI is an open-source UI component library for building AIGC web apps

"use client";
import Skeleton from "../../base-ui/Skeleton/index.mjs";
import { useSurfaceLink } from "../Surface/link.mjs";
import Surface from "../Surface/Surface.mjs";
import { styles } from "./style.mjs";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { cx } from "antd-style";
//#region src/dashboard/MetricStrip/MetricStrip.tsx
const deltaClass = {
	down: styles.deltaDown,
	flat: styles.deltaFlat,
	up: styles.deltaUp
};
const MetricBody = ({ item, loading }) => /* @__PURE__ */ jsxs(Fragment, { children: [
	/* @__PURE__ */ jsx("div", {
		className: styles.label,
		children: item.label
	}),
	loading ? /* @__PURE__ */ jsx(Skeleton, {
		height: 28,
		radius: 6,
		width: 88
	}) : /* @__PURE__ */ jsx("div", {
		className: cx(styles.value, item.valueTone === "danger" && styles.valueDanger, item.valueTone === "warning" && styles.valueWarning),
		children: item.value
	}),
	!loading && (item.delta || item.hint) ? /* @__PURE__ */ jsxs("div", {
		className: styles.foot,
		children: [item.delta ? /* @__PURE__ */ jsx("span", {
			className: cx(styles.delta, deltaClass[item.direction ?? "flat"]),
			children: item.delta
		}) : null, item.hint ? /* @__PURE__ */ jsx("span", {
			className: styles.hint,
			children: item.hint
		}) : null]
	}) : null
] });
/** One card, divided into metrics. Peer numbers share a surface instead of a row of equal cards. */
const MetricStrip = ({ items, loading, renderLink }) => {
	const link = useSurfaceLink(renderLink);
	return /* @__PURE__ */ jsx(Surface, { children: /* @__PURE__ */ jsx("div", {
		className: styles.frame,
		children: /* @__PURE__ */ jsx("div", {
			className: styles.grid,
			children: items.map((item, index) => {
				const body = /* @__PURE__ */ jsx(MetricBody, {
					item,
					loading: item.loading ?? loading
				});
				if (item.href) return /* @__PURE__ */ jsx("div", {
					className: styles.slot,
					children: link({
						children: body,
						className: cx(styles.cell, styles.link),
						href: item.href
					})
				}, `${index}:${item.href}`);
				if (item.onClick) return /* @__PURE__ */ jsx("button", {
					className: cx(styles.cell, styles.press),
					type: "button",
					onClick: item.onClick,
					children: body
				}, index);
				return /* @__PURE__ */ jsx("div", {
					className: styles.cell,
					children: body
				}, index);
			})
		})
	}) });
};
MetricStrip.displayName = "MetricStrip";
//#endregion
export { MetricStrip as default };

//# sourceMappingURL=MetricStrip.mjs.map