79 lines
2.2 KiB
TypeScript
79 lines
2.2 KiB
TypeScript
import React from "react";
|
|
|
|
import ServerIcon from "@/components/Icons/Server";
|
|
import FolderIcon from "@/components/Icons/Folder";
|
|
|
|
interface Props {
|
|
serverId: string;
|
|
path: string;
|
|
changeDirectory: (path: string) => void;
|
|
}
|
|
|
|
const index = ({ serverId, path, changeDirectory }: Props) => {
|
|
const onClickHandler = (e: React.MouseEvent) => {
|
|
const newPath = e.currentTarget.getAttribute("data-custom-attribute");
|
|
if (!newPath) return;
|
|
changeDirectory(newPath);
|
|
};
|
|
|
|
const elements = path.split("/").filter((p) => p !== "");
|
|
console.log(elements);
|
|
return (
|
|
<div>
|
|
<div className="breadcrumbs text-sm">
|
|
<ul>
|
|
<li>
|
|
<div className="mr-2">
|
|
<ServerIcon />
|
|
</div>
|
|
{serverId}
|
|
</li>
|
|
<li onClick={onClickHandler} data-custom-attribute="/">
|
|
<div className="mr-2">
|
|
<FolderIcon />
|
|
</div>
|
|
<a>/</a>
|
|
</li>
|
|
{elements.map((element, index) => {
|
|
const path = elements.slice(0, index + 1).join("/");
|
|
console.log("path", path);
|
|
return (
|
|
<li
|
|
key={index}
|
|
onClick={onClickHandler}
|
|
data-custom-attribute={"/" + path}
|
|
>
|
|
<div className="mr-2">
|
|
<FolderIcon />
|
|
</div>
|
|
<a>{element}</a>
|
|
</li>
|
|
);
|
|
})}
|
|
|
|
<li>
|
|
<span className="inline-flex items-center gap-2">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
className="h-4 w-4 stroke-current"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2"
|
|
d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
|
|
></path>
|
|
</svg>
|
|
Add Document
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default index;
|