need to rewrite a bit the logic of the body

components/editor/sidebar.tsx

@@ -26,65 +26,66 @@ export const EditorSidebar = ({
     }
   };
   return (
-    <ul
+    <div
       className={classNames(
-        "min-w-[300px] transition-all duration-200 xl:max-w-sm w-2/3 xl:w-full bg-slate-900 border-r border-slate-700/40 xl:!h-full overflow-auto fixed top-[56px] xl:top-0 left-0 xl:relative z-10 -translate-x-full xl:!translate-x-0",
+        "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,
         }
       )}
     >
-      {API_COLLECTIONS.map((collection, c) => (
-        <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),
-              }
-            )}
-            onClick={() => handleSetActiveCollection(collection.key)}
-          >
-            <p className="font-semibold uppercase text-xs flex items-center justify-between">
-              {collection.key} API
-            </p>
-            <TbChevronDown
+      <ul className="w-full">
+        {API_COLLECTIONS.map((collection, c) => (
+          <li key={collection.key} className="block w-full">
+            <div
               className={classNames(
-                "text-slate-400 transition-all duration-200",
+                "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",
                 {
-                  "transform rotate-180 !text-slate-100": collections.includes(
-                    collection.key
-                  ),
+                  "bg-indigo-600 !text-slate-100 hover:!bg-indigo-600 !border-indigo-500":
+                    collections.includes(collection.key),
                 }
               )}
-            />
-          </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}`),
-                      }
-                    )}
-                  >
-                    <Method method={end.method} />
-                    <p className="truncate">{end.path}</p>
-                  </Link>
-                ))}
-              </ul>
+              onClick={() => handleSetActiveCollection(collection.key)}
+            >
+              <p className="font-semibold uppercase text-xs flex items-center justify-between">
+                {collection.key} API
+              </p>
+              <TbChevronDown
+                className={classNames(
+                  "text-slate-400 transition-all duration-200",
+                  {
+                    "transform rotate-180 !text-slate-100":
+                      collections.includes(collection.key),
+                  }
+                )}
+              />
             </div>
-          )}
-        </li>
-      ))}
-      <div className="absolute bottom-0 xl:bottom-[56px] left-0 w-full">
+            {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}`),
+                        }
+                      )}
+                    >
+                      <Method method={end.method} />
+                      <p className="truncate">{end.path}</p>
+                    </Link>
+                  ))}
+                </ul>
+              </div>
+            )}
+          </li>
+        ))}
+      </ul>
+      <div className="w-full">
         <a
           href="https://huggingface.co/spaces/enzostvs/hub-api-playground/discussions/1"
           target="_blank"
@@ -100,6 +101,6 @@ export const EditorSidebar = ({
           See HUB API documentation
         </a>
       </div>
-    </ul>
+    </div>
   );
 };

components/input/input.tsx

@@ -37,7 +37,7 @@ export const TextInput: React.FC<Props> = ({
         value={value}
         placeholder={placeholder}
         onChange={handleInputChange}
-        className="transition-all duration-200 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"
+        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>
   );

utils/datas/api_collections.ts

@@ -144,29 +144,106 @@ export const API_COLLECTIONS: Array<ApiCollection> = [{
     path: '/api/whoami-v2',
   }],
 },
-// {
-//   key: 'collection',
-//   endpoints: [{
-//     method: 'POST',
-//     path: '/api/collections',
-//   }, {
-//     method: 'GET',
-//     path: '/api/collections/{namespace}/{slug}-{id}'
-//   }, {
-//     method: 'PATCH',
-//     path: '/api/collections/{namespace}/{slug}-{id}'
-//   }, {
-//     method: 'DELETE',
-//     path: '/api/collections/{namespace}/{slug}-{id}'
-//   }, {
-//     method: 'POST',
-//     path: '/api/collections/{namespace}/{slug}-{id}/item'
-//   }, {
-//     method: 'PATCH',
-//     path: '/api/collections/{namespace}/{slug}-{id}/items/{item_id}'
-//   }, {
-//     method: 'DELETE',
-//     path: '/api/collections/{namespace}/{slug}-{id}/items/{item_id}'
-//   }],
-// }
+{
+  key: 'collection',
+  endpoints: [{
+    method: 'POST',
+    path: '/api/collections/create',
+    body: [{
+      label: "Title of collection",
+      key: "title",
+      required: true,
+    }, {
+      label: "Namespace",
+      key: "namespace",
+      required: true,
+    }, {
+      label: "Description of collection",
+      key: "description",
+      required: true,
+    }, {
+      label: "Type",
+      key: "item.type",
+      defaultValue: "model",
+      required: true,
+    }, {
+      label: "RepoId/PaperId",
+      key: "item.id",
+      required: true,
+    }, {
+      label: "Whether the repo is private",
+      required: true,
+      key: "private",
+      defaultValue: false,
+    }]
+  }, {
+    method: 'GET',
+    path: '/api/collections/{namespace}/{slug-id}',
+  }, {
+    method: 'PATCH',
+    path: '/api/collections/{namespace}/{slug-id}',
+    body: [{
+      label: "Title of collection",
+      key: "title",
+      required: true,
+    }, {
+      label: "Namespace",
+      key: "namespace",
+      required: true,
+    }, {
+      label: "Position",
+      required: true,
+      key: "position",
+      defaultValue: 0,
+    }, {
+      label: "Theme",
+      required: true,
+      key: "theme",
+      defaultValue: "green",
+    }, {
+      label: "Whether the repo is private",
+      required: true,
+      key: "private",
+      defaultValue: false,
+    }]
+  }, {
+    method: 'DELETE',
+    path: '/api/collections/{namespace}/{slug-id}',
+  }, {
+    method: 'POST',
+    path: '/api/collections/{namespace}/{slug-id}/item',
+    body: [{
+      label: "Type",
+      key: "item.type",
+      defaultValue: "model",
+      required: true,
+    }, {
+      label: "RepoId/PaperId",
+      key: "item.id",
+      required: true,
+    }, {
+      label: "Note",
+      key: "note",
+      defaultValue: "Here is the model I trained on ...",
+      required: true,
+    }]
+  }, {
+    method: 'PATCH',
+    path: '/api/collections/{namespace}/{slug-id}/item/{itemId}',
+    body: [{
+      label: "Position",
+      key: "position",
+      defaultValue: 0,
+      required: true,
+    }, {
+      label: "Note",
+      key: "note",
+      defaultValue: "Here is the model I trained on ...",
+      required: true,
+    }]
+  }, {
+    method: 'DELETE',
+    path: '/api/collections/{namespace}/{slug-id}/item/{itemId}',
+  }]
+}
 ]