|
|
|
import React from "react";
|
|
|
|
|
|
|
|
import BreadCrumb from "../BreadCrumb";
|
|
|
|
import SearchBox from "../SearchBox";
|
|
|
|
import TitleSubtitle from "../TitleSubtitle";
|
|
|
|
import CardHolder from "../CardHolder";
|
|
|
|
import ButtonNewDesign from "../ButtonNewDesign";
|
|
|
|
import Playlist from "../Playlist";
|
|
|
|
import Folderlists from "../Folderlist";
|
|
|
|
|
|
|
|
import graySearchIcon from "./images/gray-search-icon.svg";
|
|
|
|
import arrowLeft from "./images/arrow-left.svg";
|
|
|
|
import plus from "./images/plus.svg";
|
|
|
|
|
|
|
|
const FileManager = () => {
|
|
|
|
return (
|
|
|
|
<div style={{ backgroundColor: "#FBFBFB" }} className="flex flex-row">
|
|
|
|
{/* ? right Section */}
|
|
|
|
<div className="flex-1 ">
|
|
|
|
<div className="px-7 py-5">
|
|
|
|
{/* ? breadCrumb */}
|
|
|
|
<div className="mb-5">
|
|
|
|
<BreadCrumb />
|
|
|
|
</div>
|
|
|
|
{/* ? pageTitle & searchbox */}
|
|
|
|
<div className="flex flex-row justify-between">
|
|
|
|
{/* ? pageTitle */}
|
|
|
|
<TitleSubtitle />
|
|
|
|
{/* ? searchbox */}
|
|
|
|
<div className="self-end">
|
|
|
|
<SearchBox
|
|
|
|
borderClr={"#EEEEEE"}
|
|
|
|
backgroundColor={"#fff"}
|
|
|
|
inputWidth={"100%"}
|
|
|
|
placeHolderColor={"placeholder-gray-300"}
|
|
|
|
searchIcon={graySearchIcon}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/* cardHolder */}
|
|
|
|
<Playlist />
|
|
|
|
</div>
|
|
|
|
<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">
|
|
|
|
<TitleSubtitle />
|
|
|
|
</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"}
|
|
|
|
padding={"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"}
|
|
|
|
padding={"p-3"}
|
|
|
|
icon={true}
|
|
|
|
buttonIcon={arrowLeft}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<Folderlists />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
{/* left Section */}
|
|
|
|
<CardHolder />
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default FileManager;
|