@lobehub/ui/es/base-ui/Skeleton/SkeletonText.mjs

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

"use client";
import { styles } from "./style.mjs";
import Skeleton from "./Skeleton.mjs";
import { jsx } from "react/jsx-runtime";
import { cssVar, cx } from "antd-style";
//#region src/base-ui/Skeleton/SkeletonText.tsx
const SkeletonText = ({ rows = 1, fontSize, lineHeight = 1.6, gap, width, className, style, ...rest }) => {
	const rowCount = Math.max(rows, 1);
	const base = fontSize === void 0 ? cssVar.fontSize : `${fontSize}px`;
	const rowHeight = `round(calc(${base} * ${1 + (lineHeight - 1) * .5}), 1px)`;
	const halfLeading = gap === void 0 ? `round(calc(${base} * ${(lineHeight - 1) * .25}), 1px)` : void 0;
	const widths = Array.isArray(width) ? width : void 0;
	const rowWidth = (index) => {
		if (widths) return widths[index] ?? widths.at(-1) ?? "100%";
		if (width !== void 0) return width;
		return index === rowCount - 1 && rowCount > 1 ? "66%" : "100%";
	};
	return /* @__PURE__ */ jsx("div", {
		className: cx(styles.text, className),
		style: {
			gap,
			...style
		},
		children: Array.from({ length: rowCount }).map((_, index) => /* @__PURE__ */ jsx(Skeleton, {
			height: rowHeight,
			style: { marginBlock: halfLeading },
			width: rowWidth(index),
			...rest
		}, index))
	});
};
SkeletonText.displayName = "SkeletonText";
//#endregion
export { SkeletonText as default };

//# sourceMappingURL=SkeletonText.mjs.map