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