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

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

import Icon from "../Icon/Icon.mjs";
import { isExternalHref, renderLandingLink } from "./landingLink.mjs";
import BottomGradientButton from "./BottomGradientButton/BottomGradientButton.mjs";
import { accentGradient } from "./landingTokens.mjs";
import { Fragment } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
import { createStaticStyles, cx } from "antd-style";
//#region src/awesome/landingActions.tsx
const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
	action: css`
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: center;

    min-block-size: 44px;
    padding-block: 0;
    padding-inline: 22px;
    border: 1px solid transparent;
    border-radius: 999px;

    font-size: ${cssVar.fontSize};
    font-weight: 600;
    color: ${cssVar.colorText};
    text-decoration: none;
    white-space: nowrap;

    background-image:
      linear-gradient(${cssVar.colorBgContainer}, ${cssVar.colorBgContainer}), ${accentGradient};
    background-clip: padding-box, border-box;
    background-origin: border-box;

    transition:
      filter 140ms ease,
      transform 90ms ease;

    &:hover {
      color: ${cssVar.colorText};
      filter: brightness(1.06);
    }

    &:active {
      transform: scale(0.97);
    }
  `,
	actionPrimary: css`
    && {
      color: ${cssVar.colorBgContainer};
      background: ${cssVar.colorText};
    }

    &&:hover {
      color: ${cssVar.colorBgContainer};
    }
  `,
	actionSmall: css`
    && {
      gap: 6px;
      min-block-size: 34px;
      padding-inline: 14px;
      font-size: ${cssVar.fontSizeSM};
    }
  `,
	group: css`
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    &[data-size='small'] {
      gap: 8px;
    }

    ${responsive.mobile} {
      &[data-size='large'] {
        align-self: stretch;
      }

      &[data-size='large'] > * {
        flex: 1;
      }
    }
  `
}));
const LandingActions = ({ actions, className, onNavigate, renderLink, size = "large" }) => /* @__PURE__ */ jsx("div", {
	className: cx(styles.group, className),
	"data-size": size,
	children: actions.map(({ external, href, icon, iconPlacement = "start", label, primary }) => {
		const iconNode = icon && /* @__PURE__ */ jsx(Icon, {
			icon,
			size: size === "small" ? 14 : 16
		});
		if (!primary) {
			const isExternal = external ?? isExternalHref(href);
			return /* @__PURE__ */ jsx(BottomGradientButton, {
				href,
				icon: iconNode,
				iconPosition: iconPlacement,
				rel: isExternal ? "noreferrer" : void 0,
				size: size === "small" ? "middle" : "large",
				target: isExternal ? "_blank" : void 0,
				onClick: !isExternal && onNavigate ? (event) => {
					event.preventDefault();
					onNavigate(href);
				} : void 0,
				children: label
			}, href);
		}
		return /* @__PURE__ */ jsx(Fragment, { children: renderLandingLink(renderLink, {
			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [
				iconPlacement === "start" && iconNode,
				label,
				iconPlacement === "end" && iconNode
			] }),
			className: cx(styles.action, styles.actionPrimary, size === "small" && styles.actionSmall),
			external,
			href
		}) }, href);
	})
});
//#endregion
export { LandingActions };

//# sourceMappingURL=landingActions.mjs.map