@lobehub/ui/es/dashboard/Section/Section.mjs

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

"use client";
import FlexBasic_default from "../../Flex/FlexBasic.mjs";
import Icon from "../../Icon/Icon.mjs";
import { useSurfaceLink } from "../Surface/link.mjs";
import Surface from "../Surface/Surface.mjs";
import { styles } from "./style.mjs";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { ChevronRight } from "lucide-react";
//#region src/dashboard/Section/Section.tsx
/** A titled page section with description, extra and a "more" link, flat or as a card. */
const Section = ({ className, variant = "default", fontSize, title, more, moreLink, icon, children, desc, extra, gap, padded, renderLink, ...rest }) => {
	const link = useSurfaceLink(renderLink);
	const moreNode = moreLink ? link({
		children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", { children: more }), /* @__PURE__ */ jsx(Icon, { icon: ChevronRight })] }),
		className: styles.more,
		href: moreLink,
		rel: moreLink.startsWith("http") ? "noreferrer" : void 0,
		target: moreLink.startsWith("http") ? "_blank" : void 0
	}) : null;
	const actions = extra || moreNode ? /* @__PURE__ */ jsxs(FlexBasic_default, {
		horizontal: true,
		align: "center",
		gap: 8,
		children: [extra, moreNode]
	}) : void 0;
	if (variant === "card") return /* @__PURE__ */ jsx(Surface, {
		description: desc,
		extra: actions,
		padded: padded ?? true,
		title: title ? /* @__PURE__ */ jsxs("span", {
			className: styles.title,
			style: fontSize ? { fontSize } : void 0,
			children: [icon, title]
		}) : void 0,
		children: /* @__PURE__ */ jsx(FlexBasic_default, {
			className,
			gap: gap ?? 12,
			...rest,
			children
		})
	});
	if (!title) return /* @__PURE__ */ jsx(FlexBasic_default, {
		className,
		gap,
		...rest,
		children
	});
	return /* @__PURE__ */ jsxs(FlexBasic_default, {
		className,
		gap: gap ?? 16,
		width: "100%",
		...rest,
		children: [/* @__PURE__ */ jsxs(FlexBasic_default, {
			horizontal: true,
			align: "center",
			gap: 12,
			justify: "space-between",
			width: "100%",
			children: [/* @__PURE__ */ jsxs(FlexBasic_default, {
				gap: 4,
				children: [
					icon,
					/* @__PURE__ */ jsx("h2", {
						className: styles.title,
						style: fontSize ? { fontSize } : void 0,
						children: title
					}),
					desc ? /* @__PURE__ */ jsx("div", {
						className: styles.desc,
						children: desc
					}) : null
				]
			}), actions ?? null]
		}), children]
	});
};
Section.displayName = "Section";
//#endregion
export { Section as default };

//# sourceMappingURL=Section.mjs.map