@lobehub/ui/es/Empty/Empty.mjs

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

"use client";
import Icon from "../Icon/Icon.mjs";
import Text from "../Text/Text.mjs";
import FluentEmoji from "../FluentEmoji/FluentEmoji.mjs";
import { styles } from "./style.mjs";
import { memo, useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { cssVar, cx } from "antd-style";
import { Plus } from "lucide-react";
//#region src/Empty/Empty.tsx
const Empty = memo(({ title, description, icon, iconColor, emoji, image, imageSize = 48, action, actionProps, titleProps, descriptionProps, align, imageProps, children, type = "default", variant = "default", className, onClick, ref, style, ...rest }) => {
	const isPage = type === "page";
	const alignValue = align || (isPage ? "flex-start" : "center");
	const isCenter = alignValue === "center";
	const isClickable = !isPage && variant === "dashed" && !!onClick;
	const resolvedIcon = icon ?? (isClickable ? Plus : void 0);
	const iconSize = isPage ? 36 : variant === "dashed" ? 20 : 32;
	const cover = useMemo(() => {
		if (image) return image;
		if (emoji) return /* @__PURE__ */ jsx(FluentEmoji, {
			emoji,
			size: imageSize,
			type: "anim"
		});
		if (!resolvedIcon) return null;
		return /* @__PURE__ */ jsx(Icon, {
			color: iconColor,
			icon: resolvedIcon,
			size: {
				size: iconSize,
				strokeWidth: isPage ? 1.25 : 2
			}
		});
	}, [
		image,
		emoji,
		imageSize,
		resolvedIcon,
		isPage,
		iconColor,
		iconSize
	]);
	const rootClassName = cx(isPage ? styles.rootPage : styles.root, !isPage && variant === "dashed" && styles.dashed, isClickable && styles.dashedClickable, className);
	const handleKeyDown = (event) => {
		if (!isClickable) return;
		if (event.key !== "Enter" && event.key !== " ") return;
		event.preventDefault();
		onClick?.(event);
	};
	const rootStyle = {
		color: !isPage && variant === "dashed" ? cssVar.colorTextTertiary : cssVar.colorTextQuaternary,
		...style
	};
	const titleNode = title && /* @__PURE__ */ jsx(Text, {
		align: isCenter ? "center" : void 0,
		color: cssVar.colorText,
		fontSize: isPage ? 18 : 14,
		weight: isPage ? 600 : 500,
		style: {
			marginBottom: isPage ? 4 : 0,
			marginTop: isPage ? 0 : variant === "dashed" ? 6 : 8
		},
		...titleProps,
		children: title
	});
	const descriptionNode = description && /* @__PURE__ */ jsx(Text, {
		align: isCenter ? "center" : void 0,
		color: cssVar.colorTextTertiary,
		fontSize: 13,
		style: { maxWidth: isPage ? "52ch" : "34ch" },
		...descriptionProps,
		children: description
	});
	if (isPage) return /* @__PURE__ */ jsxs("div", {
		className: rootClassName,
		ref,
		style: {
			alignItems: alignValue,
			...rootStyle
		},
		onClick,
		...rest,
		children: [cover && /* @__PURE__ */ jsx("div", {
			...imageProps,
			children: cover
		}), /* @__PURE__ */ jsxs("div", { children: [
			titleNode,
			descriptionNode,
			children,
			action && /* @__PURE__ */ jsx("div", {
				className: styles.extraPage,
				...actionProps,
				children: action
			})
		] })]
	});
	return /* @__PURE__ */ jsxs("div", {
		className: rootClassName,
		ref,
		role: isClickable ? "button" : void 0,
		style: {
			alignItems: alignValue,
			textAlign: isCenter ? "center" : void 0,
			...rootStyle
		},
		tabIndex: isClickable ? 0 : void 0,
		onClick,
		onKeyDown: handleKeyDown,
		...rest,
		children: [
			cover && /* @__PURE__ */ jsx("div", {
				...imageProps,
				children: cover
			}),
			titleNode,
			descriptionNode,
			children,
			action && /* @__PURE__ */ jsx("div", {
				className: styles.action,
				...actionProps,
				children: action
			})
		]
	});
});
Empty.displayName = "Empty";
//#endregion
export { Empty as default };

//# sourceMappingURL=Empty.mjs.map