+ {SDK_LANGUAGES.map(({ key, icon: Icon, label }) => (
+ }>
+ {contentMap[key] || (
+
+ {label} example coming soon.
+
+ )}
+
+ ))}
+
+ );
+};
+
+SdkTabs.Go = ({ children }) => children;
+SdkTabs.Go.displayName = 'go';
+
+SdkTabs.Java = ({ children }) => children;
+SdkTabs.Java.displayName = 'java';
+
+SdkTabs.Python = ({ children }) => children;
+SdkTabs.Python.displayName = 'py';
+
+SdkTabs.TypeScript = ({ children }) => children;
+SdkTabs.TypeScript.displayName = 'ts';
+
+SdkTabs.PHP = ({ children }) => children;
+SdkTabs.PHP.displayName = 'php';
+
+SdkTabs.DotNet = ({ children }) => children;
+SdkTabs.DotNet.displayName = 'dotnet';
+
+SdkTabs.Ruby = ({ children }) => children;
+SdkTabs.Ruby.displayName = 'rb';
+
+export default SdkTabs;
\ No newline at end of file
diff --git a/src/components/index.js b/src/components/index.js
index b54c92958b..9d33286540 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -2,7 +2,8 @@
export { default as RetrySimulator } from "./elements/RetrySimulator";
export { Intro } from "./elements/Intro";
export { SdkLogos } from "./elements/SdkLogos";
-export { default as PhotoCarousel } from './elements/PhotoCarousel';
+export { default as PhotoCarousel } from "./elements/PhotoCarousel";
+export { default as SdkTabs } from './elements/SdkTabs';
// Formatting components
export { default as DocsTable, NewDocsCell } from "./formatting/DocsTable";
@@ -16,3 +17,6 @@ export { default as DiscoverableDisclosure } from "./info/DiscoverableDisclosure
export { default as ToolTipTerm } from "./info/ToolTipTerm";
export { RelatedReadContainer, RelatedReadItem } from "./info/RelatedRead";
export { default as RelatedReadList } from "./info/RelatedReadList";
+
+// Extra export
+export { default } from './elements/SdkTabs';
\ No newline at end of file
diff --git a/src/constants/languageTabs.js b/src/constants/languageTabs.js
new file mode 100644
index 0000000000..55c0b814fd
--- /dev/null
+++ b/src/constants/languageTabs.js
@@ -0,0 +1,18 @@
+import { FaJs, FaPython, FaJava } from 'react-icons/fa';
+import { SiGo, SiDotnet, SiTypescript, SiRuby, SiPhp } from 'react-icons/si';
+export const LANGUAGE_TAB_GROUP = 'language';
+
+export const LANGUAGE_ICONS = {
+ go: SiGo,
+ java: FaJava,
+ py: FaPython,
+ ts: SiTypescript,
+ php: SiPhp,
+ dotnet: SiDotnet,
+ rb: SiRuby,
+};
+
+export const getLanguageLabel = (lang) => {
+ const Icon = LANGUAGE_ICONS[lang];
+ return Icon ?