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

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

"use client";
import Spin from "../../base-ui/Spin/Spin.mjs";
import Skeleton from "../../base-ui/Skeleton/index.mjs";
import { styles } from "./style.mjs";
import { SurfaceDepthContext, useSurfaceDepth, useSurfaceLink } from "./link.mjs";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { cx } from "antd-style";
import { ArrowUpRight } from "lucide-react";
//#region src/dashboard/Surface/Surface.tsx
const defined = (node) => node !== null && node !== void 0 && node !== false;
/**
* Elevated card on a workspace canvas. Bare, it is a plain frame. With `title`,
* `description` or `extra` it gets a header and a padded body that lets a
* trailing table meet the card edges.
*/
function Surface({ bleed = false, chart, children, className, description, extra, href, loading, padded, renderLink, title, ...rest }) {
	const depth = useSurfaceDepth();
	const link = useSurfaceLink(renderLink);
	const refreshing = Boolean(loading) && defined(children);
	const placeholder = Boolean(loading) && !defined(children);
	const hasHeader = defined(title) || defined(description) || defined(extra) || refreshing;
	const pad = bleed ? false : padded ?? (hasHeader || placeholder);
	const clip = hasHeader || bleed || pad || defined(chart);
	const heading = /* @__PURE__ */ jsxs("div", {
		className: styles.heading,
		children: [defined(title) ? /* @__PURE__ */ jsx("div", {
			className: styles.title,
			children: title
		}) : null, defined(description) ? /* @__PURE__ */ jsx("div", {
			className: styles.desc,
			children: description
		}) : null]
	});
	const body = placeholder ? /* @__PURE__ */ jsx("div", {
		"aria-busy": "true",
		className: styles.loading,
		children: /* @__PURE__ */ jsx(Skeleton, {
			height: 220,
			radius: 8
		})
	}) : children;
	return /* @__PURE__ */ jsx(SurfaceDepthContext, {
		value: depth + 1,
		children: /* @__PURE__ */ jsxs("div", {
			className: cx(styles.card, styles.content, clip && styles.clip, href && styles.cardLinked, bleed && styles.bleed, className),
			...rest,
			children: [
				hasHeader ? /* @__PURE__ */ jsxs("div", {
					className: styles.header,
					children: [href ? link({
						children: /* @__PURE__ */ jsxs(Fragment, { children: [heading, /* @__PURE__ */ jsx(ArrowUpRight, {
							"aria-hidden": true,
							"data-surface-arrow": true,
							className: styles.arrow,
							size: 16
						})] }),
						className: styles.headingLink,
						href
					}) : heading, refreshing || defined(extra) ? /* @__PURE__ */ jsxs("div", {
						className: styles.extra,
						children: [refreshing ? /* @__PURE__ */ jsx(Spin, { size: "small" }) : null, extra]
					}) : null]
				}) : null,
				pad ? /* @__PURE__ */ jsx("div", {
					className: cx(styles.body, styles.tableBleed),
					children: body
				}) : body,
				defined(chart) ? /* @__PURE__ */ jsx("div", {
					className: styles.chart,
					children: chart
				}) : null
			]
		})
	});
}
Surface.displayName = "Surface";
//#endregion
export { Surface as default };

//# sourceMappingURL=Surface.mjs.map