danovinTasks/src/components/Folderlist/index.js

import React from "react";

import "./index.scss";

// ? 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 gap-4 items-center mt-5 no-scrollbar tabbar overflow-x-scroll scrolling-touch"
      onMouseDown={(e) => {
        const slider = window.document.querySelector(".tabbar");
        window.isDown = true;
        window.startX = e.pageX - slider.offsetLeft;
        window.scrollLeft = slider.scrollLeft;
      }}
      onMouseLeave={(e) => {
        window.isDown = false;
      }}
      onMouseUp={(e) => {
        window.isDown = false;
      }}
      onMouseMove={(e) => {
        const slider = window.document.querySelector(".tabbar");
        if (!window.isDown) return;
        e.preventDefault();
        const x = e.pageX - slider.offsetLeft;
        const walk = (x - window.startX) * 1;
        slider.scrollLeft = window.scrollLeft - walk;
      }}
    >
      {items.map((item, index) => (
        <div
          className="flex flex-col border-2 rounded-lg p-4"
          style={{
            borderColor: "#EEEEEE",
            minWidth: "330px",
            backgroundColor: "#FBFBFB",
          }}
          onClick={(e) => {
            if (window.isDown) return e.preventDefault();
            ///do here
          }}
          aria-current="page"
          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, 8).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: "کتاب فیزیک کلاس سول",
        },
      ],
    },
    {
      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: "کتاب فیزیک کلاس سول",
        },
      ],
    },
  ],
};