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;