diff --git a/src/App.js b/src/App.js index d8ac3b8..4692ead 100644 --- a/src/App.js +++ b/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() { {/* */} {/* */} {/* */} - + {/* */} + {/* */} diff --git a/src/components/Folderlist/images/folder-open.svg b/src/components/Folderlist/images/folder-open.svg new file mode 100644 index 0000000..b2ac890 --- /dev/null +++ b/src/components/Folderlist/images/folder-open.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/Folderlist/images/more.svg b/src/components/Folderlist/images/more.svg new file mode 100644 index 0000000..4db080c --- /dev/null +++ b/src/components/Folderlist/images/more.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/Folderlist/images/profile-pic1.svg b/src/components/Folderlist/images/profile-pic1.svg new file mode 100644 index 0000000..5150d58 --- /dev/null +++ b/src/components/Folderlist/images/profile-pic1.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/Folderlist/images/profile-pic2.svg b/src/components/Folderlist/images/profile-pic2.svg new file mode 100644 index 0000000..190287d --- /dev/null +++ b/src/components/Folderlist/images/profile-pic2.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/Folderlist/images/profile-pic3.svg b/src/components/Folderlist/images/profile-pic3.svg new file mode 100644 index 0000000..c37ab59 --- /dev/null +++ b/src/components/Folderlist/images/profile-pic3.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/Folderlist/index.js b/src/components/Folderlist/index.js new file mode 100644 index 0000000..5ad06e8 --- /dev/null +++ b/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 ( +
+ {items.map((item, index) => ( +
+
+ +
+ + {item.users.slice(0, 3).map((user, i) => ( + + ))}{" "} +
+
+

+ {item.title} +

+

+ {item.memory} گیگابایت +

+

+ {item.fileNum} فایل +

+
+ ))} +
+ ); +}; + +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: "کتاب فیزیک کلاس سول", + }, + ], + }, + ], +}; diff --git a/src/components/Playlist/index.js b/src/components/Playlist/index.js index 31db4a2..81893b7 100644 --- a/src/components/Playlist/index.js +++ b/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, },