Add transition type const

Author: EugeneChoi4

compiler/apps/playground/components/TabbedWindow.tsx

@@ -11,6 +11,7 @@ import React, {
   unstable_addTransitionType as addTransitionType,
 } from 'react';
 import clsx from 'clsx';
+import {TOGGLE_TAB_TRANSITION} from '../lib/transitionTypes';
 
 export default function TabbedWindow({
   tabs,
@@ -26,45 +27,51 @@ export default function TabbedWindow({
 
   const handleTabChange = (tab: string): void => {
     startTransition(() => {
-      addTransitionType('tab');
+      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 && (
+    <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',
+                    }}
+                    update={{default: 'none'}}>
+                    <div className="absolute inset-0 bg-highlight rounded-full" />
+                  </ViewTransition>
+                )}
                 <ViewTransition
-                  name={transitionName}
-                  share={{tab: 'tab-highlight'}}
-                  update={{default: 'none'}}>
-                  <div className="absolute inset-0 bg-highlight rounded-full" />
+                  update={{
+                    [TOGGLE_TAB_TRANSITION]: 'tab-text',
+                    default: 'none',
+                  }}>
+                  <span className="relative z-1">{tab}</span>
                 </ViewTransition>
-              )}
-              <ViewTransition update={{tab: '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)}
+              </button>
+            );
+          })}
+        </div>
+        <div className="flex-1 overflow-hidden w-full h-full">
+          {tabs.get(activeTab)}
+        </div>
       </div>
     </div>
-    </div>
   );
 }

compiler/apps/playground/lib/transitionTypes.ts

@@ -6,3 +6,4 @@
  */
 
 export const CONFIG_PANEL_TRANSITION = 'config-panel';
+export const TOGGLE_TAB_TRANSITION = 'toggle-tab';