danovinTasks/src/components/Folderlist/index.js

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: "کتاب فیزیک کلاس سول",
        },
      ],
    },
  ],
};