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

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

"use client";
import { Highlighter } from "../../Highlighter/Highlighter.mjs";
import Segmented from "../../base-ui/Segmented/Segmented.mjs";
import { styles } from "./style.mjs";
import { memo, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { cx } from "antd-style";
//#region src/awesome/CodeShowcase/CodeShowcase.tsx
const CodeShowcase = memo(({ activeKey: controlledKey, className, defaultActiveKey, items, minHeight, onChange, style, ...rest }) => {
	const [innerKey, setInnerKey] = useState(defaultActiveKey ?? items[0]?.key);
	const activeKey = controlledKey ?? innerKey;
	const active = items.find((item) => item.key === activeKey) ?? items[0];
	if (!active) return null;
	return /* @__PURE__ */ jsxs("div", {
		className: cx(styles.root, className),
		style: {
			"--code-showcase-min-height": `${minHeight}px`,
			...style
		},
		...rest,
		children: [items.length > 1 && /* @__PURE__ */ jsx(Segmented, {
			className: styles.tabs,
			options: items.map(({ key, label }) => ({
				label,
				value: key
			})),
			value: active.key,
			variant: "outlined",
			onChange: (key) => {
				setInnerKey(key);
				onChange?.(key);
			}
		}), /* @__PURE__ */ jsxs("div", {
			className: styles.panes,
			children: [/* @__PURE__ */ jsx(Highlighter, {
				className: styles.code,
				language: active.language ?? "tsx",
				variant: "outlined",
				children: active.code
			}), /* @__PURE__ */ jsx("div", {
				className: styles.preview,
				children: active.preview
			})]
		})]
	});
});
CodeShowcase.displayName = "CodeShowcase";
//#endregion
export { CodeShowcase as default };

//# sourceMappingURL=CodeShowcase.mjs.map