codetabs

Author: avivkeller

.prettierignore

@@ -2,5 +2,8 @@
 src/generators/api-links/test/fixtures/
 *.snapshot
 
+# Templates
+src/generators/web/template.html
+
 # Output
 out/

package-lock.json

@@ -28,6 +28,8 @@
     "@reporters/github": "^1.7.2",
     "@types/mdast": "^4.0.4",
     "@types/node": "^22.15.3",
+    "@types/react": "^19.1.6",
+    "@types/react-dom": "^19.1.5",
     "eslint": "^9.27.0",
     "eslint-plugin-import-x": "^4.13.3",
     "eslint-plugin-jsdoc": "^50.6.17",

package.json

@@ -1 +1,38 @@
-export default () => <div>CodeTabs</div>;
+import CodeTabs from '@node-core/ui-components/Common/CodeTabs';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+
+const MDXCodeTabs = ({
+  languages: rawLanguages,
+  displayNames: rawDisplayNames,
+  children: codes,
+  defaultTab = '0',
+  ...props
+}) => {
+  const languages = rawLanguages.split('|');
+  const displayNames = rawDisplayNames?.split('|') ?? [];
+
+  const tabs = languages.map((language, index) => {
+    const displayName = displayNames[index];
+
+    return {
+      key: `${language}-${index}`,
+      label: displayName?.length ? displayName : language.toUpperCase(),
+    };
+  });
+
+  return (
+    <CodeTabs
+      tabs={tabs}
+      defaultValue={tabs[Number(defaultTab)].key}
+      {...props}
+    >
+      {languages.map((_, index) => (
+        <TabsPrimitive.Content key={tabs[index].key} value={tabs[index].key}>
+          {codes[index]}
+        </TabsPrimitive.Content>
+      ))}
+    </CodeTabs>
+  );
+};
+
+export default MDXCodeTabs;