feat: Improve CodeTabs tab naming (nodejs#8552)

* feat(style): update code tab badge styling (nodejs#8549)

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

* feat(tabs): update tab extension rendering and style adjustments

* feat(tabs): separate tab extension configuration into a new story

* feat(tabs): update tab labels to reflect correct file extensions

Author: naveenkarmegam

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

@@ -61,6 +61,15 @@ const TabsContent: FC = () => (
 
 export const Default: Story = {};
 
+export const WithExtension: Story = {
+  args: {
+    tabs: [
+      { key: 'mjs', label: 'Example', extension: 'MJS' },
+      { key: 'cjs', label: 'Example', extension: 'CJS' },
+    ],
+  },
+};
+
 export default {
   component: CodeTabs,
   args: {

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

@@ -22,6 +22,18 @@
         text-neutral-800
         dark:text-neutral-200;
 
+      .tabExtension {
+        @apply ml-1
+          rounded-xs
+          border
+          border-neutral-200
+          px-1
+          py-0.5
+          text-xs
+          font-normal
+          text-neutral-200;
+      }
+
       .tabSecondaryLabel {
         @apply pl-1
           text-neutral-500
@@ -34,6 +46,11 @@
           dark:border-b-green-400
           dark:text-green-400;
 
+        .tabExtension {
+          @apply border-green-400
+            text-green-400;
+        }
+
         .tabSecondaryLabel {
           @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>
+          )}
           {tab.secondaryLabel ? (
             <span className={styles.tabSecondaryLabel}>
               {tab.secondaryLabel}