fix(docs): change auth button copy for manual api playground

packages/ui/app/src/playground/auth/PlaygroundCardTriggerManual.tsx

@@ -0,0 +1,94 @@
+import type { APIV1Read } from "@fern-api/fdr-sdk/client/types";
+import { visitDiscriminatedUnion } from "@fern-api/ui-core-utils";
+import { FernButton } from "@fern-ui/components";
+import { Key } from "iconoir-react";
+import { useAtomValue } from "jotai";
+import { ReactElement } from "react";
+import { PLAYGROUND_AUTH_STATE_ATOM } from "../../atoms";
+import { PlaygroundAuthState } from "../types";
+import { pascalCaseHeaderKey } from "../utils/header-key-case";
+
+interface PlaygroundCardTriggerManualProps {
+    auth: APIV1Read.ApiAuth;
+    disabled: boolean;
+    toggleOpen: () => void;
+    isOpen: boolean;
+}
+
+export function PlaygroundCardTriggerManual({
+    auth,
+    disabled,
+    toggleOpen,
+    isOpen,
+}: PlaygroundCardTriggerManualProps): ReactElement | false {
+    const authState = useAtomValue(PLAYGROUND_AUTH_STATE_ATOM);
+
+    const authButtonCopy = visitDiscriminatedUnion(auth)._visit({
+        bearerAuth: () => "Enter your bearer token",
+        basicAuth: () => "Enter your username and password",
+        header: () => "Enter your credentials",
+        oAuth: () => "Enter your credentials",
+        _other: () => "Enter your credentials",
+    });
+
+    if (isAuthed(auth, authState)) {
+        return (
+            <FernButton
+                className="w-full text-left"
+                size="large"
+                intent="success"
+                variant="outlined"
+                text={authButtonCopy}
+                icon={<Key />}
+                rightIcon={
+                    <span className="flex items-center rounded-[4px] bg-tag-success p-1 font-mono text-xs uppercase leading-none text-intent-success">
+                        Authenticated
+                    </span>
+                }
+                onClick={toggleOpen}
+                active={isOpen}
+                disabled={disabled}
+            />
+        );
+    } else {
+        return (
+            <FernButton
+                className="w-full text-left"
+                size="large"
+                intent="danger"
+                variant="outlined"
+                text={authButtonCopy}
+                icon={<Key />}
+                rightIcon={
+                    <span className="flex items-center rounded-[4px] bg-tag-danger p-1 font-mono text-xs uppercase leading-none text-intent-danger">
+                        Not Authenticated
+                    </span>
+                }
+                onClick={toggleOpen}
+                active={isOpen}
+                disabled={disabled}
+            />
+        );
+    }
+}
+
+function isEmpty(str: string | undefined): boolean {
+    return str == null || str.trim().length === 0;
+}
+
+function isAuthed(auth: APIV1Read.ApiAuth, authState: PlaygroundAuthState): boolean {
+    return visitDiscriminatedUnion(auth)._visit({
+        bearerAuth: () => !isEmpty(authState.bearerAuth?.token.trim()),
+        basicAuth: () =>
+            !isEmpty(authState.basicAuth?.username.trim()) && !isEmpty(authState.basicAuth?.password.trim()),
+        header: (header) => !isEmpty(authState.header?.headers[pascalCaseHeaderKey(header.headerWireValue)]?.trim()),
+        oAuth: () => {
+            const authToken =
+                authState.oauth?.selectedInputMethod === "credentials"
+                    ? authState.oauth?.accessToken
+                    : authState.oauth?.userSuppliedAccessToken;
+            return authToken ? !isEmpty(authToken.trim()) : false;
+        },
+        _other: () => false,
+    });
+}