@mantine/code-highlight/lib/CodeHighlightTabs/CodeHighlightTabs.d.ts

Code highlight with Mantine theme

import { BoxProps, ElementProps, Factory, StylesApiProps } from '@mantine/core';
import { CodeHighlightSettings, CodeHighlightStylesNames } from '../CodeHighlight/CodeHighlight';
/** Available shiki languages for default Mantine shiki instance.
 *  Should be used only with *.mantine.dev projects */
export type CodeHighlightDefaultLanguage = 'tsx' | 'scss' | 'html' | 'bash' | 'json';
export interface CodeHighlightTabsCode {
    language?: CodeHighlightDefaultLanguage | (string & {});
    code: string;
    fileName?: string;
    icon?: React.ReactNode;
}
export type CodeHighlightTabsStylesNames = 'root' | 'files' | 'file' | 'fileIcon' | 'filesScrollarea' | CodeHighlightStylesNames;
export 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;
}
export type CodeHighlightTabsFactory = Factory<{
    props: CodeHighlightTabsProps;
    ref: HTMLDivElement;
    stylesNames: CodeHighlightTabsStylesNames;
}>;
export declare const CodeHighlightTabs: import("@mantine/core").MantineComponent<{
    props: CodeHighlightTabsProps;
    ref: HTMLDivElement;
    stylesNames: CodeHighlightTabsStylesNames;
}>;