feat(tabs): enhance tab structure by replacing secondaryLabel with extension

Author: naveenkarmegam

packages/ui-components/src/Common/CodeTabs/index.stories.tsx

@@ -67,8 +67,8 @@ export default {
     children: <TabsContent />,
     defaultValue: 'mjs',
     tabs: [
-      { key: 'mjs', label: 'Example', secondaryLabel: 'MJS' },
-      { key: 'cjs', label: 'Example', secondaryLabel: 'CJS' },
+      { key: 'mjs', label: 'Example', extension: 'MJS' },
+      { key: 'cjs', label: 'Example', extension: 'CJS' },
     ],
   },
 } as Meta;

packages/ui-components/src/Common/Tabs/index.module.css

@@ -22,16 +22,21 @@
         text-neutral-800
         dark:text-neutral-200;
 
-      .tabSecondaryLabel {
+      .tabExtension {
         @apply ml-1
-          rounded
+          rounded-xs
           border
-          border-neutral-500
-          px-1
-          py-0.5
-          text-xs
+          border-neutral-200
+          p-0.5
+          text-[10px]
+          font-normal
+          text-neutral-800
+          dark:text-neutral-200;
+      }
+
+      .tabSecondaryLabel {
+        @apply pl-1
           text-neutral-500
-          dark:border-neutral-800
           dark:text-neutral-800;
       }
 
@@ -41,10 +46,15 @@
           dark:border-b-green-400
           dark:text-green-400;
 
+        .tabExtension {
+          @apply border-green-600
+            text-green-600
+            dark:border-green-400
+            dark:text-green-400;
+        }
+
         .tabSecondaryLabel {
-          @apply border-green-800
-            text-green-800
-            dark:border-green-600
+          @apply text-green-800
             dark:text-green-600;
         }
       }

packages/ui-components/src/Common/Tabs/index.tsx

@@ -10,6 +10,7 @@ type Tab = {
   label: string;
   secondaryLabel?: string;
   value?: string;
+  extension?: string;
 };
 
 type TabsProps = TabsPrimitive.TabsProps & {
@@ -37,6 +38,9 @@ const Tabs: FC<PropsWithChildren<TabsProps>> = ({
           className={classNames(styles.tabsTrigger, triggerClassName)}
         >
           {tab.label}
+          {tab.extension ? (
+            <span className={styles.tabExtension}>{tab.extension}</span>
+          ) : null}
           {tab.secondaryLabel ? (
             <span className={styles.tabSecondaryLabel}>
               {tab.secondaryLabel}