feat(misc): update the api code snippet (#950)

components/api-endpoint.tsx

@@ -1,5 +1,6 @@
 import { Code, Pre } from "nextra/components";
-import React, { useState } from "react";
+import { useRef } from "react";
+import React, { ReactNode, useState } from "react";
 import {
  ApiIntro,
  Col,
@@ -11,14 +12,78 @@ import {
 } from "./mdx";
 import Tooltip from "./tooltip";
 import Link from "next/link";
-
+import { CodeIcon, CopyIcon } from "src/icons/shared-icons";
 interface PropertyType {
  name: string;
  type: string;
  description: string;
  required?: boolean;
 }
 
+const CustomPre = ({
+ children,
+ filename,
+ dataLanguage,
+ hasCopyCode = true,
+}: {
+ children: ReactNode;
+ filename?: string;
+ dataLanguage?: string;
+ hasCopyCode?: boolean;
+}) => {
+ const [isCopied, setIsCopied] = useState(false);
+ const codeRef = useRef<HTMLDivElement>(null);
+
+ const handleCopy = () => {
+ if (codeRef.current?.textContent) {
+ navigator.clipboard.writeText(codeRef.current.textContent).then(() => {
+ setIsCopied(true);
+ setTimeout(() => setIsCopied(false), 5000);
+ });
+ }
+ };
+
+ return (
+ <Pre data-language={dataLanguage} className="custom-pre">
+ <div
+ style={{ overflowX: "hidden" }}
+ className="nx-flex nx-w-full nx-items-center nx-justify-between"
+ >
+ <CodeIcon />
+ <span className="nx-code-name">{`${filename} command`}</span>
+ {hasCopyCode && (
+ <div
+ onClick={handleCopy}
+ className="nx-cursor-pointer nx-flex nx-gap-2 nx-items-center"
+ >
+ {isCopied && (
+ <>
+ <svg
+ width="12"
+ height="8"
+ viewBox="0 0 12 8"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M11.3359 0.414062C11.5469 0.648438 11.5469 1 11.3359 1.21094L5.14844 7.39844C4.91406 7.63281 4.5625 7.63281 4.35156 7.39844L1.16406 4.21094C0.929688 4 0.929688 3.64844 1.16406 3.4375C1.375 3.20312 1.72656 3.20312 1.9375 3.4375L4.72656 6.22656L10.5391 0.414062C10.75 0.203125 11.1016 0.203125 11.3125 0.414062H11.3359Z"
+ fill="#0B1742"
+ />
+ </svg>
+ <span className="nx-copy-text">Copied</span>
+ </>
+ )}
+ <CopyIcon />
+ </div>
+ )}
+ </div>
+ <div style={{ overflowX: "scroll", width: "100%" }} ref={codeRef}>
+ {children}
+ </div>
+ </Pre>
+ );
+};
+
 // Helper function to replace path parameters in the URL
 const replacePathParameters = (
  path: string,
@@ -74,16 +139,11 @@ requests.${method.toLowerCase()}("${actualUrl}", headers={
  `;
 
  return (
- <Pre
- filename="python"
- data-language="python"
- hasCopyCode={true}
- className="nx-pre-code"
- >
+ <CustomPre filename="python" dataLanguage="python" hasCopyCode={true}>
  <Code data-lanuage="python" data-theme="default">
  {code}
  </Code>
- </Pre>
+ </CustomPre>
  );
 };
 
@@ -130,11 +190,10 @@ await fetch("${actualUrl}", {
 })`;
 
  return (
- <Pre
- filename="javascript"
- data-lanuage="javascript"
+ <CustomPre
  hasCopyCode={true}
- className="nx-pre-code"
+ dataLanguage="javascript"
+ filename="javascript"
  >
  <Code
  data-lanuage="javascript"
@@ -143,36 +202,36 @@ await fetch("${actualUrl}", {
  >
  {code}
  </Code>
- </Pre>
+ </CustomPre>
  );
 };
 
+const escapeQuotes = (jsonObject) => {
+ const jsonString = JSON.stringify(jsonObject);
+ const escapedString = jsonString.replaceAll(/(?<!\\)"/g, '"');
+ return escapedString;
+};
+
 const CurlCodeTab: React.FC<{
  method: "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
  url: string;
  samplePayload?: unknown;
  isBearerTokenRequired?: boolean;
 }> = ({ method, url, samplePayload, isBearerTokenRequired }) => {
- let code = `\
-curl \\
--X ${method} \\
+ let code = `
+curl -X ${method}
 ${
  isBearerTokenRequired
- ? `-H Authorization: bearer <your token here> -H 'Content-Type: application/json' \\\n`
+ ? ` -H "Authorization: bearer <your token here>" -H "Content-Type: application/json"\n `
  : ""
 }${url}`;
 
  if (samplePayload) {
- code += ` \\\n -d '${JSON.stringify(samplePayload)}'`;
+ code += ` -d ${JSON.stringify(escapeQuotes(samplePayload))}`;
  }
 
  return (
- <Pre
- filename="bash"
- data-lanuage="curl"
- hasCopyCode={true}
- className="nx-pre-code"
- >
+ <CustomPre hasCopyCode={true} dataLanguage="Curl" filename="Curl">
  <Code data-lanuage="bash" data-theme="default">
  {code.split("\n").map((line) => {
  return (
@@ -183,7 +242,7 @@ ${
  );
  })}
  </Code>
- </Pre>
+ </CustomPre>
  );
 };
 
@@ -193,9 +252,9 @@ const JsonCodeTab: React.FC<{
  const formattedJson = JSON.stringify(samplePayload, undefined, 2);
 
  return (
- <Pre className="nx-pre-code" filename="json" hasCopyCode={true}>
+ <CustomPre filename="json" hasCopyCode={true}>
  {formattedJson}
- </Pre>
+ </CustomPre>
  );
 };
 

components/mdx.tsx

@@ -1,5 +1,7 @@
-import React, { ReactNode, useState } from "react";
+import React, { ReactNode, useState, useEffect, useRef } from "react";
 import { Tab as HeadlessTab } from "@headlessui/react";
+import { DropDownArrow, Tickicon } from "src/icons/shared-icons";
+import { motion } from "framer-motion";
 
 function InfoIcon(properties) {
  return (
@@ -155,30 +157,81 @@ export function Tabs({
  );
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function DropDownTabs({ children }: { children: any }) {
+interface TabProps {
+ heading: string;
+ children: ReactNode;
+}
+
+interface DropDownTabsProps {
+ children: React.ReactElement<TabProps>[] | React.ReactElement<TabProps>;
+}
+
+export function DropDownTabs({ children }: DropDownTabsProps) {
  const [selectedTab, setSelectedTab] = useState(0);
+ const [isOpen, setIsOpen] = useState(false);
+ const dropdownRef = useRef<HTMLDivElement>(null);
+
+ const tabs = React.Children.toArray(
+ children,
+ ) as React.ReactElement<TabProps>[];
 
- const handleTabChange = (event) => {
- setSelectedTab(Number.parseInt(event.target.value));
+ const handleTabChange = (index: number) => {
+ setSelectedTab(index);
+ setIsOpen(false);
  };
+
+ useEffect(() => {
+ const handleClickOutside = (event: MouseEvent) => {
+ if (
+ dropdownRef.current &&
+ !dropdownRef.current.contains(event.target as Node)
+ ) {
+ setIsOpen(false);
+ }
+ };
+
+ document.addEventListener("mousedown", handleClickOutside);
+ return () => {
+ document.removeEventListener("mousedown", handleClickOutside);
+ };
+ }, [dropdownRef]);
+
  return (
- <div>
- <select
- className="pr-6 outline-none nx-rounded-lg nx-p-4 nx-text-sm nx-font-medium nx-bg-white nx-border nx-border-black/10"
- value={selectedTab}
- onChange={handleTabChange}
+ <>
+ <div
+ className="nx-relative nx-mb-5 nx-items-center nx-gap-2 nx-cursor-pointer nx-justify-center nx-dropdown-container"
+ onClick={() => setIsOpen(!isOpen)}
+ style={{ userSelect: "none" }}
  >
- {React.Children.map(children, (child, index) => (
- <option key={index} value={index}>
- {child.props.heading}
- </option>
- ))}
- </select>
- {React.Children.map(children, (child, index) =>
- index === selectedTab ? child.props.children : undefined,
- )}
- </div>
+ {tabs[selectedTab]?.props.heading}
+ <DropDownArrow />
+ </div>
+ <div ref={dropdownRef}>
+ {isOpen && (
+ <motion.div
+ initial={{ height: 0, opacity: 0 }}
+ animate={{ height: isOpen ? "auto" : 0, opacity: isOpen ? 1 : 0 }}
+ transition={{ duration: 0.1 }}
+ className="nx-z-50 nx-absolute dropDown"
+ style={{ overflow: "hidden" }}
+ >
+ {tabs.map((child, index) => (
+ <div
+ key={index}
+ className={`dropdown-tab nx-justify-between tab-text nx-cursor-pointer ${
+ index === selectedTab && `indgo-100`
+ }`}
+ onClick={() => handleTabChange(index)}
+ >
+ {child?.props.heading}
+ {index === selectedTab && <Tickicon />}
+ </div>
+ ))}
+ </motion.div>
+ )}
+ <div className="mt-4">{tabs[selectedTab]?.props.children}</div>
+ </div>
+ </>
  );
 }