⬅️ Back to Table of Contents

📄 EditorTabs

📊 Analysis Summary

Metric	Count
🔧 Functions	1
📦 Imports	4
💠 JSX Elements	6
📐 Interfaces	1

📚 Table of Contents

• Imports
• JSX Elements
• Functions
• Interfaces

🛠️ File Location:

📂 packages/website/src/components/layout/EditorTabs.tsx

📦 Imports

Name	Source
EditIcon	@site/src/icons/edit.svg
clsx	clsx
React	react
styles	./EditorTabs.module.css

---

JSX Elements

Component	Type	Props	Children
div	element	className={clsx(styles.tabContainer, 'padding--xs')}	, {showVisualEditor && ( <button className={clsx(styles.tabStyle, 'butto...
div	element	className="button-group", role="tablist"	{tabsWithLabels.map(item => ( <button aria-selected={active === item.value} c...
button	element	aria-selected={active === item.value}, className={clsx(styles.tabStyle, 'butt...	{item.label}, {additionalTabsInfo?.[item.label] ? ( <div className={styles.ta...
div	element	className={styles.tabErrors}	{additionalTabsInfo[item.label] > 99 ? '99+' : additionalTabsInfo[item.label]}
button	element	className={clsx(styles.tabStyle, 'button')}, onClick={(): void => showModal?....	text: "Visual Editor",
EditIcon	component	height={12}, width={12}	none

---

Functions

EditorTabs({ active, additionalTabsInfo, c…: EditorTabsProps<T>): React.JSX.Element

Parameters:

• { active, additionalTabsInfo, change, showModal, showVisualEditor, tabs, } EditorTabsProps<T>

Returns: React.JSX.Element

Calls:

• tabs.map
• String
• clsx (from clsx)
• tabsWithLabels.map
• change
• showModal

Code

function EditorTabs<T extends boolean | string>({
  active,
  additionalTabsInfo,
  change,
  showModal,
  showVisualEditor,
  tabs,
}: EditorTabsProps<T>): React.JSX.Element {
  const tabsWithLabels = tabs.map(tab =>
    typeof tab !== 'object' ? { label: String(tab), value: tab } : tab,
  );

  return (
    <div className={clsx(styles.tabContainer, 'padding--xs')}>
      <div className="button-group" role="tablist">
        {tabsWithLabels.map(item => (
          <button
            aria-selected={active === item.value}
            className={clsx(styles.tabStyle, 'button')}
            disabled={active === item.value}
            key={item.label}
            onClick={(): void => change(item.value)}
            role="tab"
          >
            {item.label}
            {additionalTabsInfo?.[item.label] ? (
              <div className={styles.tabErrors}>
                {additionalTabsInfo[item.label] > 99
                  ? '99+'
                  : additionalTabsInfo[item.label]}
              </div>
            ) : null}
          </button>
        ))}
      </div>
      {showVisualEditor && (
        <button
          className={clsx(styles.tabStyle, 'button')}
          onClick={(): void => showModal?.(active)}
        >
          Visual Editor
          <EditIcon height={12} width={12} />
        </button>
      )}
    </div>
  );
}

---

Interfaces

EditorTabsProps<T extends boolean | string>

Interface Code

export interface EditorTabsProps<T extends boolean | string> {
  readonly active: T;
  readonly additionalTabsInfo?: Record<string, number>;
  readonly change: (name: T) => void;
  readonly showModal?: (name: T) => void;
  readonly showVisualEditor?: boolean;
  readonly tabs: (T | { label: string; value: T })[];
}

Properties

Name	Type	Optional	Description
active	T	✗	not shown
additionalTabsInfo	Record<string, number>	✓	not shown
change	(name: T) => void	✗	not shown
showModal	(name: T) => void	✓	not shown
showVisualEditor	boolean	✓	not shown
tabs	(T \| { label: string; value: T })[]	✗	not shown

---

Generated by Syntax Scribe