⬅️ Back to Table of Contents

📄 EditorTabs.tsx

📊 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, 'button')}
onClick={(): void => showModal?.(active)}
>
Visual Editor
)}
div	element	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] ? (
{additionalTabsInfo[item.label] > 99
? '99+'
: additionalTabsInfo[item.label]}
) : null}
))}
button	element	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] ? (
{additionalTabsInfo[item.label] > 99
? '99+'
: additionalTabsInfo[item.label]}
) : null}
div	element	className={styles.tabErrors}	{additionalTabsInfo[item.label] > 99
? '99+'
: additionalTabsInfo[item.label]}
button	element	className={clsx(styles.tabStyle, 'button')}, onClick={(): void => showModal?.(active)}	text: "Visual Editor",
EditIcon	component	height={12}, width={12}	none

---

Functions

`EditorTabs({

active, additionalTabsInfo, change, showModal, showVisualEditor, tabs, }: EditorTabsProps): React.JSX.Element`

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>
  );
}

• Parameters:
• { active, additionalTabsInfo, change, showModal, showVisualEditor, tabs, }: EditorTabsProps<T>
• Return Type: React.JSX.Element
• Calls:
• tabs.map
• String
• clsx (from clsx)
• tabsWithLabels.map
• change
• showModal

---

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	✗
additionalTabsInfo	Record<string, number>	✓
change	(name: T) => void	✗
showModal	(name: T) => void	✓
showVisualEditor	boolean	✓
tabs	(T | { label: string; value: T })[]	✗

---