Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
"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> | |
); | |
}; | |