update src/components/Folderlist/index.js

src/components/Folderlist/index.js

@@ -10,6 +10,7 @@ import more from "./images/more.svg";
 import pic1 from "./images/profile-pic1.svg";
 import pic2 from "./images/profile-pic2.svg";
 import pic3 from "./images/profile-pic3.svg";
+import ProfilePicNextToEachOther from "../ProfilePicNextToEachOther";
 
 const Folderlists = ({ items }) => {
   return (
@@ -38,12 +39,7 @@ const Folderlists = ({ items }) => {
     >
       {items.map((item, index) => (
         <div
-          className="flex flex-col border-2 rounded-lg p-4"
+          className="flex flex-col min-w-[330px] border-2 border-[#EEEEEE] bg-[#FBFBFB] rounded-lg p-4"
-          style={{
-            borderColor: "#EEEEEE",
-            minWidth: "330px",
-            backgroundColor: "#FBFBFB",
-          }}
           onClick={(e) => {
             if (window.isDown) return e.preventDefault();
             ///do here
@@ -52,32 +48,36 @@ const Folderlists = ({ items }) => {
           key={index}
         >
           <div className="flex flex-row justify-between items-center">
-            <img src={item.icon} className="w-14" />
+            <img src={item.icon} className="w-14" alt="" />
             <div className="self-start flex flex-row-reverse">
               <img
                 src={item.dropDownIcon}
                 className="rotate-90 w-5 cursor-pointer mr-3"
+                alt=""
+              />
+              <ProfilePicNextToEachOther
+                num={item.num}
+                showRest={false}
+                holderClass={"-m-1.5"}
               />
-              {item.users.slice(0, 8).map((user, i) => (
+              {/* {item.users.slice(0, 8).map((user, i) => (
                 <img
                   key={i}
                   src={user.picture}
                   className="w-10"
                   style={{ marginLeft: "-15px" }}
+                  alt=""
                 />
-              ))}{" "}
+              ))} */}
             </div>
           </div>
-          <p
+          <p className="text-xs font-sansbold mt-3 text-[#132F52]">
-            style={{ color: "#00253A" }}
-            className="text-xs font-sansbold mt-3"
-          >
             {item.title}
           </p>
-          <p style={{ color: "#132F52" }} className="text-xs mt-2">
+          <p className="text-xs mt-2 text-[#132F52]">
             {item.memory} <span className="">گیگابایت</span>
           </p>
-          <p style={{ color: "#132F52" }} className="text-xs mt-1 text-left">
+          <p className="text-xs mt-1 text-left text-[#132F52]">
             {item.fileNum} <span className="">فایل</span>
           </p>
         </div>
@@ -96,7 +96,7 @@ Folderlists.defaultProps = {
       memory: 44,
       fileNum: 344,
       dropDownIcon: more,
-      users: [],
+      num: 4,
     },
     {
       icon: folder,
@@ -104,14 +104,7 @@ Folderlists.defaultProps = {
       memory: 44,
       fileNum: 344,
       dropDownIcon: more,
-      users: [
+      num: 2,
-        {
-          picture: pic1,
-          name: "مهدی",
-          fname: "عندلیب",
-          product: "کتاب ریاضی کلاس اول",
-        },
-      ],
     },
     {
       icon: folder,
@@ -119,20 +112,7 @@ Folderlists.defaultProps = {
       memory: 44,
       fileNum: 344,
       dropDownIcon: more,
-      users: [
+      num: 3,
-        {
-          picture: pic1,
-          name: "مهدی",
-          fname: "عندلیب",
-          product: "کتاب ریاضی کلاس اول",
-        },
-        {
-          picture: pic2,
-          name: "سعید",
-          fname: "سعیدی",
-          product: "کتاب ریاضی کلاس دوم",
-        },
-      ],
     },
     {
       icon: folder,
@@ -140,44 +120,7 @@ Folderlists.defaultProps = {
       memory: 44,
       fileNum: 344,
       dropDownIcon: more,
-      users: [
+      num: 1,
-        {
-          picture: pic1,
-          name: "مهدی",
-          fname: "عندلیب",
-          product: "کتاب ریاضی کلاس اول",
-        },
-        {
-          picture: pic2,
-          name: "سعید",
-          fname: "سعیدی",
-          product: "کتاب ریاضی کلاس دوم",
-        },
-        {
-          picture: pic3,
-          name: "محمد",
-          fname: "محمدی",
-          product: "کتاب فیزیک کلاس سول",
-        },
-        {
-          picture: pic1,
-          name: "مهدی",
-          fname: "عندلیب",
-          product: "کتاب ریاضی کلاس اول",
-        },
-        {
-          picture: pic2,
-          name: "سعید",
-          fname: "سعیدی",
-          product: "کتاب ریاضی کلاس دوم",
-        },
-        {
-          picture: pic3,
-          name: "محمد",
-          fname: "محمدی",
-          product: "کتاب فیزیک کلاس سول",
-        },
-      ],
     },
     {
       icon: folder,
@@ -185,7 +128,7 @@ Folderlists.defaultProps = {
       memory: 44,
       fileNum: 344,
       dropDownIcon: more,
-      users: [],
+      num: 5,
     },
     {
       icon: folder,
@@ -193,14 +136,7 @@ Folderlists.defaultProps = {
       memory: 44,
       fileNum: 344,
       dropDownIcon: more,
-      users: [
+      num: 2,
-        {
-          picture: pic1,
-          name: "مهدی",
-          fname: "عندلیب",
-          product: "کتاب ریاضی کلاس اول",
-        },
-      ],
     },
     {
       icon: folder,
@@ -208,20 +144,7 @@ Folderlists.defaultProps = {
       memory: 44,
       fileNum: 344,
       dropDownIcon: more,
-      users: [
+      num: 1,
-        {
-          picture: pic1,
-          name: "مهدی",
-          fname: "عندلیب",
-          product: "کتاب ریاضی کلاس اول",
-        },
-        {
-          picture: pic2,
-          name: "سعید",
-          fname: "سعیدی",
-          product: "کتاب ریاضی کلاس دوم",
-        },
-      ],
     },
     {
       icon: folder,
@@ -229,44 +152,7 @@ Folderlists.defaultProps = {
       memory: 44,
       fileNum: 344,
       dropDownIcon: more,
-      users: [
+      num: 3,
-        {
-          picture: pic1,
-          name: "مهدی",
-          fname: "عندلیب",
-          product: "کتاب ریاضی کلاس اول",
-        },
-        {
-          picture: pic2,
-          name: "سعید",
-          fname: "سعیدی",
-          product: "کتاب ریاضی کلاس دوم",
-        },
-        {
-          picture: pic3,
-          name: "محمد",
-          fname: "محمدی",
-          product: "کتاب فیزیک کلاس سول",
-        },
-        {
-          picture: pic1,
-          name: "مهدی",
-          fname: "عندلیب",
-          product: "کتاب ریاضی کلاس اول",
-        },
-        {
-          picture: pic2,
-          name: "سعید",
-          fname: "سعیدی",
-          product: "کتاب ریاضی کلاس دوم",
-        },
-        {
-          picture: pic3,
-          name: "محمد",
-          fname: "محمدی",
-          product: "کتاب فیزیک کلاس سول",
-        },
-      ],
     },
   ],
 };