Spaces:
Sleeping
Sleeping
"use client"; | |
import { TbChevronDown } from "react-icons/tb"; | |
import classNames from "classnames"; | |
import { API_COLLECTIONS } from "@/utils/datas/api_collections"; | |
import { Method } from "@/components/method"; | |
import { ApiRoute } from "@/utils/type"; | |
import Link from "next/link"; | |
export const EditorSidebar = ({ | |
collections, | |
endpoint, | |
onCollections, | |
onEndpoint, | |
}: { | |
collections: string[]; | |
endpoint: ApiRoute | null; | |
onCollections: (collections: string[]) => void; | |
onEndpoint: (endpoint: ApiRoute) => void; | |
}) => { | |
const handleSetActiveCollection = (key: string) => { | |
if (collections.includes(key)) { | |
onCollections(collections.filter((col) => col !== key)); | |
} else { | |
onCollections([...collections, key]); | |
} | |
}; | |
return ( | |
<ul className="min-w-[300px] max-w-sm w-full bg-slate-900 border-r border-slate-700/40 h-full overflow-auto"> | |
{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": | |
endpoint?.path === end.path && | |
endpoint?.method === end.method, | |
} | |
)} | |
onClick={() => onEndpoint(end)} | |
> | |
<Method method={end.method} /> | |
<p className="truncate">{end.path}</p> | |
</Link> | |
))} | |
</ul> | |
</div> | |
)} | |
</li> | |
))} | |
</ul> | |
); | |
}; | |