@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
81 lines (78 loc) • 2.77 kB
JavaScript
'use client';
import A_default from "../../A/index.mjs";
import FlexBasic_default from "../../Flex/FlexBasic.mjs";
import Center_default from "../../Flex/Center.mjs";
import Button_default from "../../Button/Button.mjs";
import AuroraBackground_default from "../AuroraBackground/AuroraBackground.mjs";
import GradientButton_default from "../GradientButton/GradientButton.mjs";
import { styles } from "./style.mjs";
import { memo, useCallback } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
import { ConfigProvider } from "antd";
import { useResponsive } from "antd-style";
import { Github } from "lucide-react";
//#region src/awesome/Hero/Hero.tsx
const Hero = memo(({ title, description, actions, Link }) => {
const { mobile } = useResponsive();
const LinkRender = Link || A_default;
const ButtonGroups = useCallback(() => Boolean(actions?.length) && /* @__PURE__ */ jsx(FlexBasic_default, {
className: styles.actions,
gap: 16,
horizontal: true,
justify: "center",
children: actions.map(({ text, link, openExternal, github, type }, index) => {
const content = type === "primary" ? /* @__PURE__ */ jsx(GradientButton_default, {
block: mobile,
icon: github ? Github : void 0,
size: "large",
children: text
}, index) : /* @__PURE__ */ jsx(Button_default, {
block: mobile,
icon: github ? Github : void 0,
size: "large",
type: "primary",
children: text
}, index);
return openExternal ? /* @__PURE__ */ jsx(A_default, {
href: link,
target: openExternal ? "_blank" : void 0,
children: content
}, text) : /* @__PURE__ */ jsx(LinkRender, {
to: link,
children: content
}, text);
})
}), [actions]);
return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(AuroraBackground_default, {}), /* @__PURE__ */ jsx(ConfigProvider, {
theme: { token: { fontSize: 16 } },
children: /* @__PURE__ */ jsx(FlexBasic_default, {
align: "center",
style: { zIndex: 1 },
children: /* @__PURE__ */ jsx(FlexBasic_default, {
className: styles.container,
distribution: "center",
horizontal: true,
children: /* @__PURE__ */ jsxs(Center_default, { children: [
title && /* @__PURE__ */ jsx(Center_default, {
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, {})
] })
})
})
})] });
});
Hero.displayName = "Hero";
var Hero_default = Hero;
//#endregion
export { Hero_default as default };
//# sourceMappingURL=Hero.mjs.map