Spaces:
Sleeping
Sleeping
File size: 4,194 Bytes
5916048 d2a6779 5916048 d2a6779 5916048 d2a6779 5916048 6294700 5916048 f803d8b d2a6779 f803d8b d2a6779 f803d8b 5916048 f803d8b 5916048 f803d8b 5916048 f803d8b 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 |
"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>
<TbChevronDown
className={classNames(
"text-slate-400 transition-all duration-200",
{
"transform rotate-180 !text-slate-100":
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>
</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>
);
};
|