master
mahdi andalib 3 years ago
parent b0f046a1c8
commit d92222d4b5
  1. BIN
      build.zip
  2. 45
      src/components/CardHolder/index.js
  3. 12
      src/components/FileManager/index.js
  4. 2
      src/components/UploadFile/index.js

Binary file not shown.

@ -1,8 +1,11 @@
import React from "react";
import dropbox from "./images/dropbox.svg";
import googleDrive from "./images/google-drive.svg";
import blue from "./images/blue-icon.svg";
const CardHolder = ({
items,
cardImage,
cardBackgroundColor,
cardBorder,
@ -10,23 +13,30 @@ const CardHolder = ({
cardBorderRadius,
}) => {
return (
<div className="">
{items.map((item, index) => (
<div
className={`w-fit bg-white px-4 py-1 flex flex-row items-center ${cardBorder} ${cardBorderRadius}`}
className={`w-full px-2 py-1 flex flex-row items-center mt-4 ${cardBorder} ${cardBorderRadius}
${item.active === true ? "bg-blue-100" : "bg-white"}
`}
style={{
backgroundColor: cardBackgroundColor,
borderColor: cardBorderColor,
// backgroundColor: cardBackgroundColor,
borderColor: item.active === true ? "#06BACE" : "#EEEEEE",
}}
key={index}
>
<img src={cardImage} className="w-20" />
<div className="flex flex-col mr-2">
<img src={item.icon} className="w-14" />
<div className="flex flex-col mr-2 flex-1">
<p style={{ color: "#00253A" }} className="text-sm">
فضای ذخیره سازی گوگل درایو
{item.title}
</p>
<p className="text-xs text-gray-400 font-light mr-1 mt-2">
فضای باقیمانده 40 گیگابایت از 1000 گیگابایت
{item.des}{" "}
</p>
</div>
</div>
))}
</div>
);
};
@ -38,4 +48,25 @@ CardHolder.defaultProps = {
cardBorder: "border-4",
cardBorderColor: "#EEEEEE",
cardBorderRadius: "rounded-lg",
items: [
{
icon: dropbox,
title: "فضای ذخیره سازی گوگل درایو",
des: "فضای باقیمانده 40 گیگابایت از 1000 گیگابایت",
active: false,
},
{
icon: blue,
title: "فضای ذخیره سازی گوگل درایو",
des: "فضای باقیمانده 40 گیگابایت از 1000 گیگابایت",
active: true,
},
{
icon: dropbox,
title: "فضای ذخیره سازی گوگل درایو",
des: "فضای باقیمانده 40 گیگابایت از 1000 گیگابایت",
active: false,
},
],
};

@ -9,6 +9,7 @@ import CardHolder from "../CardHolder";
import ButtonNewDesign from "../ButtonNewDesign";
import Playlist from "../Playlist";
import Folderlists from "../Folderlist";
import UploadFile from "../UploadFile";
import graySearchIcon from "./images/gray-search-icon.svg";
import arrowLeft from "./images/arrow-left.svg";
@ -95,9 +96,18 @@ const FileManager = () => {
</div>
</div>
{/* left Section */}
<div className="w-3/12 py-5 ">
<div className="w-3/12 py-5 flex flex-col">
<TitleSubtitle />
<SemiDonut />
<div className="px-4" style={{ marginTop: "-113px" }}>
<TitleSubtitle />
<div className="flex flex-col items-center justify-center">
{/* {[0, 1, 2].map((item, index) => (
<CardHolder />
))} */}
<CardHolder /> <UploadFile />
</div>
</div>
</div>
</div>
);

@ -4,7 +4,7 @@ import file from "./images/file.svg";
const index = () => {
return (
<div className="relative bg-white w-fit flex flex-col items-center p-10 rounded-lg border-2 border-dashed border-blue-300">
<div className="relative bg-white w-fit flex flex-col items-center p-10 rounded-lg border-2 border-dashed border-blue-300 mt-5">
<div className=" ">
<img src={file} className="" />
<input

Loading…
Cancel
Save