added breadcrumbs

app/components/FilesEditor/BreadCrumbs/index.tsx

@@ -0,0 +1,77 @@
+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;