test responsive

components/editor/header.tsx

@@ -31,48 +31,49 @@ export const EditorHeader = ({
       <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">
+      <Image
+        src={HFLogo}
+        alt="Hugging Face Logo"
+        width={34}
+        height={34}
+        className="max-xl:hidden"
+      />
+      <p className="text-gray-800 dark:text-gray-300 font-code text-sm font-semiboldn">
         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 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>
     </header>