TabbedWindow() — react Function Reference

Architecture documentation for the TabbedWindow() function in TabbedWindow.tsx from the react codebase.

Function tsx PlaygroundApp Stores

Entity Profile

PlaygroundApp→ Stores→ TabbedWindow() — react Function Reference

Dependency Diagram

graph TD
  19b4240e_c06f_0965_ec05_d8ddd42c98e3["TabbedWindow()"]
  b03258e0_be86_ee60_1d40_970f96914cd3["TabbedWindow.tsx"]
  19b4240e_c06f_0965_ec05_d8ddd42c98e3 -->|defined in| b03258e0_be86_ee60_1d40_970f96914cd3
  style 19b4240e_c06f_0965_ec05_d8ddd42c98e3 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

compiler/apps/playground/components/TabbedWindow.tsx lines 16–81

export default function TabbedWindow({
  tabs,
  activeTab,
  onTabChange,
}: {
  tabs: Map<string, React.ReactNode>;
  activeTab: string;
  onTabChange: (tab: string) => void;
}): React.ReactElement {
  const id = useId();
  const transitionName = `tab-highlight-${id}`;

  const handleTabChange = (tab: string): void => {
    startTransition(() => {
      addTransitionType(TOGGLE_TAB_TRANSITION);
      onTabChange(tab);
    });
  };

  return (
    <div className="flex-1 min-w-[550px] sm:min-w-0">
      <div className="flex flex-col h-full max-w-full">
        <div className="flex p-2 flex-shrink-0">
          {Array.from(tabs.keys()).map(tab => {
            const isActive = activeTab === tab;
            return (
              <button
                key={tab}
                onClick={() => handleTabChange(tab)}
                className={clsx(
                  'transition-transform py-1.5 px-1.5 xs:px-3 sm:px-4 rounded-full text-sm relative',
                  isActive ? 'text-link' : 'hover:bg-primary/5',
                )}>
                {isActive && (
                  <ViewTransition
                    name={transitionName}
                    enter={{default: 'none'}}
                    exit={{default: 'none'}}
                    share={{
                      [TOGGLE_TAB_TRANSITION]: 'tab-highlight',
                      default: 'none',
                    }}
                    update={{default: 'none'}}>
                    <div className="absolute inset-0 bg-highlight rounded-full" />
                  </ViewTransition>
                )}
                <ViewTransition
                  enter={{default: 'none'}}
                  exit={{default: 'none'}}
                  update={{
                    [TOGGLE_TAB_TRANSITION]: 'tab-text',
                    default: 'none',
                  }}>
                  <span className="relative z-1">{tab}</span>
                </ViewTransition>
              </button>
            );
          })}
        </div>
        <div className="flex-1 overflow-hidden w-full h-full">
          {tabs.get(activeTab)}
        </div>
      </div>
    </div>
  );
}