Spaces:

enzostvs
/

hub-api-playground

Running on CPU Upgrade

App Files Files Community

enzostvs HF Staff commited on about 15 hours ago

Commit

91c3567

1 Parent(s): 4fa2079

add theme provider

Browse files

Files changed (21) hide show

app/layout.tsx +5 -7
app/page.tsx +2 -3
assets/globals.css +4 -3
components/editor/header.tsx +58 -5
components/editor/index.tsx +1 -1
components/editor/main/endpoint.tsx +4 -4
components/editor/main/index.tsx +2 -2
components/editor/main/parameter.tsx +1 -1
components/editor/main/request.tsx +4 -4
components/editor/main/response.tsx +5 -4
components/editor/main/snippet/curl.tsx +4 -4
components/editor/main/snippet/javascript.tsx +3 -3
components/editor/main/snippet/python.tsx +3 -3
components/editor/main/tabs.tsx +19 -49
components/editor/sidebar.tsx +8 -8
components/input/input.tsx +4 -4
components/input/toggle.tsx +7 -7
index.d.ts +9 -0
package-lock.json +11 -0
package.json +1 -0
tailwind.config.ts +10 -9

app/layout.tsx CHANGED Viewed

@@ -1,6 +1,7 @@
-import type { Metadata } from "next";
 import { Fira_Code, Inter } from "next/font/google";
 import "@/assets/globals.css";
 import { Editor } from "@/components/editor";
 const inter = Inter({
@@ -15,11 +16,6 @@ const fira_code = Fira_Code({
   variable: "--font-fira-code",
 });
-export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
 export default function RootLayout({
   children,
 }: {
@@ -28,7 +24,9 @@ export default function RootLayout({
   return (
     <html lang="en" className={`${inter.variable} ${fira_code.variable}`}>
       <body>
-        <Editor>{children}</Editor>
       </body>
     </html>
   );

 import { Fira_Code, Inter } from "next/font/google";
+import { ThemeProvider } from "next-themes";
 import "@/assets/globals.css";
+import "highlight.js/styles/github.css";
 import { Editor } from "@/components/editor";
 const inter = Inter({
   variable: "--font-fira-code",
 });
 export default function RootLayout({
   children,
 }: {
   return (
     <html lang="en" className={`${inter.variable} ${fira_code.variable}`}>
       <body>
+        <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
+          <Editor>{children}</Editor>
+        </ThemeProvider>
       </body>
     </html>
   );

app/page.tsx CHANGED Viewed

@@ -1,6 +1,5 @@
-import { Editor } from "@/components/editor";
-import Image from "next/image";
 export default function Home() {
-  return <section className="h-full">lol</section>;
 }

+"use client";
 export default function Home() {
+  return <div />;
 }

assets/globals.css CHANGED Viewed

@@ -2,7 +2,8 @@
 @tailwind components;
 @tailwind utilities;
-html, body {
   @apply bg-gray-200 min-h-screen relative tracking-wide overflow-x-hidden;
   z-index: 1;
 }
@@ -10,7 +11,7 @@ html, body {
 #background__noisy {
   @apply bg-blend-normal pointer-events-none opacity-80;
   background-size: 25ww auto;
-  background-image: url('/background_noisy.webp');
   z-index: -1;
   @apply fixed w-screen h-screen top-0 left-0;
-}

 @tailwind components;
 @tailwind utilities;
+html,
+body {
   @apply bg-gray-200 min-h-screen relative tracking-wide overflow-x-hidden;
   z-index: 1;
 }
 #background__noisy {
   @apply bg-blend-normal pointer-events-none opacity-80;
   background-size: 25ww auto;
+  background-image: url("/background_noisy.webp");
   z-index: -1;
   @apply fixed w-screen h-screen top-0 left-0;
+}

components/editor/header.tsx CHANGED Viewed

@@ -1,26 +1,79 @@
 import Image from "next/image";
 import { TbMenu2 } from "react-icons/tb";
 import HFLogo from "assets/hf-logo.svg";
 export const EditorHeader = ({
   onToggleMenu,
 }: {
   onToggleMenu: () => void;
 }) => {
   return (
-    <header className="px-4 xl:px-6 py-2.5 border border-slate-950 bg-slate-950 flex justify-between items-center">
       <div className="w-5 h-5 block xl:hidden" onClick={onToggleMenu}>
-        <TbMenu2 className="w-full h-full text-slate-100" />
       </div>
       <Image src={HFLogo} alt="Hugging Face Logo" width={34} height={34} />
-      <p className="text-gray-300 font-code text-sm font-semibold">
         Hub API Playground
       </p>
       <div className="hidden xl:flex items-center justify-end gap-3">
-        <div className="bg-teal-600 w-3 h-3 rounded-full" />
         <div className="bg-indigo-600 w-3 h-3 rounded-full" />
-        <div className="bg-purple-500 w-3 h-3 rounded-full" />
       </div>
     </header>
   );

+"use client";
 import Image from "next/image";
 import { TbMenu2 } from "react-icons/tb";
+import { MdOutlineNightlight, MdOutlineLightMode } from "react-icons/md";
+import classNames from "classnames";
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+import("highlight.js/styles/atom-one-dark.css");
 import HFLogo from "assets/hf-logo.svg";
+import { useUpdateEffect } from "react-use";
 export const EditorHeader = ({
   onToggleMenu,
 }: {
   onToggleMenu: () => void;
 }) => {
+  const [mounted, setMounted] = useState(false);
+  const { theme, setTheme } = useTheme();
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted) {
+    return null;
+  }
   return (
+    <header className="px-4 xl:px-6 py-2.5 border-b dark:border-slate-950 border-gray-200 bg-white dark:bg-slate-950 flex justify-between items-center">
       <div className="w-5 h-5 block xl:hidden" onClick={onToggleMenu}>
+        <TbMenu2 className="w-full h-full text-slate-600 dark:text-slate-100" />
       </div>
       <Image src={HFLogo} alt="Hugging Face Logo" width={34} height={34} />
+      <p className="text-gray-800 dark:text-gray-300 font-code text-sm font-semibold">
         Hub API Playground
       </p>
       <div className="hidden xl:flex items-center justify-end gap-3">
+        {/* <div className="bg-teal-600 w-3 h-3 rounded-full" />
         <div className="bg-indigo-600 w-3 h-3 rounded-full" />
+        <div className="bg-purple-500 w-3 h-3 rounded-full" /> */}
+        <div className="rounded-full bg-gray-100 border-gray-200 dark:bg-slate-800 border dark:border-slate-700 p-0.5 flex items-center justify-between relative z-[1] cursor-pointer">
+          <div
+            className={classNames(
+              "transition-transform duration-200 ease-in-out top-0.5 w-6 h-6 rounded-full absolute -z-[1]",
+              {
+                "translate-x-full bg-indigo-500": theme === "dark",
+                "translate-x-0 bg-amber-500": theme === "light",
+              }
+            )}
+          />
+          <div
+            className={`size-6 rounded-full flex items-center justify-center ${
+              theme === "light"
+                ? "text-white"
+                : "dark:text-slate-500 text-gray-400"
+            } p-1`}
+            onClick={() => {
+              setTheme("light");
+            }}
+          >
+            <MdOutlineLightMode />
+          </div>
+          <div
+            className={`size-6 rounded-full flex items-center justify-center ${
+              theme === "dark"
+                ? "text-white"
+                : "dark:text-slate-500 text-gray-400"
+            } p-1`}
+            onClick={() => {
+              setTheme("dark");
+            }}
+          >
+            <MdOutlineNightlight />
+          </div>
+        </div>
       </div>
     </header>
   );

components/editor/index.tsx CHANGED Viewed

@@ -18,7 +18,7 @@ export const Editor = ({ children }: any) => {
   });
   return (
-    <div className="bg-slate-950 w-full overflow-hidden shadow-xl h-[100vh]">
       <EditorHeader onToggleMenu={() => setOpen(!open)} />
       <main className="flex h-full">
         <EditorSidebar

   });
   return (
+    <div className="bg-white dark:bg-slate-950 w-full overflow-hidden shadow-xl h-[100vh]">
       <EditorHeader onToggleMenu={() => setOpen(!open)} />
       <main className="flex h-full">
         <EditorSidebar

components/editor/main/endpoint.tsx CHANGED Viewed

@@ -28,9 +28,9 @@ export const Endpoint = ({
   };
   return (
-    <div className="bg-slate-950/40 w-full px-4 xl:px-6 pt-5">
-      <div className="bg-slate-950 p-3 rounded-lg flex items-center justify-between">
-        <div className="text-white text-sm flex items-center justify-start gap-2 w-full">
           <Method method={method} />
           <div className="flex items-center justify-start gap-1 flex-wrap">
             {path_formatted.map((p, i) => {
@@ -46,7 +46,7 @@ export const Endpoint = ({
                   }
                 />
               ) : (
-                <p key={i} className="text-slate-300">
                   {p.content}
                 </p>
               );

   };
   return (
+    <div className="bg-white dark:bg-slate-950/40 w-full px-4 xl:px-6 pt-5">
+      <div className="bg-slate-200 border-slate-300 dark:border-0 dark:bg-slate-950 p-3 rounded-lg flex items-center justify-between">
+        <div className="text-gray-600 dark:text-white text-sm flex items-center justify-start gap-2 w-full">
           <Method method={method} />
           <div className="flex items-center justify-start gap-1 flex-wrap">
             {path_formatted.map((p, i) => {
                   }
                 />
               ) : (
+                <p key={i} className="text-gray-600 dark:text-slate-300">
                   {p.content}
                 </p>
               );

components/editor/main/index.tsx CHANGED Viewed

@@ -43,7 +43,7 @@ export const EditorMain = ({ endpoint }: { endpoint: ApiRoute }) => {
   });
   return (
-    <div className="flex-1 bg-slate-900/50 h-[calc(100%-56px)]">
       <div className="h-full grid grid-cols-1 xl:grid-cols-3">
         <Request
           parameters={formattedParameters}
@@ -65,7 +65,7 @@ export const EditorMain = ({ endpoint }: { endpoint: ApiRoute }) => {
             onChange={setFormattedEndpoint}
           >
             <button
-              className="bg-indigo-500 hover:bg-indigo-500/80 text-white px-3 py-1 rounded-lg text-sm"
               onClick={submit}
             >
               Send

   });
   return (
+    <div className="flex-1 bg-gray-100 dark:bg-slate-900/50 h-[calc(100%-56px)]">
       <div className="h-full grid grid-cols-1 xl:grid-cols-3">
         <Request
           parameters={formattedParameters}
             onChange={setFormattedEndpoint}
           >
             <button
+              className="bg-black hover:bg-gray-800 dark:bg-indigo-500 dark:hover:bg-indigo-500/80 text-white px-3 py-1 rounded-lg text-sm"
               onClick={submit}
             >
               Send

components/editor/main/parameter.tsx CHANGED Viewed

@@ -14,7 +14,7 @@ export const Parameter: React.FC<Props> = ({ value, onChange }) => {
   return (
     <input
       type="text"
-      className="bg-indigo-600 !text-white px-1.5 rounded-md outline-none bg-opacity-80 max-w-[80px] text-center truncate"
       onBlur={() => {
         onChange(state, previousValue ?? `{${value}}`);
         setPreviousValue(state as string);

   return (
     <input
       type="text"
+      className="bg-indigo-500 dark:bg-indigo-600 !text-white px-1.5 rounded-md outline-none bg-opacity-80 max-w-[80px] text-center truncate"
       onBlur={() => {
         onChange(state, previousValue ?? `{${value}}`);
         setPreviousValue(state as string);

components/editor/main/request.tsx CHANGED Viewed

@@ -41,7 +41,7 @@ export const Request = ({
   useUpdateEffect(() => onBodyChange(bodyForm), [bodyForm]);
   return (
-    <div className="h-full bg-slate-900 pb-5 overflow-auto">
       <div className="top-0 sticky w-full backdrop-blur">
         {children}
         <Tabs active={tab} setActive={setTab} endpoint={endpoint} />
@@ -49,7 +49,7 @@ export const Request = ({
       <div className="px-4 xl:px-6">
         {tab === "parameters" && parameters && (
           <div className="mt-6 grid grid-cols-2 gap-6 w-full">
-            <p className="text-slate-200 uppercase text-xs font-semibold col-span-2">
               Optional parameters
             </p>
             {parameters &&
@@ -82,7 +82,7 @@ export const Request = ({
         )}
         {tab === "body" && endpoint?.body?.length && (
           <div className="mt-6 grid grid-cols-2 gap-6 w-full">
-            <p className="text-slate-200 uppercase text-xs font-semibold col-span-2">
               Body
             </p>
             {endpoint?.body?.length &&
@@ -119,7 +119,7 @@ export const Request = ({
         )}
         {tab === "headers" && (
           <div className="mt-8 grid grid-cols-1 gap-6 w-full">
-            <p className="text-slate-200 uppercase text-xs font-semibold">
               Headers
             </p>
             <div className="w-full">

   useUpdateEffect(() => onBodyChange(bodyForm), [bodyForm]);
   return (
+    <div className="h-full bg-white dark:bg-slate-900 pb-5 overflow-auto">
       <div className="top-0 sticky w-full backdrop-blur">
         {children}
         <Tabs active={tab} setActive={setTab} endpoint={endpoint} />
       <div className="px-4 xl:px-6">
         {tab === "parameters" && parameters && (
           <div className="mt-6 grid grid-cols-2 gap-6 w-full">
+            <p className="text-slate-500 dark:text-slate-200 uppercase text-xs dark:font-semibold col-span-2">
               Optional parameters
             </p>
             {parameters &&
         )}
         {tab === "body" && endpoint?.body?.length && (
           <div className="mt-6 grid grid-cols-2 gap-6 w-full">
+            <p className="text-slate-500 dark:text-slate-200 uppercase text-xs dark:font-semibold col-span-2">
               Body
             </p>
             {endpoint?.body?.length &&
         )}
         {tab === "headers" && (
           <div className="mt-8 grid grid-cols-1 gap-6 w-full">
+            <p className="text-slate-500 dark:text-slate-200 uppercase text-xs dark:font-semibold col-span-2">
               Headers
             </p>
             <div className="w-full">

components/editor/main/response.tsx CHANGED Viewed

@@ -1,15 +1,16 @@
 import Highlight from "react-highlight";
-import "node_modules/highlight.js/styles/night-owl.css";
 import { Loading } from "@/components/loading";
 export const Response = ({ res, loading }: { res: any; loading: boolean }) => {
   return (
-    <div className="overflow-auto h-full relative xl:col-span-2">
-      <Highlight className="json text-sm !bg-slate-950/10 !h-full !p-3 !font-code !whitespace-pre-wrap">
         {JSON.stringify(res ?? {}, null, 2)}
       </Highlight>
       {loading && (
         <Loading>
-          <p className="text-slate-400 text-lg mt-4">Processing...</p>
         </Loading>
       )}
     </div>

 import Highlight from "react-highlight";
 import { Loading } from "@/components/loading";
 export const Response = ({ res, loading }: { res: any; loading: boolean }) => {
   return (
+    <div className="overflow-auto h-full relative xl:col-span-2 border-l border-slate-200 dark:border-slate-700/50">
+      <Highlight className="json text-sm !bg-slate-100 dark:!bg-slate-950/10 !h-full !p-3 !font-code !whitespace-pre-wrap">
         {JSON.stringify(res ?? {}, null, 2)}
       </Highlight>
       {loading && (
         <Loading>
+          <p className="text-white dark:text-slate-400 text-lg mt-4">
+            Processing...
+          </p>
         </Loading>
       )}
     </div>

components/editor/main/snippet/curl.tsx CHANGED Viewed

@@ -70,17 +70,17 @@ export const CurlSnippet = ({
   };
   return (
-    <div 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 text-slate-300">
         <BiCodeCurly className="text-xl" />
         <p className="text-xs font-semibold">Curl</p>
       </header>
       <main className="px-6 py-6">
-        <Highlight className="curl text-xs font-code !bg-transparent !p-0 !whitespace-pre-wrap break-all !leading-relaxed">
           {generateCurlRequestFromEndpoint()}
         </Highlight>
         <div className="flex justify-end relative" onClick={handleCopy}>
-          <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",

   };
   return (
+    <div className="border dark:border-0 border-slate-200 bg-slate-50 dark:bg-slate-950/50 rounded-xl overflow-hidden">
+      <header className="bg-slate-200 dark:bg-slate-950 flex items-center justify-start px-5 py-4 uppercase gap-2 text-slate-600 dark:text-slate-300">
         <BiCodeCurly className="text-xl" />
         <p className="text-xs font-semibold">Curl</p>
       </header>
       <main className="px-6 py-6">
+        <Highlight className="curl text-xs font-code !bg-transparent !p-0 !whitespace-pre-wrap break-all !leading-relaxed !text-slate-800 dark:!text-slate-100">
           {generateCurlRequestFromEndpoint()}
         </Highlight>
         <div className="flex justify-end relative" onClick={handleCopy}>
+          <BiSolidCopy className="text-slate-400 dark:text-slate-500 cursor-pointer hover:text-slate-500 dark: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",

components/editor/main/snippet/javascript.tsx CHANGED Viewed

@@ -80,13 +80,13 @@ export const JavascriptSnippet = ({
   };
   return (
-    <div 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 text-yellow-500">
         <BiLogoJavascript className="text-xl" />
         <p className="text-xs font-semibold">Javascript</p>
       </header>
       <main className="px-6 py-6">
-        <Highlight className="javascript text-xs font-code !bg-transparent !p-0 !whitespace-pre-wrap break-all !leading-relaxed">
           {generateJavascriptRequestFromEndpoint()}
         </Highlight>
         <div className="flex justify-end relative" onClick={handleCopy}>

   };
   return (
+    <div className="border dark:border-0 border-slate-200 bg-slate-50 dark:bg-slate-950/50 rounded-xl overflow-hidden">
+      <header className="bg-slate-200 dark:bg-slate-950 flex items-center justify-start px-5 py-4 uppercase gap-2 text-amber-500">
         <BiLogoJavascript className="text-xl" />
         <p className="text-xs font-semibold">Javascript</p>
       </header>
       <main className="px-6 py-6">
+        <Highlight className="curl text-xs font-code !bg-transparent !p-0 !whitespace-pre-wrap break-all !leading-relaxed !text-slate-800 dark:!text-slate-100">
           {generateJavascriptRequestFromEndpoint()}
         </Highlight>
         <div className="flex justify-end relative" onClick={handleCopy}>

components/editor/main/snippet/python.tsx CHANGED Viewed

@@ -80,13 +80,13 @@ response = requests.${method.toLocaleLowerCase()}(
   };
   return (
-    <div 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 text-blue-500">
         <BiLogoPython className="text-xl" />
         <p className="text-xs font-semibold">Python</p>
       </header>
       <main className="px-6 py-6">
-        <Highlight className="python text-xs font-code !bg-transparent !p-0 !whitespace-pre-wrap break-all !leading-relaxed">
           {generatePythonRequestFromEndpoint()}
         </Highlight>
         <div className="flex justify-end relative" onClick={handleCopy}>

   };
   return (
+    <div className="border dark:border-0 border-slate-200 bg-slate-50 dark:bg-slate-950/50 rounded-xl overflow-hidden">
+      <header className="bg-slate-200 dark:bg-slate-950 flex items-center justify-start px-5 py-4 uppercase gap-2 text-blue-500">
         <BiLogoPython className="text-xl" />
         <p className="text-xs font-semibold">Python</p>
       </header>
       <main className="px-6 py-6">
+        <Highlight className="curl text-xs font-code !bg-transparent !p-0 !whitespace-pre-wrap break-all !leading-relaxed !text-slate-800 dark:!text-slate-100">
           {generatePythonRequestFromEndpoint()}
         </Highlight>
         <div className="flex justify-end relative" onClick={handleCopy}>

components/editor/main/tabs.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import { ApiRoute } from "@/utils/type";
 import classNames from "classnames";
-// const TABS = ["headers", "parameters", "body", "snippet"];
 export const Tabs = ({
   active,
   setActive,
@@ -12,55 +12,25 @@ export const Tabs = ({
   endpoint: ApiRoute;
 }) => {
   return (
-    <ul className="flex items-center justify-center gap-6 bg-slate-950/40">
-      <li
-        className={classNames(
-          "text-sm text-slate-400 hover:text-slate-400 font-semibold uppercase -tracking-wider cursor-pointer py-4 px-2 border-b-2 border-transparent",
-          {
-            "!border-slate-100 !text-slate-100": "headers" === active,
-          }
-        )}
-        onClick={() => setActive("headers")}
-      >
-        Headers
-      </li>
-      {endpoint?.parameters && (
-        <li
-          className={classNames(
-            "text-sm text-slate-400 hover:text-slate-400 font-semibold uppercase -tracking-wider cursor-pointer py-4 px-2 border-b-2 border-transparent",
-            {
-              "!border-slate-100 !text-slate-100": "parameters" === active,
-            }
-          )}
-          onClick={() => setActive("parameters")}
-        >
-          Parameters
-        </li>
       )}
-      {endpoint?.body && (
-        <li
-          className={classNames(
-            "text-sm text-slate-400 hover:text-slate-400 font-semibold uppercase -tracking-wider cursor-pointer py-4 px-2 border-b-2 border-transparent",
-            {
-              "!border-slate-100 !text-slate-100": "body" === active,
-            }
-          )}
-          onClick={() => setActive("body")}
-        >
-          Body
-        </li>
-      )}
-      <li
-        className={classNames(
-          "text-sm text-slate-400 hover:text-slate-400 font-semibold uppercase -tracking-wider cursor-pointer py-4 px-2 border-b-2 border-transparent",
-          {
-            "!border-slate-100 !text-slate-100": "snippet" === active,
-          }
-        )}
-        onClick={() => setActive("snippet")}
-      >
-        Snippet
-      </li>
     </ul>
   );
 };

 import { ApiRoute } from "@/utils/type";
 import classNames from "classnames";
+const TABS = ["headers", "parameters", "body", "snippet"];
 export const Tabs = ({
   active,
   setActive,
   endpoint: ApiRoute;
 }) => {
   return (
+    <ul className="border-b border-gray-200 dark:border-0 flex items-center justify-center gap-0 bg-white dark:bg-slate-950/40">
+      {TABS.map(
+        (tab: string) =>
+          (["headers", "snippet"].includes(tab) || tab in endpoint) && (
+            <li
+              key={tab}
+              className={classNames(
+                "text-sm px-6 text-gray-400 hover:text-gray-500 dark:text-slate-400 dark:hover:text-slate-400 dark:font-semibold uppercase -tracking-wider cursor-pointer py-4 border-b-2 border-transparent",
+                {
+                  "!text-gray-500 !border-black dark:!border-slate-100 dark:!text-slate-100":
+                    tab === active,
+                }
+              )}
+              onClick={() => setActive(tab as any)}
+            >
+              {tab.charAt(0).toUpperCase() + tab.slice(1)}
+            </li>
+          )
       )}
     </ul>
   );
 };

components/editor/sidebar.tsx CHANGED Viewed

@@ -28,7 +28,7 @@ export const EditorSidebar = ({
   return (
     <div
       className={classNames(
-        "min-w-[300px] transition-all flex flex-col items-start justify-between duration-200 xl:max-w-sm w-2/3 xl:w-full bg-slate-900 border-r border-slate-700/40 h-[calc(100%-56px)] overflow-auto fixed top-[56px] xl:top-0 left-0 xl:relative z-10 -translate-x-full xl:!translate-x-0",
         {
           "translate-x-0 h-[calc(100%-56px)]": open,
         }
@@ -39,9 +39,9 @@ export const EditorSidebar = ({
           <li key={collection.key} className="block w-full">
             <div
               className={classNames(
-                "p-4 border-b border-slate-700/70 text-slate-400 cursor-pointer hover:bg-slate-700/30 flex items-center justify-between transition-all duration-200 select-none active:bg-indigo-600 active:text-slate-100",
                 {
-                  "bg-indigo-600 !text-slate-100 hover:!bg-indigo-600 !border-indigo-500":
                     collections.includes(collection.key),
                 }
               )}
@@ -68,16 +68,16 @@ export const EditorSidebar = ({
               </div>
             </div>
             {collections.includes(collection.key) && (
-              <div className="bg-slate-700/20 w-full p-3 border-b border-slate-700/70">
                 <ul className="w-full">
                   {collection.endpoints.map((end, e) => (
                     <Link
                       key={e}
                       href={`/${collection.key}/${e}`}
                       className={classNames(
-                        "text-slate-400 font-semibold text-xs flex items-center justify-start gap-2 rounded-md p-2.5 hover:bg-slate-600 hover:bg-opacity-10 cursor-pointer border-t border-b border-transparent select-none",
                         {
-                          "bg-slate-600 bg-opacity-20 hover:!bg-opacity-20 !text-slate-200 border-b !border-b-slate-700/70 border-t !border-t-slate-800":
                             pathname.includes(`/${collection.key}/${e}`),
                         }
                       )}
@@ -96,14 +96,14 @@ export const EditorSidebar = ({
         <a
           href="https://huggingface.co/spaces/enzostvs/hub-api-playground/discussions/1"
           target="_blank"
-          className="text-slate-300 font-semibold text-sm p-5 flex w-full bg-slate-950/20 hover:bg-slate-950/40 border-b border-slate-800"
         >
           Give Feedback
         </a>
         <a
           href="https://huggingface.co/docs/hub/api"
           target="_blank"
-          className="text-slate-300 font-semibold text-sm p-5 flex w-full bg-slate-950/20 hover:bg-slate-950/40"
         >
           See HUB API documentation
         </a>

   return (
     <div
       className={classNames(
+        "min-w-[300px] transition-all flex flex-col items-start justify-between duration-200 xl:max-w-sm w-2/3 xl:w-full bg-white border-slate-200 dark:bg-slate-900 border-r dark:border-slate-700/40 h-[calc(100%-56px)] overflow-auto fixed top-[56px] xl:top-0 left-0 xl:relative z-10 -translate-x-full xl:!translate-x-0",
         {
           "translate-x-0 h-[calc(100%-56px)]": open,
         }
           <li key={collection.key} className="block w-full">
             <div
               className={classNames(
+                "w-[calc(100%+1px)] p-4 border-b border-slate-200 dark:border-slate-700/70 text-slate-600 dark:text-slate-400 cursor-pointer hover:bg-slate-100 dark:hover:bg-slate-700/30 flex items-center justify-between transition-all duration-200 select-none active:bg-slate-200 dark:active:bg-indigo-600 active:text-slate-100",
                 {
+                  "!bg-slate-200 dark:!bg-indigo-600 dark:hover:!bg-indigo-600 !border-slate-200 dark:!border-indigo-500 dark:!text-slate-200":
                     collections.includes(collection.key),
                 }
               )}
               </div>
             </div>
             {collections.includes(collection.key) && (
+              <div className="bg-slate-50 dark:bg-slate-700/20 w-full p-3 border-b border-slate-200 dark:border-slate-700/70">
                 <ul className="w-full">
                   {collection.endpoints.map((end, e) => (
                     <Link
                       key={e}
                       href={`/${collection.key}/${e}`}
                       className={classNames(
+                        "text-slate-500 dark:text-slate-400 font-semibold text-xs flex items-center justify-start gap-2 rounded-md p-2.5 hover:bg-slate-200 dark:hover:bg-slate-600 dark:hover:bg-opacity-10 cursor-pointer border-t border-b border-transparent select-none",
                         {
+                          "bg-slate-200 dark:bg-slate-600/20 !text-slate-800 dark:!text-slate-200 border-b !border-b-slate-50 !border-t-slate-300 dark:!border-b-slate-700/70 border-t dark:!border-t-slate-800":
                             pathname.includes(`/${collection.key}/${e}`),
                         }
                       )}
         <a
           href="https://huggingface.co/spaces/enzostvs/hub-api-playground/discussions/1"
           target="_blank"
+          className="text-slate-500 dark:text-slate-300 dark:font-semibold text-sm p-5 flex w-full bg-transparent hover:bg-slate-100 border-slate-200 dark:bg-slate-950/20 dark:hover:bg-slate-950/40 border-t dark:border-slate-800"
         >
           Give Feedback
         </a>
         <a
           href="https://huggingface.co/docs/hub/api"
           target="_blank"
+          className="text-slate-500 dark:text-slate-300 dark:font-semibold text-sm p-5 flex w-full bg-transparent hover:bg-slate-100 border-slate-200 dark:bg-slate-950/20 dark:hover:bg-slate-950/40 border-t dark:border-slate-800"
         >
           See HUB API documentation
         </a>

components/input/input.tsx CHANGED Viewed

@@ -37,13 +37,13 @@ export const TextInput: React.FC<Props> = ({
       <div className="flex items-center justify-start gap-2 relative">
         {tooltip && (
           <div className="group cursor-pointer">
-            <HiInformationCircle className="text-slate-500 group-hover:text-slate-300 text-xl" />
-            <div className="bg-slate-950/90 z-10 rounded-xl p-3 text-white absolute text-xs left-0 bottom-0 translate-y-[calc(100%+8px)] opacity-0 transition-all duration-200 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto">
               {tooltip}
             </div>
           </div>
         )}
-        <label className="text-slate-400 text-sm font-medium capitalize">
           {label}:
         </label>
       </div>
@@ -52,7 +52,7 @@ export const TextInput: React.FC<Props> = ({
         value={value}
         placeholder={placeholder}
         onChange={handleInputChange}
-        className="transition-all duration-200 truncate w-full h-full px-4 py-4 bg-slate-950/50 rounded-lg  outline-none text-slate-200 placeholder:text-slate-600 focus:ring-4 focus:ring-indigo-600 focus:ring-opacity-40 border border-slate-950/50 focus:border-indigo-500"
       />
     </div>
   );

       <div className="flex items-center justify-start gap-2 relative">
         {tooltip && (
           <div className="group cursor-pointer">
+            <HiInformationCircle className="text-slate-400 dark:text-slate-500 group-hover:text-slate-600 dark:group-hover:text-slate-300 text-xl" />
+            <div className="bg-black dark:bg-slate-950/90 z-10 rounded-xl p-3 text-white absolute text-xs left-0 bottom-0 translate-y-[calc(100%+8px)] opacity-0 transition-all duration-200 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto">
               {tooltip}
             </div>
           </div>
         )}
+        <label className="text-slate-500 dark:text-slate-400 text-sm dark:font-medium capitalize">
           {label}:
         </label>
       </div>
         value={value}
         placeholder={placeholder}
         onChange={handleInputChange}
+        className="transition-all text-sm duration-200 truncate w-full h-full px-4 py-3 bg-white dark:bg-slate-950/50 rounded-lg outline-none text-slate-600 dark:text-slate-200 placeholder:text-slate-400 dark:placeholder:text-slate-600 focus:ring-4 focus:ring-indigo-400/20 dark:focus:ring-indigo-600/50 border border-slate-200 dark:border-slate-950/50 focus:border-indigo-300 dark:focus:border-indigo-500"
       />
     </div>
   );

components/input/toggle.tsx CHANGED Viewed

@@ -25,19 +25,19 @@ export const Toggle: React.FC<Props> = ({
       <div className="flex items-center justify-start gap-2">
         {tooltip && (
           <div className="group cursor-pointer">
-            <HiInformationCircle className="text-slate-500 group-hover:text-slate-300 text-xl" />
-            <div className="bg-slate-950/90 z-10 min-w-[200px] rounded-xl p-3 text-white absolute text-xs left-0 bottom-0 translate-y-[calc(100%+8px)] opacity-0 transition-all duration-200 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto">
               {tooltip}
             </div>
           </div>
         )}
-        <label className="text-slate-400 text-sm font-medium capitalize">
           {label}:
         </label>
       </div>
       <div
         className={classNames(
-          "w-[52px] h-[24px] rounded-full p-[4px] relative cursor-pointer",
           {
             "bg-red-700": !checkedState,
             "bg-green-500": checkedState,
@@ -47,10 +47,10 @@ export const Toggle: React.FC<Props> = ({
       >
         <div
           className={classNames(
-            "rounded-full h-[16px] w-[16px] bg-slate-50 shadow-xl absolute top-[4px] transition-all duration-200",
             {
-              "left-[4px]": !checkedState,
-              "left-[31px]": checkedState,
             }
           )}
         />

       <div className="flex items-center justify-start gap-2">
         {tooltip && (
           <div className="group cursor-pointer">
+            <HiInformationCircle className="text-slate-400 dark:text-slate-500 group-hover:text-slate-600 dark:group-hover:text-slate-300 text-xl" />
+            <div className="bg-black dark:bg-slate-950/90 z-10 min-w-[200px] rounded-xl p-3 text-white absolute text-xs left-0 bottom-0 translate-y-[calc(100%+8px)] opacity-0 transition-all duration-200 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto">
               {tooltip}
             </div>
           </div>
         )}
+        <label className="text-slate-500 dark:text-slate-400 text-sm dark:font-medium capitalize">
           {label}:
         </label>
       </div>
       <div
         className={classNames(
+          "w-[32px] h-[20px] rounded-full px-[4px] relative cursor-pointer",
           {
             "bg-red-700": !checkedState,
             "bg-green-500": checkedState,
       >
         <div
           className={classNames(
+            "rounded-full h-[12px] w-[12px] bg-slate-50 shadow-xl absolute top-[4px] transition-all duration-200",
             {
+              "translate-x-0": !checkedState,
+              "translate-x-full": checkedState,
             }
           )}
         />

index.d.ts ADDED Viewed

	@@ -0,0 +1,9 @@

+declare module "highlight.js/styles/atom-one-dark.css" {
+  const content: { [className: string]: string };
+  export default content;
+}
+declare module "highlight.js/styles/github.css" {
+  const content: { [className: string]: string };
+  export default content;
+}

package-lock.json CHANGED Viewed

@@ -10,6 +10,7 @@
       "dependencies": {
         "classnames": "^2.3.2",
         "next": "13.5.6",
         "react": "^18",
         "react-dom": "^18",
         "react-highlight": "^0.15.0",
@@ -3057,6 +3058,16 @@
         }
       }
     },
     "node_modules/node-releases": {
       "version": "2.0.13",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz",

       "dependencies": {
         "classnames": "^2.3.2",
         "next": "13.5.6",
+        "next-themes": "^0.4.6",
         "react": "^18",
         "react-dom": "^18",
         "react-highlight": "^0.15.0",
         }
       }
     },
+    "node_modules/next-themes": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
+      "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.13",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz",

package.json CHANGED Viewed

@@ -11,6 +11,7 @@
   "dependencies": {
     "classnames": "^2.3.2",
     "next": "13.5.6",
     "react": "^18",
     "react-dom": "^18",
     "react-highlight": "^0.15.0",

   "dependencies": {
     "classnames": "^2.3.2",
     "next": "13.5.6",
+    "next-themes": "^0.4.6",
     "react": "^18",
     "react-dom": "^18",
     "react-highlight": "^0.15.0",

tailwind.config.ts CHANGED Viewed

@@ -1,17 +1,18 @@
-import type { Config } from 'tailwindcss'
 const config: Config = {
   content: [
-    './pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
-    './app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
     fontFamily: {
-      sans: ['var(--font-inter)', 'sans-serif'],
-      code: ['var(--font-fira-code)', 'monospace'],
-    }
   },
   plugins: [],
-}
-export default config

+import type { Config } from "tailwindcss";
 const config: Config = {
+  darkMode: "class",
   content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     fontFamily: {
+      sans: ["var(--font-inter)", "sans-serif"],
+      code: ["var(--font-fira-code)", "monospace"],
+    },
   },
   plugins: [],
+};
+export default config;