@mantine/code-highlight/cjs/CodeHighlightTabs/CodeHighlightTabs.cjs

Code highlight with Mantine theme

"use client";
const require_CodeHighlight_module = require("../CodeHighlight.module.cjs");
const require_CodeHighlight = require("../CodeHighlight/CodeHighlight.cjs");
const require_FileIcon = require("./FileIcon.cjs");
let _mantine_core = require("@mantine/core");
let _mantine_hooks = require("@mantine/hooks");
let react = require("react");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/code-highlight/src/CodeHighlightTabs/CodeHighlightTabs.tsx
const CodeHighlightTabs = (0, _mantine_core.factory)((_props) => {
	const props = (0, _mantine_core.useProps)("CodeHighlightTabs", null, _props);
	const { classNames, className, style, styles, unstyled, vars, defaultActiveTab, activeTab, onTabChange, defaultExpanded, expanded, onExpandedChange, code, getFileIcon, withCopyButton, withExpandButton, withBorder, radius, maxCollapsedHeight, copyLabel, copiedLabel, expandCodeLabel, collapseCodeLabel, background, controls, codeColorScheme, withLineNumbers, attributes, ...others } = props;
	const getStyles = (0, _mantine_core.useStyles)({
		name: "CodeHighlightTabs",
		classes: require_CodeHighlight_module.default,
		props,
		className,
		style,
		classNames,
		styles,
		unstyled,
		attributes,
		vars
	});
	const [value, setValue] = (0, _mantine_hooks.useUncontrolled)({
		defaultValue: defaultActiveTab,
		value: activeTab,
		finalValue: 0,
		onChange: onTabChange
	});
	const [_expanded, setExpanded] = (0, _mantine_hooks.useUncontrolled)({
		defaultValue: defaultExpanded,
		value: expanded,
		finalValue: true,
		onChange: onExpandedChange
	});
	const { resolvedClassNames, resolvedStyles } = (0, _mantine_core.useResolvedStylesApi)({
		classNames,
		styles,
		props
	});
	(0, react.useEffect)(() => {
		if (value >= code.length) setValue(code.length - 1);
	}, [value, code]);
	if (code.length <= 0) return null;
	const currentCode = code[value] || {
		code: "",
		language: "tsx",
		fileName: ""
	};
	const files = code.map((node, index) => /* @__PURE__ */ (0, react.createElement)(_mantine_core.UnstyledButton, {
		...getStyles("file"),
		key: node.fileName,
		mod: { active: index === value },
		onClick: () => setValue(index),
		"data-color-scheme": codeColorScheme
	}, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FileIcon.FileIcon, {
		fileIcon: node.icon,
		getFileIcon,
		fileName: node.fileName,
		...getStyles("fileIcon")
	}, "file-icon"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: node.fileName }, "file-name")));
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Box, {
		...getStyles("root"),
		...others,
		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.ScrollArea, {
			type: "never",
			dir: "ltr",
			offsetScrollbars: false,
			...getStyles("filesScrollarea"),
			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
				...getStyles("files"),
				children: files
			})
		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CodeHighlight.CodeHighlight, {
			code: currentCode.code,
			language: currentCode.language,
			expanded: _expanded,
			onExpandedChange: setExpanded,
			withCopyButton,
			withExpandButton,
			withBorder,
			radius,
			maxCollapsedHeight,
			copiedLabel,
			copyLabel,
			expandCodeLabel,
			collapseCodeLabel,
			background,
			controls,
			codeColorScheme,
			withLineNumbers,
			__withOffset: true,
			__staticSelector: "CodeHighlightTabs",
			classNames: resolvedClassNames,
			styles: resolvedStyles,
			attributes
		})]
	});
});
CodeHighlightTabs.displayName = "@mantine/code-highlight/CodeHighlightTabs";
CodeHighlightTabs.classes = require_CodeHighlight_module.default;
//#endregion
exports.CodeHighlightTabs = CodeHighlightTabs;

//# sourceMappingURL=CodeHighlightTabs.cjs.map