You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

120 lines
4.0 KiB

3 years ago
import React from "react";
import "./index.scss";
3 years ago
import BreadCrumb from "../BreadCrumb";
import SearchBox from "../SearchBox";
import TitleSubtitle from "../TitleSubtitle";
3 years ago
import CardHolder from "../CardHolder";
import ButtonNewDesign from "../ButtonNewDesign";
import Playlist from "../Playlist";
import Folderlists from "../Folderlist";
3 years ago
import UploadFile from "../UploadFile";
3 years ago
3 years ago
import graySearchIcon from "./images/gray-search-icon.svg";
import arrowLeft from "./images/arrow-left.svg";
3 years ago
import BasicTable from "../ReactTable4/index";
import SemiDonut from "../SemiDonut";
3 years ago
const FileManager = () => {
return (
3 years ago
<div style={{ backgroundColor: "#FBFBFB" }} className="flex flex-row">
3 years ago
{/* ? right Section */}
3 years ago
<div className="w-9/12">
3 years ago
<div className="px-7 py-5">
{/* ? breadCrumb */}
<div className="mb-5">
<BreadCrumb />
</div>
{/* ? pageTitle & searchbox */}
<div className="flex flex-row justify-between">
{/* ? pageTitle */}
3 years ago
<TitleSubtitle titleBorderClassName={"ml-2"} />
3 years ago
{/* ? searchbox */}
<div className="self-end">
<SearchBox
className={
"border-[#EEEEEE] focus:border-gray-200 focus:ring-gray-200 placeholder-gray-300"
}
3 years ago
searchIcon={graySearchIcon}
/>
</div>
</div>
{/* cardHolder */}
<Playlist />
3 years ago
</div>
3 years ago
<div className="bg-white">
<div className="flex flex-col px-7 py-5">
{/* pageTitleSubTitle & Buttons */}
<div className="flex flex-row item-center justify-between">
{/* ? pageTitle */}
<div className="flex-1">
3 years ago
<TitleSubtitle titleBorderClassName={"ml-2"} />
</div>
{/* buttons */}
<div className="flex flex-row item-center justify-between self-center gap-2">
<ButtonNewDesign
bgColor={"bg-blue-500"}
bgHoverColor={"hover:bg-blue-600"}
iconBgColor={null}
textColor={"text-white"}
border={"border"}
borderColor={"border-blue-500"}
borderRadius={"rounded"}
fontSize={"text-xs"}
3 years ago
paddingX={"p-3"}
paddingY={"p-3"}
icon={true}
buttonIcon={arrowLeft}
/>
<ButtonNewDesign
bgColor={"bg-blue-100"}
bgHoverColor={"hover:bg-blue-600"}
iconBgColor={null}
textColor={"text-blue-900"}
border={"border"}
borderColor={"border-blue-500"}
borderRadius={"rounded"}
fontSize={"text-xs"}
3 years ago
paddingX={"p-3"}
paddingY={"p-3"}
icon={true}
buttonIcon={arrowLeft}
/>
</div>
</div>
{/* folderLists */}
<Folderlists />
3 years ago
{/* ? pageTitle */}
<div
className="mt-5 rounded-lg shadow-md w-full"
style={{ backgroundColor: "#FBFBFB" }}
>
{/* <TitleSubtitle /> */}
<BasicTable />
</div>
</div>
3 years ago
</div>
</div>
{/* left Section */}
3 years ago
<div className="w-3/12 py-5 flex flex-col">
3 years ago
<TitleSubtitle subTitle={false} titleBorderClassName={"ml-2"} />
3 years ago
<SemiDonut />
3 years ago
<div className="px-4" style={{ marginTop: "-113px" }}>
3 years ago
<TitleSubtitle subTitle={false} titleBorderClassName={"ml-2"} />
3 years ago
<div className="flex flex-col items-center justify-center">
{/* {[0, 1, 2].map((item, index) => (
<CardHolder />
))} */}
<CardHolder /> <UploadFile />
</div>
</div>
3 years ago
</div>
3 years ago
</div>
);
3 years ago
};
3 years ago
export default FileManager;