feat: add dorpdown for snippet language

src/app/components/CodeSnippet.module.css

@@ -13,7 +13,7 @@
   padding: 0.5rem 1rem;
   border-top-right-radius: 10px;
   border-top-left-radius: 10px;
-  font-size: 0.8rem;
+  font-size: 1rem;
 }
 
 .snippetContent>pre {
@@ -71,6 +71,7 @@
   border-radius: 0.25rem;
   width: 100px;
   text-align: center;
+  font-size: 0.8rem;
 }
 
 .tooltip::before {
@@ -84,4 +85,40 @@
 
 .tooltipHidden {
   display: none;
+}
+
+.controlsContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+}
+
+.dropdownSelect {
+  background-color: #194488;
+  border: none;
+  color: white;
+  border-radius: 5px;
+  cursor: pointer;
+  appearance: none;
+  padding-left: 2rem;
+  text-align: right;
+  font-size: 1rem;
+}
+
+.dropdownSelect:focus-visible {
+  outline: none;
+}
+
+.selectItem {
+  background-color: #194488;
+  color: white;
+  cursor: pointer;
+}
+
+.spacer {
+  height: 12px;
+  border-left: 1px solid #e3e8ee;
+  opacity: .2;
+  margin-right: -1px;
 }

src/app/components/CodeSnippet.tsx

@@ -1,9 +1,9 @@
 'use client';
 
-import {
+import React, {
   Children,
   MouseEvent,
-  ReactElement,
+  ReactNode,
   useState,
 } from 'react';
 import styles from './CodeSnippet.module.css';
@@ -23,7 +23,7 @@ function CodeSnippetCopyButton() {
 
     const target = e.currentTarget;
     const code =
-      target.parentElement?.parentElement?.parentElement?.querySelector(
+      target.parentElement?.parentElement?.parentElement?.parentElement?.querySelector(
         'pre'
       )?.innerText ?? '';
 
@@ -66,37 +66,100 @@ function CodeSnippetCopyButton() {
   );
 }
 
-function SnippetLanguageDropdown() {}
+function SnippetLanguageDropdown({
+  selectedLanguage,
+  snippetLanguages,
+  handleSelectChange,
+}: {
+  selectedLanguage: string;
+  snippetLanguages: string[];
+  handleSelectChange: (
+    e: React.ChangeEvent<HTMLSelectElement>
+  ) => void;
+}) {
+  return (
+    <div className={styles.dropdownContainer}>
+      <div className={styles.dropdown}>
+        <select
+          title="Select a language"
+          className={styles.dropdownSelect}
+          value={selectedLanguage}
+          onChange={handleSelectChange}
+        >
+          {snippetLanguages.map(language => {
+            return (
+              <option
+                key={language}
+                value={language}
+                className={styles.selectItem}
+              >
+                {language}
+              </option>
+            );
+          })}
+        </select>
+      </div>
+    </div>
+  );
+}
 
 export default function CodeSnippet({
   children,
   heading,
   defaultLanguage,
 }: {
-  children: ReactElement;
+  children: ReactNode;
   heading: string;
   defaultLanguage: string;
 }) {
   const [selectedLanguage, setSelectedLanguage] =
     useState<string>(defaultLanguage);
 
+  const handleSelectChange = (
+    e: React.ChangeEvent<HTMLSelectElement>
+  ) => {
+    setSelectedLanguage(e.target.value);
+  };
+
   const snippetLanguages = Children.toArray(children).map(
-    (child: any) => child.props.className.split('-')[1]
+    child => {
+      if (React.isValidElement(child)) {
+        const languageClassParts =
+          child.props.className.split('-');
+        if (languageClassParts.length == 2) {
+          const language = languageClassParts[1];
+          return language;
+        }
+      }
+    }
   );
 
   return (
     <div className={styles.snippetContainer}>
       <div className={styles.snippetHeader}>
         <div>{heading}</div>
-        <CodeSnippetCopyButton />
+        <div className={styles.controlsContainer}>
+          {snippetLanguages.length > 1 ? (
+            <>
+              <SnippetLanguageDropdown
+                selectedLanguage={selectedLanguage}
+                snippetLanguages={snippetLanguages}
+                handleSelectChange={handleSelectChange}
+              />
+              <div className={styles.spacer} />
+            </>
+          ) : null}
+          <CodeSnippetCopyButton />
+        </div>
       </div>
       <div className={styles.snippetContent}>
         <pre>
           {Children.toArray(children)
             .filter(
-              (child: any) =>
+              child =>
+                React.isValidElement(child) &&
                 child.props.className ===
-                `language-${defaultLanguage}`
+                  `language-${selectedLanguage}`
             )
             .map(child => {
               return child;

src/docs/version_002/resources/records/get_records_by_app/example.md

@@ -5,7 +5,7 @@ curl --location 'https://api.onspring.com/Records/appId/195' \
 --header 'X-ApiKey: 000000ffffff000000ffffff/00000000-ffff-0000-ffff-000000000000'
 ```
 
-```js
+```javascript
 var request = require('request');
 ```