rework snippet card

components/editor/main/snippet/index.tsx

@@ -3,11 +3,29 @@ import { useCopyToClipboard } from "react-use";
 import classNames from "classnames";
 import Highlight from "react-highlight";
 import { Options } from "redaxios";
-import { BiSolidCopy } from "react-icons/bi";
+import {
+  BiSolidCopy,
+  BiLogoJavascript,
+  BiLogoPython,
+  BiCodeCurly,
+} from "react-icons/bi";
 
 import { ApiRoute } from "@/utils/type";
 
-const LANGUAGES = ["curl", "javascript", "python"];
+const LANGUAGES = [
+  {
+    value: "curl",
+    icon: <BiCodeCurly className=" text-xl text-slate-300" />,
+  },
+  {
+    value: "javascript",
+    icon: <BiLogoJavascript className=" text-xl text-yellow-500" />,
+  },
+  {
+    value: "python",
+    icon: <BiLogoPython className=" text-xl text-blue-500" />,
+  },
+];
 
 export const Snippet = ({
   endpoint,
@@ -18,11 +36,10 @@ export const Snippet = ({
   parameters?: Record<string, any>;
   body?: Options | undefined;
 }) => {
-  const [language, setLanguage] = useState<string>(LANGUAGES[0]);
   const [_, copyToClipboard] = useCopyToClipboard();
   const [isCopied, setIsCopied] = useState<boolean>(false);
 
-  const generateRequestFromEndpoint = () => {
+  const generateRequestFromEndpoint = (language: string) => {
     const { method, path } = endpoint;
 
     const needBody = ["post", "put", "patch", "delete"].includes(
@@ -94,8 +111,8 @@ export const Snippet = ({
     return "";
   };
 
-  const handleCopyToClipboard = () => {
-    copyToClipboard(generateRequestFromEndpoint());
+  const handleCopyToClipboard = (language: string) => {
+    copyToClipboard(generateRequestFromEndpoint(language));
     setIsCopied(true);
     setTimeout(() => {
       setIsCopied(false);
@@ -104,48 +121,37 @@ export const Snippet = ({
 
   return (
     <div className="mt-8 grid grid-cols-1 gap-4 w-full">
-      <p className="text-slate-200 uppercase text-xs font-semibold">Snippet</p>
-      <div className="bg-slate-950/50 rounded-xl overflow-hidden">
-        <ul className="bg-slate-950 flex items-center justify-start">
-          {LANGUAGES.map((lang, key) => (
-            <li
-              key={key}
-              className={classNames(
-                "py-4 text-slate-300 text-xs font-semibold px-6 border-r border-slate-900 cursor-pointer hover:bg-slate-900/80 transition-all duration-75",
-                {
-                  "bg-slate-900/50 hover:!bg-slate-900/50": lang === language,
-                }
-              )}
-              onClick={() => setLanguage(lang)}
+      {LANGUAGES.map((lang, key) => (
+        <div key={key} className="bg-slate-950/50 rounded-xl overflow-hidden">
+          <header className="bg-slate-950 flex items-center justify-start px-5 py-4 uppercase gap-2">
+            {lang.icon}
+            <p className="text-slate-300 text-xs font-semibold">{lang.value}</p>
+          </header>
+          <main className="px-6 py-6">
+            <Highlight
+              className={`${lang.value} text-xs font-code !bg-transparent !p-0 !whitespace-pre-wrap break-all !leading-relaxed`}
             >
-              {lang}
-            </li>
-          ))}
-        </ul>
-        <main className="px-6 py-6">
-          <Highlight
-            className={`${language} text-xs font-code !bg-transparent !p-0 !whitespace-pre-wrap break-all !leading-relaxed`}
-          >
-            {generateRequestFromEndpoint()}
-          </Highlight>
-          <div
-            className="flex justify-end relative"
-            onClick={handleCopyToClipboard}
-          >
-            <BiSolidCopy className="text-slate-500 cursor-pointer hover:text-slate-300 transition-all duration-75" />
+              {generateRequestFromEndpoint(lang.value)}
+            </Highlight>
             <div
-              className={classNames(
-                "bg-indigo-500/60 text-slate-100 text-xs font-semibold absolute bottom-0 right-0 z-10 rounded-lg px-2 py-1 pointer-events-none -translate-y-full transition-all duration-200",
-                {
-                  "opacity-0": !isCopied,
-                }
-              )}
+              className="flex justify-end relative"
+              onClick={() => handleCopyToClipboard(lang.value)}
             >
-              Copied!
+              <BiSolidCopy className="text-slate-500 cursor-pointer hover:text-slate-300 transition-all duration-75" />
+              <div
+                className={classNames(
+                  "bg-indigo-500/60 text-slate-100 text-xs font-semibold absolute bottom-0 right-0 z-10 rounded-lg px-2 py-1 pointer-events-none -translate-y-full transition-all duration-200",
+                  {
+                    "opacity-0": !isCopied,
+                  }
+                )}
+              >
+                Copied!
+              </div>
             </div>
-          </div>
-        </main>
-      </div>
+          </main>
+        </div>
+      ))}
     </div>
   );
 };