Tabbed Code Interface

/**
 * Component for displaying multiple code files in a tabbed interface
 * @param props - Configuration options for the tabbed code interface
 * @returns Rendered tabbed code component
 */
function CodeHighlightTabs(props: CodeHighlightTabsProps): JSX.Element;

interface CodeHighlightTabsProps extends 
  CodeHighlightSettings,
  BoxProps,
  StylesApiProps<CodeHighlightTabsFactory>,
  ElementProps<'div'> {
  /** Code to highlight with meta data (file name and icon) */
  code: CodeHighlightTabsCode[];
  /** Function that returns icon based on file name */
  getFileIcon?: (fileName: string) => React.ReactNode;
  /** Default active tab index */
  defaultActiveTab?: number;
  /** Index of controlled active tab state */
  activeTab?: number;
  /** Called when tab changes */
  onTabChange?: (tab: number) => void;
}

interface CodeHighlightTabsCode {
  /** Language for syntax highlighting */
  language?: CodeHighlightDefaultLanguage | (string & {});
  /** Code content to display */
  code: string;
  /** File name displayed in the tab */
  fileName?: string;
  /** Custom icon for the file tab */
  icon?: React.ReactNode;
}

/** Available shiki languages for default Mantine shiki instance */
type CodeHighlightDefaultLanguage = 'tsx' | 'scss' | 'html' | 'bash' | 'json';

import { CodeHighlightTabs } from "@mantine/code-highlight";
import { IconBrandReact, IconFileTypeJs } from "@tabler/icons-react";

// Basic multi-file example
function BasicTabs() {
  const code = [
    {
      fileName: 'App.tsx',
      code: `import React from 'react';

function App() {
  return <div>Hello World</div>;
}

export default App;`,
      language: 'tsx',
    },
    {
      fileName: 'index.js',
      code: `import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));`,
      language: 'javascript',
    },
    {
      fileName: 'styles.css',
      code: `.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}`,
      language: 'css',
    },
  ];

  return <CodeHighlightTabs code={code} />;
}

// With custom icons and controlled state
function AdvancedTabs() {
  const [activeTab, setActiveTab] = useState(0);
  
  const code = [
    {
      fileName: 'Component.tsx',
      code: `export function MyComponent() {
  return <div>Component</div>;
}`,
      language: 'tsx',
      icon: <IconBrandReact size={16} />,
    },
    {
      fileName: 'utils.js',
      code: `export function helper() {
  return 'helper';
}`,
      language: 'javascript',
      icon: <IconFileTypeJs size={16} />,
    },
  ];

  return (
    <CodeHighlightTabs
      code={code}
      activeTab={activeTab}
      onTabChange={setActiveTab}
      withCopyButton
      withExpandButton
    />
  );
}

// With file icon function
function WithIconFunction() {
  const getFileIcon = (fileName: string) => {
    if (fileName.endsWith('.tsx') || fileName.endsWith('.jsx')) {
      return <IconBrandReact size={16} />;
    }
    if (fileName.endsWith('.js')) {
      return <IconFileTypeJs size={16} />;
    }
    return null;
  };

  const code = [
    { fileName: 'App.tsx', code: 'const App = () => <div>App</div>;', language: 'tsx' },
    { fileName: 'utils.js', code: 'export const helper = () => {};', language: 'javascript' },
  ];

  return (
    <CodeHighlightTabs
      code={code}
      getFileIcon={getFileIcon}
      defaultActiveTab={0}
    />
  );
}

// Package.json + source example
function PackageExample() {
  const projectFiles = [
    {
      fileName: 'package.json',
      code: `{
  "name": "my-app",
  "version": "1.0.0",
  "dependencies": {
    "react": "^18.0.0",
    "@mantine/core": "^7.0.0"
  }
}`,
      language: 'json',
    },
    {
      fileName: 'src/main.tsx',
      code: `import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const root = createRoot(document.getElementById('root')!);
root.render(<App />);`,
      language: 'tsx',
    },
    {
      fileName: 'vite.config.ts',
      code: `import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
});`,
      language: 'typescript',
    },
  ];

  return (
    <CodeHighlightTabs
      code={projectFiles}
      withCopyButton
      maxCollapsedHeight={300}
    />
  );
}

type CodeHighlightTabsFactory = Factory<{
  props: CodeHighlightTabsProps;
  ref: HTMLDivElement;
  stylesNames: CodeHighlightTabsStylesNames;
}>;

type CodeHighlightTabsStylesNames =
  | 'root'
  | 'files'
  | 'file'
  | 'fileIcon'
  | 'filesScrollarea'
  | CodeHighlightStylesNames;