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

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

{"version":3,"file":"landingActions.mjs","names":[],"sources":["../../src/awesome/landingActions.tsx"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\nimport { Fragment, type ReactNode } from 'react';\n\nimport BottomGradientButton from '@/awesome/BottomGradientButton';\nimport { isExternalHref, type LandingLinkRender, renderLandingLink } from '@/awesome/landingLink';\nimport { accentGradient } from '@/awesome/landingTokens';\nimport Icon, { type IconProps } from '@/Icon';\n\nexport interface LandingAction {\n  /** Opens in a new tab. Inferred from absolute URLs when omitted. */\n  external?: boolean;\n  href: string;\n  icon?: IconProps['icon'];\n  /** Places the icon after the label, e.g. for an arrow. */\n  iconPlacement?: 'start' | 'end';\n  label: ReactNode;\n  /** The primary action is a filled pill; others render as BottomGradientButton. */\n  primary?: boolean;\n}\n\nconst styles = createStaticStyles(({ css, cssVar, responsive }) => ({\n  action: css`\n    display: inline-flex;\n    gap: 8px;\n    align-items: center;\n    justify-content: center;\n\n    min-block-size: 44px;\n    padding-block: 0;\n    padding-inline: 22px;\n    border: 1px solid transparent;\n    border-radius: 999px;\n\n    font-size: ${cssVar.fontSize};\n    font-weight: 600;\n    color: ${cssVar.colorText};\n    text-decoration: none;\n    white-space: nowrap;\n\n    background-image:\n      linear-gradient(${cssVar.colorBgContainer}, ${cssVar.colorBgContainer}), ${accentGradient};\n    background-clip: padding-box, border-box;\n    background-origin: border-box;\n\n    transition:\n      filter 140ms ease,\n      transform 90ms ease;\n\n    &:hover {\n      color: ${cssVar.colorText};\n      filter: brightness(1.06);\n    }\n\n    &:active {\n      transform: scale(0.97);\n    }\n  `,\n  actionPrimary: css`\n    && {\n      color: ${cssVar.colorBgContainer};\n      background: ${cssVar.colorText};\n    }\n\n    &&:hover {\n      color: ${cssVar.colorBgContainer};\n    }\n  `,\n  actionSmall: css`\n    && {\n      gap: 6px;\n      min-block-size: 34px;\n      padding-inline: 14px;\n      font-size: ${cssVar.fontSizeSM};\n    }\n  `,\n  group: css`\n    display: flex;\n    flex-wrap: wrap;\n    gap: 12px;\n\n    &[data-size='small'] {\n      gap: 8px;\n    }\n\n    ${responsive.mobile} {\n      &[data-size='large'] {\n        align-self: stretch;\n      }\n\n      &[data-size='large'] > * {\n        flex: 1;\n      }\n    }\n  `,\n}));\n\nexport type LandingNavigate = (href: string) => void;\n\nexport interface LandingActionsProps {\n  actions: LandingAction[];\n  className?: string;\n  /** Client-side navigation for internal non-primary actions, which render as buttons with an href. */\n  onNavigate?: LandingNavigate;\n  renderLink?: LandingLinkRender;\n  size?: 'large' | 'small';\n}\n\nexport const LandingActions = ({\n  actions,\n  className,\n  onNavigate,\n  renderLink,\n  size = 'large',\n}: LandingActionsProps) => (\n  <div className={cx(styles.group, className)} data-size={size}>\n    {actions.map(({ external, href, icon, iconPlacement = 'start', label, primary }) => {\n      const iconNode = icon && <Icon icon={icon} size={size === 'small' ? 14 : 16} />;\n      if (!primary) {\n        const isExternal = external ?? isExternalHref(href);\n        return (\n          <BottomGradientButton\n            href={href}\n            icon={iconNode}\n            iconPosition={iconPlacement}\n            key={href}\n            rel={isExternal ? 'noreferrer' : undefined}\n            size={size === 'small' ? 'middle' : 'large'}\n            target={isExternal ? '_blank' : undefined}\n            onClick={\n              !isExternal && onNavigate\n                ? (event) => {\n                    event.preventDefault();\n                    onNavigate(href);\n                  }\n                : undefined\n            }\n          >\n            {label}\n          </BottomGradientButton>\n        );\n      }\n      return (\n        <Fragment key={href}>\n          {renderLandingLink(renderLink, {\n            children: (\n              <>\n                {iconPlacement === 'start' && iconNode}\n                {label}\n                {iconPlacement === 'end' && iconNode}\n              </>\n            ),\n            className: cx(\n              styles.action,\n              styles.actionPrimary,\n              size === 'small' && styles.actionSmall,\n            ),\n            external,\n            href,\n          })}\n        </Fragment>\n      );\n    })}\n  </div>\n);\n"],"mappings":";;;;;;;;AAoBA,MAAM,SAAS,oBAAoB,EAAE,KAAK,QAAQ,kBAAkB;CAClE,QAAQ,GAAG;;;;;;;;;;;;iBAYI,OAAO,SAAS;;aAEpB,OAAO,UAAU;;;;;wBAKN,OAAO,iBAAiB,IAAI,OAAO,iBAAiB,KAAK,eAAe;;;;;;;;;eASjF,OAAO,UAAU;;;;;;;;CAQ9B,eAAe,GAAG;;eAEL,OAAO,iBAAiB;oBACnB,OAAO,UAAU;;;;eAItB,OAAO,iBAAiB;;;CAGrC,aAAa,GAAG;;;;;mBAKC,OAAO,WAAW;;;CAGnC,OAAO,GAAG;;;;;;;;;MASN,WAAW,OAAO;;;;;;;;;;AAUxB,EAAE;AAaF,MAAa,kBAAkB,EAC7B,SACA,WACA,YACA,YACA,OAAO,cAEP,oBAAC,OAAD;CAAK,WAAW,GAAG,OAAO,OAAO,SAAS;CAAG,aAAW;CACrD,UAAA,QAAQ,KAAK,EAAE,UAAU,MAAM,MAAM,gBAAgB,SAAS,OAAO,cAAc;EAClF,MAAM,WAAW,QAAQ,oBAAC,MAAD;GAAY;GAAM,MAAM,SAAS,UAAU,KAAK;EAAK,CAAA;EAC9E,IAAI,CAAC,SAAS;GACZ,MAAM,aAAa,YAAY,eAAe,IAAI;GAClD,OACE,oBAAC,sBAAD;IACQ;IACN,MAAM;IACN,cAAc;IAEd,KAAK,aAAa,eAAe,KAAA;IACjC,MAAM,SAAS,UAAU,WAAW;IACpC,QAAQ,aAAa,WAAW,KAAA;IAChC,SACE,CAAC,cAAc,cACV,UAAU;KACT,MAAM,eAAe;KACrB,WAAW,IAAI;IACjB,IACA,KAAA;IAGL,UAAA;GACmB,GAdf,IAce;EAE1B;EACA,OACE,oBAAC,UAAD,EAAA,UACG,kBAAkB,YAAY;GAC7B,UACE,qBAAA,YAAA,EAAA,UAAA;IACG,kBAAkB,WAAW;IAC7B;IACA,kBAAkB,SAAS;GAC5B,EAAA,CAAA;GAEJ,WAAW,GACT,OAAO,QACP,OAAO,eACP,SAAS,WAAW,OAAO,WAC7B;GACA;GACA;EACF,CAAC,EACO,GAjBK,IAiBL;CAEd,CAAC;AACE,CAAA"}