@lobehub/ui/es/awesome/LogoMarquee/LogoMarquee.mjs

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

"use client";
import { renderLandingIcon } from "../landingIcon.mjs";
import { styles } from "./style.mjs";
import { memo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { cx } from "antd-style";
//#region src/awesome/LogoMarquee/LogoMarquee.tsx
const Track = ({ hidden, iconOnly, iconSize, items }) => /* @__PURE__ */ jsx("div", {
	"aria-hidden": hidden || void 0,
	className: styles.track,
	children: items.map(({ icon, label }) => /* @__PURE__ */ jsxs("span", {
		className: styles.item,
		title: iconOnly ? label : void 0,
		children: [renderLandingIcon(icon, iconSize), !iconOnly && label]
	}, label))
});
const LogoMarquee = memo(({ caption, className, duration = 28, gap = 36, iconOnly = false, iconSize = 18, items, maxWidth = 640, style, ...rest }) => {
	const variables = {
		"--logo-marquee-duration": `${duration}s`,
		"--logo-marquee-gap": `${gap}px`,
		"--logo-marquee-max-width": typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth
	};
	return /* @__PURE__ */ jsxs("div", {
		className: cx(styles.root, className),
		style: {
			...variables,
			...style
		},
		...rest,
		children: [/* @__PURE__ */ jsxs("div", {
			className: styles.viewport,
			children: [/* @__PURE__ */ jsx(Track, {
				iconOnly,
				iconSize,
				items
			}), /* @__PURE__ */ jsx(Track, {
				hidden: true,
				iconOnly,
				iconSize,
				items
			})]
		}), caption && /* @__PURE__ */ jsx("p", {
			className: styles.caption,
			children: caption
		})]
	});
});
LogoMarquee.displayName = "LogoMarquee";
//#endregion
export { LogoMarquee as default };

//# sourceMappingURL=LogoMarquee.mjs.map