folderListst added

src/components/ButtonNewDesign/index.js

@@ -0,0 +1,47 @@
+import React from "react";
+
+import arrow from "../../assets/icons/white-left-arrow.svg";
+
+const ButtonNewDesign = ({
+  bgColor,
+  bgHoverColor,
+  iconBgColor,
+  textColor,
+  border,
+  borderColor,
+  borderRadius,
+  fontSize,
+  padding,
+  icon,
+  buttonIcon,
+}) => {
+  return (
+    <button
+      className={`w-fit h-fit flex items-center transiton duration-200 hover:bg-opacity-70 ${bgColor} ${bgHoverColor} ${textColor} ${border} ${borderColor} ${borderRadius} ${fontSize} ${padding}`}
+    >
+      اطلاعات بیشتر
+      {icon && (
+        <span className={`rounded-full mr-2 ${iconBgColor} `}>
+          <img src={buttonIcon} alt="" className="w-full" />
+        </span>
+      )}
+    </button>
+  );
+};
+
+export default ButtonNewDesign;
+
+ButtonNewDesign.defaultProps = {
+  bgColor: "bg-darkGreenBg",
+  bgHoverColor: "hover:bg-gray-900",
+  iconBgColor: "bg-darkGreenBg",
+  textColor: "text-white",
+  border: "border-b-4",
+  borderColor: "border-lightBlueBorderColor",
+  borderRadius: "rounded",
+  fontSize: "text-sm",
+  padding: "p-4",
+  // icons
+  icon: true,
+  buttonIcon: arrow,
+};

src/components/FileManager/images/arrow-left.svg

@@ -0,0 +1,4 @@
+<svg id="arrow-left" xmlns="http://www.w3.org/2000/svg" width="18.175" height="18.175" viewBox="0 0 18.175 18.175">
+  <path id="Vector" d="M5.375,12,.437,7.058a1.5,1.5,0,0,1,0-2.12L5.375,0" transform="translate(5.985 3.09)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+  <path id="Vector-2" data-name="Vector" d="M0,0H18.175V18.175H0Z" transform="translate(18.175 18.175) rotate(180)" fill="none" opacity="0"/>
+</svg>

src/components/FileManager/images/plus.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="30" viewBox="0 0 16 30">
+  <text id="_" data-name="+" transform="translate(0 24)" fill="#fff" font-size="22" font-family="SegoeUI, Segoe UI"><tspan x="0" y="0">+</tspan></text>
+</svg>

src/components/FileManager/index.js

@@ -4,9 +4,13 @@ import BreadCrumb from "../BreadCrumb";
 import SearchBox from "../SearchBox";
 import TitleSubtitle from "../TitleSubtitle";
 import CardHolder from "../CardHolder";
+import ButtonNewDesign from "../ButtonNewDesign";
+import Playlist from "../Playlist";
+import Folderlists from "../Folderlist";
 
 import graySearchIcon from "./images/gray-search-icon.svg";
-import Playlist from "../Playlist";
+import arrowLeft from "./images/arrow-left.svg";
+import plus from "./images/plus.svg";
 
 const FileManager = () => {
   return (
@@ -37,9 +41,46 @@ const FileManager = () => {
           <Playlist />
         </div>
         <div className="bg-white">
+          <div className="flex flex-col px-7 py-5">
+            {/* pageTitleSubTitle & Buttons */}
+            <div className="flex flex-row item-center justify-between">
               {/* ? pageTitle */}
+              <div className="flex-1">
                 <TitleSubtitle />
               </div>
+              {/* buttons */}
+              <div className="flex flex-row item-center justify-between self-center gap-2">
+                <ButtonNewDesign
+                  bgColor={"bg-blue-500"}
+                  bgHoverColor={"hover:bg-blue-600"}
+                  iconBgColor={null}
+                  textColor={"text-white"}
+                  border={"border"}
+                  borderColor={"border-blue-500"}
+                  borderRadius={"rounded"}
+                  fontSize={"text-xs"}
+                  padding={"p-3"}
+                  icon={true}
+                  buttonIcon={arrowLeft}
+                />
+                <ButtonNewDesign
+                  bgColor={"bg-blue-100"}
+                  bgHoverColor={"hover:bg-blue-600"}
+                  iconBgColor={null}
+                  textColor={"text-blue-900"}
+                  border={"border"}
+                  borderColor={"border-blue-500"}
+                  borderRadius={"rounded"}
+                  fontSize={"text-xs"}
+                  padding={"p-3"}
+                  icon={true}
+                  buttonIcon={arrowLeft}
+                />
+              </div>
+            </div>
+            <Folderlists />
+          </div>
+        </div>
       </div>
 
       {/* left Section */}