components/editor/main/snippet/index.tsx

import { useCopyToClipboard } from "react-use";
import { Options } from "redaxios";

import { ApiRoute } from "@/utils/type";

import { PythonSnippet } from "./python";
import { JavascriptSnippet } from "./javascript";
import { CurlSnippet } from "./curl";

export const Snippet = ({
  endpoint,
  headers,
  parameters,
  body,
}: {
  endpoint: ApiRoute;
  parameters?: Record<string, any>;
  headers?: Record<string, any>;
  body?: Options | undefined;
}) => {
  const [_, copyToClipboard] = useCopyToClipboard();

  const handleCopyToClipboard = (snippet: string) => copyToClipboard(snippet);

  return (
    <div className="mt-8 grid grid-cols-1 gap-4 w-full">
      <CurlSnippet
        endpoint={endpoint}
        headers={
          headers?.Authorization
            ? {
                Authorization: `Bearer ${headers.Authorization}`,
              }
            : {}
        }
        body={body}
        parameters={parameters}
        onCopyToClipboard={handleCopyToClipboard}
      />
      <JavascriptSnippet
        endpoint={endpoint}
        headers={
          headers?.Authorization
            ? {
                Authorization: `Bearer ${headers.Authorization}`,
              }
            : {}
        }
        body={body}
        parameters={parameters}
        onCopyToClipboard={handleCopyToClipboard}
      />
      <PythonSnippet
        endpoint={endpoint}
        headers={
          headers?.Authorization
            ? {
                Authorization: `Bearer ${headers.Authorization}`,
              }
            : {}
        }
        body={body}
        parameters={parameters}
        onCopyToClipboard={handleCopyToClipboard}
      />
    </div>
  );
};