update App.js, src/components/BreadCrumb/index.js and src/components/FileManager/index.js

src/App.js

@@ -187,7 +187,7 @@ function App() {
         {/* <FolderTree /> */}
         {/* ----------------------------$$$ end---------------------------- */}
 
-        <ReactTable4 />
+        {/* <ReactTable4 /> */}
         {/* <ReactTable5 /> */}
 
         {/* ----------------------------$$$ start---------------------------- */}
@@ -207,7 +207,7 @@ function App() {
         {/* <ProfilePicNextToEachOther />  */}
         {/* ----------------------------$$$ end---------------------------- */}
 
-        {/* <FileManager /> */}
+        <FileManager />
 
         {/* <GridListTable /> */}
 

src/components/BreadCrumb/index.js

@@ -5,36 +5,34 @@ import blackLeftArrow from "./black-arrow-left.svg";
 
 const BreadCrumb = ({ breadCrumbs }) => {
   return (
-    <div>
+    <div className="flex flex-row items-center">
-      <div className="flex flex-row items-center">
+      {breadCrumbs.map((breadCrumb, index) => (
-        {breadCrumbs.map((breadCrumb, index) => (
+        <div className="flex flex-row items-center" key={index}>
-          <div className="flex flex-row items-center" key={index}>
+          <span
-            <span
+            className={`cursor-pointer text-xs hover:text-blue-900  ${
-              className={`cursor-pointer text-xs hover:text-blue-900  ${
+              breadCrumb.active ? "text-blue-900" : "text-blue-400"
-                breadCrumb.active ? "text-blue-900" : "text-blue-400"
+            }`}
-              }`}
+          >
-            >
+            {breadCrumb.name}
-              {breadCrumb.name}
+            {console.log(breadCrumb.active)}
-              {console.log(breadCrumb.active)}
+          </span>
-            </span>
+          {Number(index) !== breadCrumbs.length - 1 && (
-            {Number(index) !== breadCrumbs.length - 1 && (
+            <div>
-              <div>
+              {console.log(breadCrumbs.length - 1)}
-                {console.log(breadCrumbs.length - 1)}
+              {/* {breadCrumb.active === true ? (
-                {/* {breadCrumb.active === true ? (
+              <img src={grayLeftArrow} className="w-10" />
-                  <img src={grayLeftArrow} className="w-10" />
+            ) : (
-                ) : (
+              <img src={blackLeftArrow} className="w-10" />
-                  <img src={blackLeftArrow} className="w-10" />
+            )} */}
-                )} */}
+              {Number(index) === breadCrumbs.length - 2 ? (
-                {Number(index) === breadCrumbs.length - 2 ? (
+                <img src={blackLeftArrow} className="w-4" alt="arrow" />
-                  <img src={blackLeftArrow} className="w-4" />
+              ) : (
-                ) : (
+                <img src={grayLeftArrow} className="w-4" alt="arrow" />
-                  <img src={grayLeftArrow} className="w-4" />
+              )}
-                )}
+            </div>
-              </div>
+          )}
-            )}
+        </div>
-          </div>
+      ))}
-        ))}
-      </div>
     </div>
   );
 };

src/components/FileManager/index.js

@@ -29,7 +29,7 @@ const FileManager = () => {
           {/* ? pageTitle & searchbox */}
           <div className="flex flex-row justify-between">
             {/* ? pageTitle */}
-            <TitleSubtitle titleBorderClassName={"ml-2"} />
+            <TitleSubtitle titleBorderClassName={""} />
 
             {/* ? searchbox */}
             <div className="self-end">
@@ -50,7 +50,7 @@ const FileManager = () => {
             <div className="flex flex-row item-center justify-between">
               {/* ? pageTitle */}
               <div className="flex-1">
-                <TitleSubtitle titleBorderClassName={"ml-2"} />
+                <TitleSubtitle titleBorderClassName={""} />
               </div>
               {/* buttons */}
               <div className="flex flex-row item-center justify-between self-center gap-2">
@@ -99,11 +99,11 @@ const FileManager = () => {
       </div>
       {/* left Section */}
       <div className="w-3/12 py-5 flex flex-col">
-        <TitleSubtitle subTitle={false} titleBorderClassName={"ml-2"} />
+        <TitleSubtitle subTitle={false} titleBorderClassName={""} />
 
         <SemiDonut />
         <div className="px-4" style={{ marginTop: "-113px" }}>
-          <TitleSubtitle subTitle={false} titleBorderClassName={"ml-2"} />
+          <TitleSubtitle subTitle={false} titleBorderClassName={""} />
           <div className="flex flex-col items-center justify-center">
             {/* {[0, 1, 2].map((item, index) => (
               <CardHolder />