update

src/App.js

@@ -51,6 +51,7 @@ import SearchBox from "./components/SearchBox";
 import Blogs from "./components/Blogs";
 import FileManager from "./components/FileManager";
 import Playlist from "./components/Playlist";
+import Folderlists from "./components/Folderlist";
 
 // import Digikala from "./components/Digikala/ImageSlider";
 
@@ -108,7 +109,8 @@ function App() {
         {/* <BreadCrumb /> */}
         {/* <SearchBox /> */}
         {/* <FileManager /> */}
-        <Playlist />
+        {/* <Playlist /> */}
+        <Folderlists />
         {/* <Blogs /> */}
       </div>
     </Provider>

src/components/Folderlist/images/folder-open.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="79.298" height="79.298" viewBox="0 0 79.298 79.298">
+  <g id="folder-open" transform="translate(0 0)">
+    <path id="Vector" d="M56.136,31.424V13.687C56.136,2.737,53.328,0,42.094,0H37.9c-4.2,0-5.154,1.224-6.74,3.285l-4.2,5.475c-1.057,1.353-1.685,2.19-4.494,2.19H14.042C2.808,10.949,0,13.687,0,24.636v6.788" transform="translate(11.597 8.707)" fill="#ffd358" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-2" data-name="Vector" d="M0,79.3H79.3V0H0Z" transform="translate(0 0)" fill="none" opacity="0"/>
+    <path id="Vector-3" data-name="Vector" d="M.057,10.9l1.322,16.52c.5,5.055.892,8.921,9.846,8.921H52.79c8.954,0,9.351-3.866,9.846-8.921L63.958,10.9A10.015,10.015,0,0,0,61.81,3.668L61.744,3.6A9.828,9.828,0,0,0,54.111,0H9.9A9.8,9.8,0,0,0,2.337,3.535c-.033.033-.066.066-.066.1A9.665,9.665,0,0,0,.057,10.9Z" transform="translate(7.642 36.345)" fill="#fcefcb" stroke="#fff" stroke-width="1.5"/>
+    <path id="Vector-4" data-name="Vector" d="M16.983,0H0" transform="translate(31.157 56.169)" fill="none" stroke="#ffd358" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+  </g>
+</svg>

src/components/Folderlist/images/more.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g id="more" transform="translate(0 0)">
+    <path id="Vector" d="M2,0A2,2,0,1,0,4,2,2.006,2.006,0,0,0,2,0Z" transform="translate(3 10)" fill="#132f52"/>
+    <path id="Vector-2" data-name="Vector" d="M2,0A2,2,0,1,0,4,2,2.006,2.006,0,0,0,2,0Z" transform="translate(17 10)" fill="#132f52"/>
+    <path id="Vector-3" data-name="Vector" d="M2,0A2,2,0,1,0,4,2,2.006,2.006,0,0,0,2,0Z" transform="translate(10 10)" fill="#132f52"/>
+    <path id="Vector-4" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(0 0)" fill="#132f52" opacity="0"/>
+  </g>
+</svg>

src/components/Folderlist/index.js

@@ -0,0 +1,145 @@
+import React from "react";
+
+// ? images
+import folder from "./images/folder-open.svg";
+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";
+
+const Folderlists = ({ items }) => {
+  return (
+    <section className="flex flex-row items-center justify-around mt-5">
+      {items.map((item, index) => (
+        <div
+          className="flex flex-col bg-white border-2 rounded-lg p-4"
+          style={{ borderColor: "#EEEEEE", minWidth: "330px" }}
+          key={index}
+        >
+          <div className="flex flex-row justify-between items-center">
+            <img src={item.icon} className="w-14" />
+            <div className="self-start flex flex-row-reverse">
+              <img
+                src={item.dropDownIcon}
+                className="rotate-90 w-5 cursor-pointer mr-3"
+              />
+              {item.users.slice(0, 3).map((user, i) => (
+                <img
+                  key={i}
+                  src={user.picture}
+                  className="w-10"
+                  style={{ marginLeft: "-15px" }}
+                />
+              ))}{" "}
+            </div>
+          </div>
+          <p style={{ color: "#00253A" }} className="text-xs font-bold mt-3">
+            {item.title}
+          </p>
+          <p style={{ color: "#132F52" }} className="text-xs mt-2">
+            {item.memory} <span className="">گیگابایت</span>
+          </p>
+          <p style={{ color: "#132F52" }} className="text-xs mt-1 text-left">
+            {item.fileNum} <span className="">فایل</span>
+          </p>
+        </div>
+      ))}
+    </section>
+  );
+};
+
+export default Folderlists;
+
+Folderlists.defaultProps = {
+  items: [
+    {
+      icon: folder,
+      title: "پوشه فایل‌های متفرقه آزمون 1400",
+      memory: 44,
+      fileNum: 344,
+      dropDownIcon: more,
+      users: [],
+    },
+    {
+      icon: folder,
+      title: "پوشه فایل‌های متفرقه آزمون 1400",
+      memory: 44,
+      fileNum: 344,
+      dropDownIcon: more,
+      users: [
+        {
+          picture: pic1,
+          name: "مهدی",
+          fname: "عندلیب",
+          product: "کتاب ریاضی کلاس اول",
+        },
+      ],
+    },
+    {
+      icon: folder,
+      title: "پوشه فایل‌های متفرقه آزمون 1400",
+      memory: 44,
+      fileNum: 344,
+      dropDownIcon: more,
+      users: [
+        {
+          picture: pic1,
+          name: "مهدی",
+          fname: "عندلیب",
+          product: "کتاب ریاضی کلاس اول",
+        },
+        {
+          picture: pic2,
+          name: "سعید",
+          fname: "سعیدی",
+          product: "کتاب ریاضی کلاس دوم",
+        },
+      ],
+    },
+    {
+      icon: folder,
+      title: "پوشه فایل‌های متفرقه آزمون 1400",
+      memory: 44,
+      fileNum: 344,
+      dropDownIcon: more,
+      users: [
+        {
+          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: "کتاب فیزیک کلاس سول",
+        },
+      ],
+    },
+  ],
+};

src/components/Playlist/index.js

@@ -45,28 +45,28 @@ Playlist.defaultProps = {
     {
       icon: document,
       title: "عکس‌ها",
-      percent: "درصد استفاده شده",
+      percent: "27 درصد استفاده شده",
       memory: 44,
       fileNum: 344,
     },
     {
       icon: musicSquare,
       title: "صوتی",
-      percent: "درصد استفاده شده",
+      percent: "27 درصد استفاده شده",
       memory: 44,
       fileNum: 444,
     },
     {
       icon: videoPlay,
       title: "ویدئو",
-      percent: "درصد استفاده شده",
+      percent: "27 درصد استفاده شده",
       memory: 96,
       fileNum: 75,
     },
     {
       icon: gallery,
       title: "فایل‌های مختلف",
-      percent: "درصد استفاده شده",
+      percent: "27 درصد استفاده شده",
       memory: 92,
       fileNum: 71,
     },