EDU-4357: Prototypes language tabs

- Adds streamlined React component tooling to simplify language-specific
  content
- Uses opt-in content. Adds placeholders for languages whose content
  hasn't yet been created
- Uses global shared group so tab selection is preserved throughout page
  and site
- Can add that content in any order, although canonical order is preferred

For example:

    import { LANGUAGE_TAB_GROUP, getLanguageLabel } from '@site/src/constants/languageTabs';
    import SdkTabs from '@site/src/components';

    <SdkTabs>
    <SdkTabs.Python>
    ```python
    TEMPORAL_ADDRESS = os.environ.get("TEMPORAL_ADDRESS", "localhost:7233")
    TEMPORAL_NAMESPACE = os.environ.get("TEMPORAL_NAMESPACE", "default")
    TEMPORAL_TASK_QUEUE = os.environ.get("TEMPORAL_TASK_QUEUE", "test-task-queue")
    TEMPORAL_API_KEY = os.environ.get("TEMPORAL_API_KEY", "")
    ```
    </SdkTabs.Python>
    </SdkTabs>
```

Author: Erica Sadun

docs/production-deployment/cloud/get-started/how-to-guides/deploy-workers-to-aws-eks.mdx

@@ -3,28 +3,28 @@ id: deploy-workers-to-aws-eks
 title: Quick Launch - Deploying your Workers on Amazon EKS
 sidebar_label: Deploy Workers to Amazon EKS
 slug: /cloud/deploy-workers-to-aws-eks
-description: Deploy a Temporal Worker on Amazon Elastic Kubernetes Service (EKS) using the Python SDK.
+description: Deploy a Temporal Worker on Amazon Elastic Kubernetes Service (EKS)
 keywords:
   - Temporal Cloud
   - Kubernetes
   - EKS
   - AWS
-  - Python SDK
   - Worker
 tags:
   - Deploy
-  - Python SDK
   - Kubernetes
   - Temporal Cloud
 ---
+import { LANGUAGE_TAB_GROUP, getLanguageLabel } from '@site/src/constants/languageTabs';
+import SdkTabs from '@site/src/components';
 
 Temporal Workers run in [Kubernetes](https://kubernetes.io)-based deployments deliver scale, resilience, and flexible resource management.
 Amazon EKS (Elastic Kubernetes Service) offers one of the most popular choices for running Temporal Workers.
 It integrates smoothly with AWS services and supports auto-scaling and fault tolerance—key features for many Temporal users.
 
 Follow this guide to deploy and manage your Temporal Workers in EKS.
 This guide walks you through writing Temporal Worker code, containerizing and publishing the Worker to the Amazon Elastic Container Registry (ECR), and deploying the worker to Amazon EKS.
-The example on this page uses Temporal’s Python SDK and Temporal Cloud.
+The example on this page uses Temporal Cloud.
 
 :::tip
 
@@ -55,15 +55,21 @@ In Temporal applications, business logic lives within your main Workflow code.
 Your Worker code runs separately, and is responsible for executing your Workflows and Activities.
 Make sure to configure your Worker to use environment variables so you can dynamically route your Worker to different Temporal Instances, Namespaces, and Task Queues on the fly:
 
+<SdkTabs>
+<SdkTabs.Python>
 ```python
 TEMPORAL_ADDRESS = os.environ.get("TEMPORAL_ADDRESS", "localhost:7233")
 TEMPORAL_NAMESPACE = os.environ.get("TEMPORAL_NAMESPACE", "default")
 TEMPORAL_TASK_QUEUE = os.environ.get("TEMPORAL_TASK_QUEUE", "test-task-queue")
 TEMPORAL_API_KEY = os.environ.get("TEMPORAL_API_KEY", "")
 ```
+</SdkTabs.Python>
+</SdkTabs>
 
 After configuration, instantiate your Temporal client:
 
+<SdkTabs>
+<SdkTabs.Python>
 ```
 client = await Client.connect(
     TEMPORAL_ADDRESS,
@@ -73,9 +79,13 @@ client = await Client.connect(
     tls=True
 )
 ```
+</SdkTabs.Python>
+</SdkTabs>
 
 Here is a complete Python boilerplate that showcases how to instantiate a Client and pass it to the Worker before starting the Worker execution:
 
+<SdkTabs>
+<SdkTabs.Python>
 ```python
 import asyncio
 import os
@@ -119,6 +129,8 @@ print("Initializing worker...")
 if __name__ == "__main__":
   asyncio.run(main())
 ```
+</SdkTabs.Python>
+</SdkTabs>
 
 ## Containerize the Worker for Kubernetes
 

package.json

@@ -51,6 +51,7 @@
     "path": "^0.12.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.5.0",
     "react-markdown": "^10.1.0",
     "react-player": "^2.6.0",
     "rehype-katex": "7",

src/components/elements/SdkTabs/Languages.js

@@ -0,0 +1,21 @@
+export const Go = ({ children }) => children;
+Go.displayName = 'go';
+
+export const Java = ({ children }) => children;
+Java.displayName = 'java';
+
+export const Python = ({ children }) => children;
+Python.displayName = 'py';
+
+export const TypeScript = ({ children }) => children;
+TypeScript.displayName = 'ts';
+
+export const PHP = ({ children }) => children;
+PHP.displayName = 'php';
+
+export const DotNet = ({ children }) => children;
+DotNet.displayName = 'dotnet';
+
+export const Ruby = ({ children }) => children;
+Ruby.displayName = 'rb';
+

src/components/elements/SdkTabs/index.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import { SDK_LANGUAGES, LANGUAGE_TAB_GROUP } from '@site/src/constants/sdkLanguages';
+
+// Named components for language-specific slots
+export const Go = ({ children }) => children;
+Go.displayName = 'go';
+
+export const Java = ({ children }) => children;
+Java.displayName = 'java';
+
+export const Python = ({ children }) => children;
+Python.displayName = 'py';
+
+export const TypeScript = ({ children }) => children;
+TypeScript.displayName = 'ts';
+
+export const PHP = ({ children }) => children;
+PHP.displayName = 'php';
+
+export const DotNet = ({ children }) => children;
+DotNet.displayName = 'dotnet';
+
+export const Ruby = ({ children }) => children;
+Ruby.displayName = 'rb';
+
+// Main wrapper
+const SdkTabs = ({ children }) => {
+  const contentMap = {};
+
+  React.Children.forEach(children, (child) => {
+    if (child?.type?.displayName) {
+      const langKey = child.type.displayName.toLowerCase();
+      contentMap[langKey] = child;
+    }
+  });
+
+  return (
+    <Tabs groupId={LANGUAGE_TAB_GROUP}>
+      {SDK_LANGUAGES.map(({ key, icon: Icon, label }) => (
+        <TabItem key={key} value={key} label={<Icon title={label} />}>
+          {contentMap[key] || (
+            <div style={{ backgroundColor: '#ffffcc', padding: '1rem', borderRadius: '6px' }}>
+              <strong>{label}</strong> example coming soon.
+            </div>
+          )}
+        </TabItem>
+      ))}
+    </Tabs>
+  );
+};
+
+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;

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';

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 ? <Icon title={lang} /> : lang;
+};

src/constants/sdkLanguages.js

@@ -0,0 +1,14 @@
+import { FaPython, FaJava } from 'react-icons/fa';
+import { SiGo, SiTypescript, SiPhp, SiDotnet, SiRuby } from 'react-icons/si';
+
+export const LANGUAGE_TAB_GROUP = 'language';
+
+export const SDK_LANGUAGES = [
+  { key: 'go', label: 'Go', icon: SiGo },
+  { key: 'java', label: 'Java', icon: FaJava },
+  { key: 'py', label: 'Python', icon: FaPython },
+  { key: 'ts', label: 'TypeScript', icon: SiTypescript },
+  { key: 'php', label: 'PHP', icon: SiPhp },
+  { key: 'dotnet', label: '.NET', icon: SiDotnet },
+  { key: 'rb', label: 'Ruby', icon: SiRuby },
+];