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

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

"use client";
import FlexBasic_default from "../../Flex/FlexBasic.mjs";
import Block from "../../Block/Block.mjs";
import Icon from "../../Icon/Icon.mjs";
import Text from "../../base-ui/Text/Text.mjs";
import { styles } from "../Surface/style.mjs";
import { styles as styles$1 } from "./style.mjs";
import { jsx, jsxs } from "react/jsx-runtime";
import { Minus, TrendingDown, TrendingUp } from "lucide-react";
//#region src/dashboard/StatCard/StatCard.tsx
const deltaIcon = {
	down: TrendingDown,
	flat: Minus,
	up: TrendingUp
};
function StatCard({ action, delta, direction = "flat", hint, label, mark, prominent = false, value, wash }) {
	const deltaClass = {
		down: styles$1.deltaDown,
		flat: styles$1.deltaFlat,
		up: styles$1.deltaUp
	}[direction];
	return /* @__PURE__ */ jsx("div", {
		className: styles$1.lift,
		children: /* @__PURE__ */ jsx(Block, {
			className: `${styles$1.root} ${styles.card}${wash ? ` ${styles$1.wash} ${styles$1[wash]}` : ""} ${styles$1.frame}`,
			variant: "borderless",
			children: /* @__PURE__ */ jsxs(FlexBasic_default, {
				className: styles$1.body,
				gap: prominent ? 0 : 8,
				children: [
					/* @__PURE__ */ jsxs(FlexBasic_default, {
						horizontal: true,
						align: "center",
						justify: "space-between",
						children: [/* @__PURE__ */ jsxs(FlexBasic_default, {
							horizontal: true,
							align: "center",
							className: styles$1.copy,
							gap: 6,
							children: [/* @__PURE__ */ jsx(Text, {
								ellipsis: true,
								className: prominent ? styles$1.metricLabel : styles$1.label,
								children: label
							}), action]
						}), mark ? /* @__PURE__ */ jsx("span", {
							"aria-hidden": true,
							className: styles$1.badge,
							children: /* @__PURE__ */ jsx(Icon, {
								icon: mark,
								size: 14
							})
						}) : null]
					}),
					/* @__PURE__ */ jsx("div", {
						className: prominent ? styles$1.metricValue : styles$1.value,
						children: value
					}),
					delta || hint ? /* @__PURE__ */ jsxs(FlexBasic_default, {
						horizontal: true,
						align: "center",
						className: prominent ? styles$1.metricFoot : void 0,
						gap: 8,
						wrap: "wrap",
						children: [delta ? /* @__PURE__ */ jsxs("span", {
							className: `${styles$1.delta} ${deltaClass}`,
							children: [/* @__PURE__ */ jsx(Icon, {
								icon: deltaIcon[direction],
								size: 14
							}), delta]
						}) : null, hint ? /* @__PURE__ */ jsx(Text, {
							className: prominent ? styles$1.metricHint : styles$1.hint,
							children: hint
						}) : null]
					}) : null
				]
			})
		})
	});
}
StatCard.displayName = "StatCard";
//#endregion
export { StatCard as default };

//# sourceMappingURL=StatCard.mjs.map