fix: updated tryIt button structure (#2224)

Author: chdeskur

packages/fern-docs/ui/src/api-reference/endpoints/EndpointContentCodeSnippets.tsx

@@ -22,7 +22,7 @@ import {
   useRef,
 } from "react";
 import { FernErrorTag } from "../../components/FernErrorBoundary";
-import { PlaygroundButton } from "../../playground/PlaygroundButton";
+import { PlaygroundButtonTray } from "../../playground/PlaygroundButtonTray";
 import { usePlaygroundBaseUrl } from "../../playground/utils/select-environment";
 import { AudioExample } from "../examples/AudioExample";
 import {
@@ -216,13 +216,7 @@ const UnmemoizedEndpointContentCodeSnippets: React.FC<
             </>
           ) : undefined
         }
-        tryIt={
-          node != null ? (
-            <>
-              <PlaygroundButton state={node} />
-            </>
-          ) : undefined
-        }
+        tryIt={node != null ? <PlaygroundButtonTray state={node} /> : undefined}
         code={resolveEnvironmentUrlInCodeSnippet(
           endpoint,
           requestCodeSnippet,

packages/fern-docs/ui/src/api-reference/examples/TitledExample.tsx

@@ -85,11 +85,7 @@ export const TitledExample = forwardRef<
         </div>
       </div>
       {children}
-      {tryIt ? (
-        <div className="border-card-border bg-tag-default-soft flex h-10 justify-end border-t p-2">
-          <div className="flex max-w-[76px] items-center">{tryIt}</div>
-        </div>
-      ) : undefined}
+      {tryIt}
     </div>
   );
 });

packages/fern-docs/ui/src/api-reference/web-socket/WebSocket.tsx

@@ -20,6 +20,7 @@ import { WithAside } from "../../contexts/api-page";
 import { useHref } from "../../hooks/useHref";
 import { Markdown } from "../../mdx/Markdown";
 import { PlaygroundButton } from "../../playground/PlaygroundButton";
+import { PlaygroundButtonTray } from "../../playground/PlaygroundButtonTray";
 import { usePlaygroundBaseUrl } from "../../playground/utils/select-environment";
 import { getSlugFromChildren } from "../../util/getSlugFromText";
 import { EndpointParameter } from "../endpoints/EndpointParameter";
@@ -375,7 +376,9 @@ const WebhookContent: FC<WebhookContentProps> = ({
                 <TitledExample
                   title={"Handshake"}
                   tryIt={
-                    node != null ? <PlaygroundButton state={node} /> : undefined
+                    node != null ? (
+                      <PlaygroundButtonTray state={node} />
+                    ) : undefined
                   }
                   disableClipboard={true}
                 >

packages/fern-docs/ui/src/mdx/components/snippets/EndpointRequestSnippet.tsx

@@ -78,9 +78,11 @@ export function EndpointRequestSnippetInternal({
             options={endpoint.environments}
           />
         }
+        // add the api reference button here to place correctly
         languages={
-          availableLanguages.length > 1 ? (
-            <>
+          <>
+            {slug != null ? <ApiReferenceButton slug={slug} /> : undefined}
+            {availableLanguages.length > 1 ? (
               <CodeExampleClientDropdown
                 languages={availableLanguages}
                 onValueChange={(language) =>
@@ -91,10 +93,9 @@ export function EndpointRequestSnippetInternal({
                 }
                 value={selectedExampleKey.language}
               />
-            </>
-          ) : undefined
+            ) : undefined}
+          </>
         }
-        tryIt={slug != null ? <ApiReferenceButton slug={slug} /> : undefined}
         code={selectedExample.code}
         language={selectedExampleKey.language}
         json={EMPTY_OBJECT}

packages/fern-docs/ui/src/playground/PlaygroundButtonTray.tsx

@@ -0,0 +1,26 @@
+import * as FernNavigation from "@fern-api/fdr-sdk/navigation";
+import { useAtomValue } from "jotai";
+import { FC } from "react";
+import { IS_PLAYGROUND_ENABLED_ATOM } from "../atoms";
+import { usePlaygroundSettings } from "../hooks/usePlaygroundSettings";
+import { PlaygroundButton } from "./PlaygroundButton";
+
+export const PlaygroundButtonTray: FC<{
+  state: FernNavigation.NavigationNodeApiLeaf;
+  className?: string;
+}> = ({ state, className }) => {
+  const isPlaygroundEnabled = useAtomValue(IS_PLAYGROUND_ENABLED_ATOM);
+  const settings = usePlaygroundSettings(state.id ?? state);
+
+  if (!isPlaygroundEnabled || settings?.disabled) {
+    return null;
+  }
+
+  return (
+    <div className="border-card-border bg-tag-default-soft flex h-10 justify-end border-t p-2">
+      <div className="flex max-w-[76px] items-center">
+        <PlaygroundButton state={state} className={className} />
+      </div>
+    </div>
+  );
+};