@mantine/code-highlight/esm/CodeHighlightTabs/CodeHighlightTabs.mjs

Code highlight with Mantine theme

"use client";
import CodeHighlight_module_default from "../CodeHighlight.module.mjs";
import { CodeHighlight } from "../CodeHighlight/CodeHighlight.mjs";
import { FileIcon } from "./FileIcon.mjs";
import { Box, ScrollArea, UnstyledButton, factory, useProps, useResolvedStylesApi, useStyles } from "@mantine/core";
import { useUncontrolled } from "@mantine/hooks";
import { createElement, useEffect } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region packages/@mantine/code-highlight/src/CodeHighlightTabs/CodeHighlightTabs.tsx
const CodeHighlightTabs = factory((_props) => {
	const props = 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 = useStyles({
		name: "CodeHighlightTabs",
		classes: CodeHighlight_module_default,
		props,
		className,
		style,
		classNames,
		styles,
		unstyled,
		attributes,
		vars
	});
	const [value, setValue] = useUncontrolled({
		defaultValue: defaultActiveTab,
		value: activeTab,
		finalValue: 0,
		onChange: onTabChange
	});
	const [_expanded, setExpanded] = useUncontrolled({
		defaultValue: defaultExpanded,
		value: expanded,
		finalValue: true,
		onChange: onExpandedChange
	});
	const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
		classNames,
		styles,
		props
	});
	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__ */ createElement(UnstyledButton, {
		...getStyles("file"),
		key: node.fileName,
		mod: { active: index === value },
		onClick: () => setValue(index),
		"data-color-scheme": codeColorScheme
	}, /* @__PURE__ */ jsx(FileIcon, {
		fileIcon: node.icon,
		getFileIcon,
		fileName: node.fileName,
		...getStyles("fileIcon")
	}, "file-icon"), /* @__PURE__ */ jsx("span", { children: node.fileName }, "file-name")));
	return /* @__PURE__ */ jsxs(Box, {
		...getStyles("root"),
		...others,
		children: [/* @__PURE__ */ jsx(ScrollArea, {
			type: "never",
			dir: "ltr",
			offsetScrollbars: false,
			...getStyles("filesScrollarea"),
			children: /* @__PURE__ */ jsx("div", {
				...getStyles("files"),
				children: files
			})
		}), /* @__PURE__ */ jsx(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 = CodeHighlight_module_default;
//#endregion
export { CodeHighlightTabs };

//# sourceMappingURL=CodeHighlightTabs.mjs.map