@lobehub/ui/es/base-ui/Spin/NetworkGlyph.mjs

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

import { styles } from "./style.mjs";
import { memo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/base-ui/Spin/NetworkGlyph.tsx
const layers = [
	0,
	1,
	2
];
const unit = 25;
const nodes = layers.flatMap((layer) => layers.map((row) => ({
	x: unit + layer * unit,
	y: unit + row * unit
})));
const lines = layers.slice(0, -1).flatMap((layer) => layers.flatMap((from) => layers.map((to) => ({
	x1: unit + layer * unit,
	x2: unit + (layer + 1) * unit,
	y1: unit + from * unit,
	y2: unit + to * unit
}))));
const particles = [
	0,
	1,
	2
];
const minRenderedPx = (units, px, floorPx) => Math.max(units, floorPx * 100 / px);
const NetworkGlyph = memo(({ px }) => {
	const boxStyle = {
		"--spin-node-size": `${minRenderedPx(6, px, 2)}px`,
		"--spin-particle-size": `${minRenderedPx(3, px, 1.5)}px`,
		"transform": `scale(${px / 100})`
	};
	return /* @__PURE__ */ jsx("span", {
		className: styles.network,
		style: {
			height: px,
			width: px
		},
		children: /* @__PURE__ */ jsxs("span", {
			className: styles.networkBox,
			style: boxStyle,
			children: [
				/* @__PURE__ */ jsx("svg", {
					className: styles.networkLines,
					viewBox: "0 0 100 100",
					children: lines.map((line) => /* @__PURE__ */ jsx("line", { ...line }, `${line.x1}-${line.y1}-${line.y2}`))
				}),
				nodes.map(({ x, y }, index) => /* @__PURE__ */ jsx("i", {
					className: styles.networkNode,
					style: {
						animationDelay: `${index * .2}s`,
						left: x,
						top: y
					}
				}, `${x}-${y}`)),
				particles.map((index) => /* @__PURE__ */ jsx("i", {
					className: styles.networkParticle,
					style: { animationDelay: `${index * .6}s` }
				}, index)),
				/* @__PURE__ */ jsx("b", { className: styles.networkCore }),
				/* @__PURE__ */ jsx("u", { className: styles.networkRing })
			]
		})
	});
});
NetworkGlyph.displayName = "NetworkGlyph";
//#endregion
export { NetworkGlyph as default };

//# sourceMappingURL=NetworkGlyph.mjs.map