fix: error example dropdown issues (#1815)

fern-api · Nov 15, 2024 · 873c18e · 873c18e
1 parent 4ae6f5f
commit 873c18e
Show file tree

Hide file tree

Showing 15 changed files with 731 additions and 670 deletions.
diff --git a/packages/ui/app/src/api-reference/endpoints/CodeExampleClientDropdown.tsx b/packages/ui/app/src/api-reference/endpoints/CodeExampleClientDropdown.tsx
@@ -1,51 +1,41 @@
 import { FernButton, FernDropdown, RemoteFontAwesomeIcon } from "@fern-ui/components";
 import { NavArrowDown } from "iconoir-react";
-import type { CodeExample, CodeExampleGroup } from "../examples/code-example";
+import { getIconForClient, getLanguageDisplayName } from "../examples/code-example";
 
 export declare namespace CodeExampleClientDropdown {
     export interface Props {
-        clients: CodeExampleGroup[];
-        selectedClient: CodeExample;
-        onClickClient: (example: CodeExample) => void;
+        languages: string[];
+        value: string;
+        onValueChange: (language: string) => void;
     }
 }
 
 export const CodeExampleClientDropdown: React.FC<CodeExampleClientDropdown.Props> = ({
-    clients,
-    selectedClient,
-    onClickClient,
+    languages,
+    value,
+    onValueChange,
 }) => {
-    const selectedClientGroup = clients.find((client) => client.language === selectedClient.language);
+    const options = languages.map((language) => ({
+        type: "value" as const,
+        label: getLanguageDisplayName(language),
+        value: language,
+        className: "group/option",
+        icon: (
+            <RemoteFontAwesomeIcon
+                className="size-icon-sm bg-intent-default group-data-[highlighted]/option:bg-accent-contrast"
+                icon={getIconForClient(language)}
+            />
+        ),
+    }));
+
+    const selectedOption = options.find((option) => option.value === value);
     return (
         <div className="flex justify-end">
-            <FernDropdown
-                value={selectedClient.language}
-                options={clients.map((client) => ({
-                    type: "value",
-                    label: client.languageDisplayName,
-                    value: client.language,
-                    className: "group/option",
-                    icon: (
-                        <RemoteFontAwesomeIcon
-                            className="size-icon-sm bg-intent-default group-data-[highlighted]/option:bg-accent-contrast"
-                            icon={client.icon}
-                        />
-                    ),
-                }))}
-                onValueChange={(value) => {
-                    const client = clients.find((client) => client.language === value);
-                    if (client?.examples[0] != null) {
-                        onClickClient(
-                            client.examples.find((example) => example.exampleIndex === selectedClient.exampleIndex) ??
-                                client.examples[0],
-                        );
-                    }
-                }}
-            >
+            <FernDropdown value={value} options={options} onValueChange={onValueChange}>
                 <FernButton
-                    icon={<RemoteFontAwesomeIcon className="bg-accent size-4" icon={selectedClientGroup?.icon} />}
+                    icon={<RemoteFontAwesomeIcon className="bg-accent size-4" icon={getIconForClient(value)} />}
                     rightIcon={<NavArrowDown className="!size-icon" />}
-                    text={selectedClientGroup?.languageDisplayName ?? selectedClient.language}
+                    text={selectedOption?.label ?? getLanguageDisplayName(value)}
                     size="small"
                     variant="outlined"
                     mono={true}