update

src/components/CardHolder/index.js

@@ -1,8 +1,11 @@
 import React from "react";
 
 import dropbox from "./images/dropbox.svg";
+import googleDrive from "./images/google-drive.svg";
+import blue from "./images/blue-icon.svg";
 
 const CardHolder = ({
+  items,
   cardImage,
   cardBackgroundColor,
   cardBorder,
@@ -10,23 +13,30 @@ const CardHolder = ({
   cardBorderRadius,
 }) => {
   return (
+    <div className="">
+      {items.map((item, index) => (
         <div
-      className={`w-fit bg-white px-4 py-1 flex flex-row items-center ${cardBorder} ${cardBorderRadius}`}
+          className={`w-full px-2 py-1 flex flex-row items-center mt-4 ${cardBorder} ${cardBorderRadius}
+           ${item.active === true ? "bg-blue-100" : "bg-white"}
+          `}
           style={{
-        backgroundColor: cardBackgroundColor,
-        borderColor: cardBorderColor,
+            // backgroundColor: cardBackgroundColor,
+            borderColor: item.active === true ? "#06BACE" : "#EEEEEE",
           }}
+          key={index}
         >
-      <img src={cardImage} className="w-20" />
-      <div className="flex flex-col mr-2">
+          <img src={item.icon} className="w-14" />
+          <div className="flex flex-col mr-2 flex-1">
             <p style={{ color: "#00253A" }} className="text-sm">
-          فضای ذخیره سازی گوگل درایو
+              {item.title}
             </p>
             <p className="text-xs text-gray-400 font-light mr-1 mt-2">
-          فضای باقیمانده 40 گیگابایت از 1000 گیگابایت
+              {item.des}{" "}
             </p>
           </div>
         </div>
+      ))}
+    </div>
   );
 };
 
@@ -38,4 +48,25 @@ CardHolder.defaultProps = {
   cardBorder: "border-4",
   cardBorderColor: "#EEEEEE",
   cardBorderRadius: "rounded-lg",
+
+  items: [
+    {
+      icon: dropbox,
+      title: "فضای ذخیره سازی گوگل درایو",
+      des: "فضای باقیمانده 40 گیگابایت از 1000 گیگابایت",
+      active: false,
+    },
+    {
+      icon: blue,
+      title: "فضای ذخیره سازی گوگل درایو",
+      des: "فضای باقیمانده 40 گیگابایت از 1000 گیگابایت",
+      active: true,
+    },
+    {
+      icon: dropbox,
+      title: "فضای ذخیره سازی گوگل درایو",
+      des: "فضای باقیمانده 40 گیگابایت از 1000 گیگابایت",
+      active: false,
+    },
+  ],
 };

src/components/FileManager/index.js

@@ -9,6 +9,7 @@ import CardHolder from "../CardHolder";
 import ButtonNewDesign from "../ButtonNewDesign";
 import Playlist from "../Playlist";
 import Folderlists from "../Folderlist";
+import UploadFile from "../UploadFile";
 
 import graySearchIcon from "./images/gray-search-icon.svg";
 import arrowLeft from "./images/arrow-left.svg";
@@ -95,9 +96,18 @@ const FileManager = () => {
         </div>
       </div>
       {/* left Section */}
-      <div className="w-3/12 py-5  ">
+      <div className="w-3/12 py-5 flex flex-col">
         <TitleSubtitle />
         <SemiDonut />
+        <div className="px-4" style={{ marginTop: "-113px" }}>
+          <TitleSubtitle />
+          <div className="flex flex-col items-center justify-center">
+            {/* {[0, 1, 2].map((item, index) => (
+              <CardHolder />
+            ))} */}
+            <CardHolder /> <UploadFile />
+          </div>
+        </div>
       </div>
     </div>
   );

src/components/UploadFile/index.js

@@ -4,7 +4,7 @@ import file from "./images/file.svg";
 
 const index = () => {
   return (
-    <div className="relative bg-white w-fit flex flex-col items-center p-10 rounded-lg border-2 border-dashed border-blue-300">
+    <div className="relative bg-white w-fit flex flex-col items-center p-10 rounded-lg border-2 border-dashed border-blue-300 mt-5">
       <div className=" ">
         <img src={file} className="" />
         <input