Esteves Enzo
format body to create sub object if needed
8f469b4
raw
history blame
4.53 kB
"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-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,
}
)}
>
<ul className="w-full">
{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>
<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-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"
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>
</div>
</div>
);
};