@lobehub/ui/es/awesome/Hero/index.js

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

'use client';

import { Button, ConfigProvider } from 'antd';
import { useResponsive } from 'antd-style';
import { Github } from 'lucide-react';
import { memo, useCallback } from 'react';
import { Center, Flexbox } from 'react-layout-kit';
import A from "../../A";
import Icon from "../../Icon";
import AuroraBackground from "../AuroraBackground";
import GradientButton from "../GradientButton";
import { useStyles } from "./style";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
var Hero = /*#__PURE__*/memo(function (_ref) {
  var title = _ref.title,
    description = _ref.description,
    actions = _ref.actions,
    Link = _ref.Link;
  var _useStyles = useStyles(),
    styles = _useStyles.styles;
  var _useResponsive = useResponsive(),
    mobile = _useResponsive.mobile;
  var LinkRender = Link || A;
  var ButtonGroups = useCallback(function () {
    return Boolean(actions === null || actions === void 0 ? void 0 : actions.length) && /*#__PURE__*/_jsx(Flexbox, {
      className: styles.actions,
      gap: 16,
      horizontal: true,
      justify: 'center',
      children: actions.map(function (_ref2, index) {
        var text = _ref2.text,
          link = _ref2.link,
          openExternal = _ref2.openExternal,
          icon = _ref2.icon,
          type = _ref2.type;
        // @ts-ignore
        var ButtonIcon = icon === 'Github' ? /*#__PURE__*/_jsx(Icon, {
          icon: Github
        }) : icon;
        var content = type === 'primary' ? /*#__PURE__*/_jsx(GradientButton, {
          block: mobile,
          icon: ButtonIcon,
          size: "large",
          children: text
        }, index) : /*#__PURE__*/_jsx(Button, {
          block: mobile,
          icon: ButtonIcon,
          size: "large",
          type: "primary",
          children: text
        }, index);
        return openExternal ? /*#__PURE__*/_jsx(A, {
          href: link,
          target: openExternal ? '_blank' : undefined,
          children: content
        }, text) : /*#__PURE__*/_jsx(LinkRender, {
          to: link,
          children: content
        }, text);
      })
    });
  }, [actions]);
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(AuroraBackground, {}), /*#__PURE__*/_jsx(ConfigProvider, {
      theme: {
        token: {
          fontSize: 16
        }
      },
      children: /*#__PURE__*/_jsx(Flexbox, {
        align: 'center',
        style: {
          zIndex: 1
        },
        children: /*#__PURE__*/_jsx(Flexbox, {
          className: styles.container,
          distribution: 'center',
          horizontal: true,
          children: /*#__PURE__*/_jsxs(Center, {
            children: [title && /*#__PURE__*/_jsx(Center, {
              as: 'h1',
              className: styles.title,
              dangerouslySetInnerHTML: {
                __html: title
              },
              gap: '0.25em',
              horizontal: true,
              wrap: 'wrap'
            }), description && /*#__PURE__*/_jsx("p", {
              className: styles.desc,
              dangerouslySetInnerHTML: {
                __html: description
              }
            }), /*#__PURE__*/_jsx(ButtonGroups, {})]
          })
        })
      })
    })]
  });
});
export default Hero;