@lobehub/ui/es/dashboard/PageSkeleton/PageSkeleton.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 { styles } from "../Surface/style.mjs";
import { styles as styles$1 } from "./style.mjs";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/dashboard/PageSkeleton/PageSkeleton.tsx
const bone = {
	height: void 0,
	width: void 0
};
const lineWidths = [
	["68%", "36%"],
	["52%", "28%"],
	["76%", "42%"],
	["58%", "32%"]
];
function LoadingAnnouncer({ label }) {
	return /* @__PURE__ */ jsx("output", {
		"aria-live": "polite",
		className: styles$1.srOnly,
		children: label
	});
}
LoadingAnnouncer.displayName = "LoadingAnnouncer";
function PageHeaderSkeleton({ action = true }) {
	return /* @__PURE__ */ jsxs("div", {
		"aria-hidden": true,
		className: styles$1.header,
		children: [/* @__PURE__ */ jsxs("div", {
			className: styles$1.headerCopy,
			children: [/* @__PURE__ */ jsx(Skeleton, {
				className: styles$1.title,
				style: bone
			}), /* @__PURE__ */ jsx(Skeleton.Text, {
				fontSize: 14,
				width: "46%"
			})]
		}), action ? /* @__PURE__ */ jsx(Skeleton, {
			className: styles$1.action,
			style: bone
		}) : null]
	});
}
PageHeaderSkeleton.displayName = "PageHeaderSkeleton";
function TableSkeleton({ framed = true, leading = "text", rows = 6 }) {
	return /* @__PURE__ */ jsxs("div", {
		"aria-hidden": true,
		className: framed ? `${styles$1.table} ${styles.card}` : styles$1.table,
		children: [/* @__PURE__ */ jsx("div", {
			className: styles$1.thead,
			children: [
				96,
				72,
				64,
				48
			].map((width, index) => /* @__PURE__ */ jsx(Skeleton, {
				className: styles$1.theadCell,
				style: {
					...bone,
					width
				}
			}, index))
		}), Array.from({ length: rows }, (_, index) => /* @__PURE__ */ jsxs("div", {
			className: styles$1.row,
			children: [
				leading === "avatar" ? /* @__PURE__ */ jsx(Skeleton.Avatar, {
					shape: "circle",
					size: 24
				}) : null,
				leading === "icon" ? /* @__PURE__ */ jsx(Skeleton.Avatar, {
					shape: "square",
					size: 24
				}) : null,
				/* @__PURE__ */ jsx("div", {
					className: styles$1.copy,
					children: /* @__PURE__ */ jsx(Skeleton.Text, {
						fontSize: 14,
						rows: 2,
						width: [...lineWidths[index % lineWidths.length]]
					})
				}),
				/* @__PURE__ */ jsx(Skeleton, {
					className: styles$1.tag,
					style: bone
				}),
				/* @__PURE__ */ jsx(Skeleton, {
					className: styles$1.cell,
					style: bone
				})
			]
		}, index))]
	});
}
TableSkeleton.displayName = "TableSkeleton";
function StatCardSkeleton() {
	return /* @__PURE__ */ jsxs("div", {
		"aria-hidden": true,
		className: `${styles$1.stat} ${styles.card}`,
		children: [
			/* @__PURE__ */ jsx(Skeleton.Text, {
				fontSize: 14,
				width: 72
			}),
			/* @__PURE__ */ jsx(Skeleton, {
				className: styles$1.statValue,
				style: bone
			}),
			/* @__PURE__ */ jsx(Skeleton.Text, {
				fontSize: 14,
				width: "68%"
			})
		]
	});
}
StatCardSkeleton.displayName = "StatCardSkeleton";
function PageLoading({ header = true, label = "Loading", stats = 4 }) {
	return /* @__PURE__ */ jsxs("div", {
		"aria-busy": "true",
		className: styles$1.page,
		children: [
			/* @__PURE__ */ jsx(LoadingAnnouncer, { label }),
			header ? /* @__PURE__ */ jsx(PageHeaderSkeleton, {}) : null,
			/* @__PURE__ */ jsx("section", {
				"aria-hidden": true,
				className: styles$1.statGrid,
				children: Array.from({ length: stats }, (_, index) => /* @__PURE__ */ jsx(StatCardSkeleton, {}, index))
			}),
			/* @__PURE__ */ jsx(TableSkeleton, {})
		]
	});
}
PageLoading.displayName = "PageLoading";
//#endregion
export { LoadingAnnouncer, PageHeaderSkeleton, StatCardSkeleton, TableSkeleton, PageLoading as default };

//# sourceMappingURL=PageSkeleton.mjs.map