Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
File size: 4,533 Bytes
5916048 d2a6779 5916048 d2a6779 5916048 d2a6779 5916048 6294700 5916048 f803d8b d2a6779 f803d8b d2a6779 f803d8b 5916048 f803d8b 5916048 f803d8b 5916048 8f469b4 f803d8b 62b480a f803d8b 62b480a 5916048 f803d8b aeacdfd f803d8b 5916048 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 |
"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>
);
};
|