master
mahdi andalib 3 years ago
parent c7fccd0497
commit 65026c081f
  1. 4
      src/App.js
  2. 8
      src/components/Folderlist/images/folder-open.svg
  3. 8
      src/components/Folderlist/images/more.svg
  4. 8
      src/components/Folderlist/images/profile-pic1.svg
  5. 8
      src/components/Folderlist/images/profile-pic2.svg
  6. 8
      src/components/Folderlist/images/profile-pic3.svg
  7. 145
      src/components/Folderlist/index.js
  8. 8
      src/components/Playlist/index.js

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

@ -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>

After

Width:  |  Height:  |  Size: 1.2 KiB

@ -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>

After

Width:  |  Height:  |  Size: 641 B

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 142 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 52 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 75 KiB

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

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

Loading…
Cancel
Save