feat(docs): Add CodeTabs to all Gradle code snippets

Use codeToJsx with CodeTabs for proper syntax highlighting across all
Gradle configuration examples. This includes Kotlin/Groovy configuration
blocks and aab/apk build command examples.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: runningcode

src/components/gradleFeatureConfig.tsx

@@ -1,33 +1,39 @@
-import {Fragment} from 'react';
-
 import {CodeBlock} from './codeBlock';
+import {CodeTabs} from './codeTabs';
+import {codeToJsx} from './highlightCode';
 
 type Props = {
   feature: string;
 };
 
 export function GradleFeatureConfig({feature}: Props) {
   return (
-    <Fragment>
+    <CodeTabs>
       <CodeBlock language="kotlin" filename="build.gradle.kts">
         <pre>
-          <code className="language-kotlin">{`sentry {
+          {codeToJsx(
+            `sentry {
   ${feature} {
     enabled = providers.environmentVariable("GITHUB_ACTIONS").isPresent
   }
-}`}</code>
+}`,
+            'kotlin'
+          )}
         </pre>
       </CodeBlock>
 
       <CodeBlock language="groovy" filename="build.gradle">
         <pre>
-          <code className="language-groovy">{`sentry {
+          {codeToJsx(
+            `sentry {
   ${feature} {
     enabled = providers.environmentVariable("GITHUB_ACTIONS").present
   }
-}`}</code>
+}`,
+            'groovy'
+          )}
         </pre>
       </CodeBlock>
-    </Fragment>
+    </CodeTabs>
   );
 }

src/components/gradleUploadInstructions.tsx

@@ -1,7 +1,9 @@
 import {Fragment} from 'react';
 
 import {CodeBlock} from './codeBlock';
+import {CodeTabs} from './codeTabs';
 import {GradleFeatureConfig} from './gradleFeatureConfig';
+import {codeToJsx} from './highlightCode';
 import {OrgAuthTokenNote} from './orgAuthTokenNote';
 
 type Props = {
@@ -35,9 +37,7 @@ export function GradleUploadInstructions({feature}: Props) {
           </p>
           <OrgAuthTokenNote />
           <CodeBlock language="bash">
-            <pre>
-              <code className="language-bash">{`export SENTRY_AUTH_TOKEN=___ORG_AUTH_TOKEN___`}</code>
-            </pre>
+            <pre>{codeToJsx(`export SENTRY_AUTH_TOKEN=___ORG_AUTH_TOKEN___`, 'bash')}</pre>
           </CodeBlock>
         </li>
 
@@ -50,16 +50,14 @@ export function GradleUploadInstructions({feature}: Props) {
           <p>
             Invoke the following Gradle tasks to build your app and trigger the upload.
           </p>
-          <CodeBlock language="bash" filename="aab">
-            <pre>
-              <code className="language-bash">{`./gradlew bundleRelease`}</code>
-            </pre>
-          </CodeBlock>
-          <CodeBlock language="bash" filename="apk">
-            <pre>
-              <code className="language-bash">{`./gradlew assembleRelease`}</code>
-            </pre>
-          </CodeBlock>
+          <CodeTabs>
+            <CodeBlock language="aab" filename="aab">
+              <pre>{codeToJsx(`./gradlew bundleRelease`, 'bash')}</pre>
+            </CodeBlock>
+            <CodeBlock language="apk" filename="apk">
+              <pre>{codeToJsx(`./gradlew assembleRelease`, 'bash')}</pre>
+            </CodeBlock>
+          </CodeTabs>
         </li>
 
         <li>
@@ -85,9 +83,11 @@ export function GradleUploadInstructions({feature}: Props) {
 
       <p>Configure overrides in your Gradle build configuration:</p>
 
-      <CodeBlock language="kotlin" filename="build.gradle.kts">
-        <pre>
-          <code className="language-kotlin">{`sentry {
+      <CodeTabs>
+        <CodeBlock language="kotlin" filename="build.gradle.kts">
+          <pre>
+            {codeToJsx(
+              `sentry {
   ${feature} {
     enabled = providers.environmentVariable("GITHUB_ACTIONS").isPresent
   }
@@ -102,13 +102,16 @@ export function GradleUploadInstructions({feature}: Props) {
     baseRef.set("main")
     prNumber.set(42)
   }
-}`}</code>
-        </pre>
-      </CodeBlock>
-
-      <CodeBlock language="groovy" filename="build.gradle">
-        <pre>
-          <code className="language-groovy">{`sentry {
+}`,
+              'kotlin'
+            )}
+          </pre>
+        </CodeBlock>
+
+        <CodeBlock language="groovy" filename="build.gradle">
+          <pre>
+            {codeToJsx(
+              `sentry {
   ${feature} {
     enabled = providers.environmentVariable("GITHUB_ACTIONS").present
   }
@@ -123,9 +126,12 @@ export function GradleUploadInstructions({feature}: Props) {
     baseRef = 'main'
     prNumber = 42
   }
-}`}</code>
-        </pre>
-      </CodeBlock>
+}`,
+              'groovy'
+            )}
+          </pre>
+        </CodeBlock>
+      </CodeTabs>
 
       <p>
         Available <code>vcsInfo</code> properties:

src/components/highlightCode.tsx

@@ -3,16 +3,20 @@ import {jsx, jsxs} from 'react/jsx-runtime';
 import {toJsxRuntime} from 'hast-util-to-jsx-runtime';
 import {Nodes} from 'hastscript/lib/create-h';
 import bash from 'refractor/lang/bash.js';
+import groovy from 'refractor/lang/groovy.js';
 import json from 'refractor/lang/json.js';
+import kotlin from 'refractor/lang/kotlin.js';
 import typescript from 'refractor/lang/typescript.js';
 import {refractor} from 'refractor/lib/core.js';
 
 refractor.register(bash);
+refractor.register(groovy);
 refractor.register(json);
+refractor.register(kotlin);
 refractor.register(typescript);
 
 // If a new language should be supported, add it here and register it in refractor above
-export const SUPPORTED_LANGUAGES = ['bash', 'json', 'typescript'];
+export const SUPPORTED_LANGUAGES = ['bash', 'groovy', 'json', 'kotlin', 'typescript'];
 
 export function codeToJsx(code: string, lang = 'json') {
   if (!SUPPORTED_LANGUAGES.includes(lang)) {