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

Code highlight with Mantine theme

'use client';
import { jsx, jsxs } from 'react/jsx-runtime';
import { useEffect, createElement } from 'react';
import { factory, useProps, useStyles, useResolvedStylesApi, UnstyledButton, Box, ScrollArea } from '@mantine/core';
import { useUncontrolled } from '@mantine/hooks';
import { CodeHighlight } from '../CodeHighlight/CodeHighlight.mjs';
import { FileIcon } from './FileIcon.mjs';
import classes from '../CodeHighlight.module.css.mjs';

const defaultProps = {};
const CodeHighlightTabs = factory((_props, ref) => {
  const props = useProps("CodeHighlightTabs", defaultProps, _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,
    ...others
  } = props;
  const getStyles = useStyles({
    name: "CodeHighlightTabs",
    classes,
    props,
    className,
    style,
    classNames,
    styles,
    unstyled,
    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, { ref, ...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,
        __withOffset: true,
        __staticSelector: "CodeHighlightTabs",
        classNames: resolvedClassNames,
        styles: resolvedStyles
      }
    )
  ] });
});
CodeHighlightTabs.displayName = "@mantine/code-highlight/CodeHighlightTabs";
CodeHighlightTabs.classes = classes;

export { CodeHighlightTabs };
//# sourceMappingURL=CodeHighlightTabs.mjs.map