components/editor/sidebar.tsx

"use client";
import { TbChevronDown } from "react-icons/tb";
import Link from "next/link";
import { usePathname } from "next/navigation";
import classNames from "classnames";

import { API_COLLECTIONS } from "@/utils/datas/api_collections";
import { Method } from "@/components/method";

export const EditorSidebar = ({
  collections,
  open,
  onCollections,
}: {
  collections: string[];
  open: boolean;
  onCollections: (collections: string[]) => void;
}) => {
  const pathname = usePathname();

  const handleSetActiveCollection = (key: string) => {
    if (collections.includes(key)) {
      onCollections(collections.filter((col) => col !== key));
    } else {
      onCollections([...collections, key]);
    }
  };
  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,
        }
      )}
    >
      <ul className="w-full">
        {API_COLLECTIONS.map((collection, c) => (
          <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),
                }
              )}
              onClick={() => handleSetActiveCollection(collection.key)}
            >
              <p className="font-semibold uppercase text-xs flex items-center justify-between">
                {collection.key} API
              </p>
              <div className="flex items-center justify-end gap-2">
                {collection?.wip && (
                  <span className="bg-yellow-500/20 text-yellow-600 text-xs font-semibold uppercase px-2 py-1 rounded-full">
                    wip
                  </span>
                )}
                <TbChevronDown
                  className={classNames(
                    "text-slate-400 transition-all duration-200",
                    {
                      "transform rotate-180 !text-slate-100":
                        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}`),
                        }
                      )}
                    >
                      <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"
          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>
      </div>
    </div>
  );
};