update

src/App.js

@@ -52,6 +52,7 @@ import Blogs from "./components/Blogs";
 import FileManager from "./components/FileManager";
 import Playlist from "./components/Playlist";
 import Folderlists from "./components/Folderlist";
+import CardHolder from "./components/CardHolder";
 
 // import Digikala from "./components/Digikala/ImageSlider";
 
@@ -110,8 +111,9 @@ function App() {
         {/* <SearchBox /> */}
         {/* <FileManager /> */}
         {/* <Playlist /> */}
-        <Folderlists />
+        {/* <Folderlists /> */}
         {/* <Blogs /> */}
+        <CardHolder />
       </div>
     </Provider>
   );

src/components/CardHolder/images/blue-icon.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="46.306" height="46.306" viewBox="0 0 46.306 46.306">
+  <g id="vuesax_linear_driver" data-name="vuesax/linear/driver" transform="translate(-108 -252)">
+    <g id="driver" transform="translate(108 252)">
+      <path id="Vector" d="M33.4,15.416H5.171A5.184,5.184,0,0,1,0,10.245V5.171A5.184,5.184,0,0,1,5.171,0H33.4a5.184,5.184,0,0,1,5.171,5.171v5.074A5.2,5.2,0,0,1,33.4,15.416Z" transform="translate(3.878 3.878)" fill="#06bace"/>
+      <path id="Vector-2" data-name="Vector" d="M33.4,15.416H5.171A5.184,5.184,0,0,1,0,10.245V5.171A5.184,5.184,0,0,1,5.171,0H33.4a5.184,5.184,0,0,1,5.171,5.171v5.074A5.2,5.2,0,0,1,33.4,15.416Z" transform="translate(3.878 27.031)" fill="#06bace"/>
+      <path id="Vector-3" data-name="Vector" d="M0,0H46.306V46.306H0Z" fill="none" opacity="0"/>
+      <path id="Vector-4" data-name="Vector" d="M0,0V3.859" transform="translate(11.576 9.647)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <path id="Vector-5" data-name="Vector" d="M0,0V3.859" transform="translate(19.294 9.647)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <path id="Vector-6" data-name="Vector" d="M0,0V3.859" transform="translate(11.576 32.8)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <path id="Vector-7" data-name="Vector" d="M0,0V3.859" transform="translate(19.294 32.8)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <path id="Vector-8" data-name="Vector" d="M0,0H7.718" transform="translate(27.012 11.576)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <path id="Vector-9" data-name="Vector" d="M0,0H7.718" transform="translate(27.012 34.729)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    </g>
+  </g>
+</svg>

src/components/CardHolder/index.js

@@ -0,0 +1,33 @@
+import React from "react";
+
+import dropbox from "./images/dropbox.svg";
+
+const CardHolder = ({
+  cardImage,
+  cardBackgroundColor,
+  cardBorder,
+  cardBorderColor,
+  cardBorderRadius,
+}) => {
+  return (
+    <div
+      className={`bg-white m-20 ${cardBorder} ${cardBorderRadius}`}
+      style={{
+        backgroundColor: cardBackgroundColor,
+        borderColor: cardBorderColor,
+      }}
+    >
+      <img src={cardImage} className="w-20" />
+    </div>
+  );
+};
+
+export default CardHolder;
+
+CardHolder.defaultProps = {
+  cardImage: dropbox,
+  cardBackgroundColor: "#fff",
+  cardBorder: "border-4",
+  cardBorderColor: "#EEEEEE",
+  cardBorderRadius: "rounded-lg",
+};

src/components/FileManager/index.js

@@ -3,8 +3,9 @@ import React from "react";
 import BreadCrumb from "../BreadCrumb";
 import SearchBox from "../SearchBox";
 import TitleSubtitle from "../TitleSubtitle";
+import CardHolder from "../CardHolder";
 
-import graySearchIcon from "./gray-search-icon.svg";
+import graySearchIcon from "./images/gray-search-icon.svg";
 
 const FileManager = () => {
   return (
@@ -24,6 +25,10 @@ const FileManager = () => {
           />
         </div>
       </div>
+      <div className="bg-yellow-600">
+        {" "}
+        <CardHolder />
+      </div>
     </div>
   );
 };