Repository: facebook/react
File: compiler/apps/playground/components/TabbedWindow.tsx (TypeScript)

Code before:
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
import React, {
  startTransition,
  useId,
  unstable_ViewTransition as ViewTransition,
  unstable_addTransitionType as addTransitionType,
} from 'react';
import clsx from 'clsx';

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('tab');
      onTabChange(tab);
    });
  };

  return (
    <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}
                  share={{tab: 'tab-highlight'}}
                  update={{default: 'none'}}>
                  <div className="absolute inset-0 bg-highlight rounded-full" />
                </ViewTransition>
              )}

Review comment (suggestion):
Similar to previous PR this type could be a constant in a separate module. Could also be better named, something like `'toggle-tab'` to describe the action itself

Code after:
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
import React, {
  startTransition,
  useId,
  unstable_ViewTransition as ViewTransition,
  unstable_addTransitionType as addTransitionType,
} from 'react';
import clsx from 'clsx';
import {TOGGLE_TAB_TRANSITION} from '../lib/transitionTypes';

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}
                    share={{
                      [TOGGLE_TAB_TRANSITION]: 'tab-highlight',
                      default: 'none',