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.
107 lines
3.5 KiB
107 lines
3.5 KiB
import React from "react"; |
|
|
|
import BreadCrumb from "../MiniComponents/BreadCrumb"; |
|
import SearchBox from "../SearchDesign/SearchBox"; |
|
import TitleSubtitle from "../MiniComponents/TitleSubtitle"; |
|
import CardHolder from "../CardDesgin/CardHolder"; |
|
import Button from "../ButtonDesign/Button"; |
|
import Playlist from "../Playlist"; |
|
import Folderlists from "../Folderlist"; |
|
import UploadFile from "../UploadFile"; |
|
|
|
import BasicTable from "../ReactTable4/index"; |
|
import SemiDonut from "../SemiDonut"; |
|
|
|
const FileManager = ({ buttons }) => { |
|
return ( |
|
<div className="flex flex-row bg-[#FBFBFB]"> |
|
{/* ? right Section */} |
|
<div className="w-9/12 flex flex-col"> |
|
<div className=" p-4"> |
|
{/* ? breadCrumb */} |
|
<div className="mb-5"> |
|
<BreadCrumb /> |
|
</div> |
|
{/* ? pageTitle & searchbox */} |
|
<div className="flex flex-row justify-between"> |
|
{/* ? pageTitle */} |
|
<TitleSubtitle titleBorderClassName={""} /> |
|
{/* ? searchbox */} |
|
<div className="self-end"> |
|
<SearchBox |
|
className={ |
|
"border-[#EEEEEE] focus:border-gray-200 focus:ring-gray-200 placeholder-gray-300" |
|
} |
|
searchIcon="images/FileManagergray-search-icon.svg" |
|
/> |
|
</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 titleBorderClassName={""} /> |
|
</div> |
|
{/* buttons */} |
|
<div className="flex flex-row item-center justify-between self-center gap-2"> |
|
{buttons.map((btn) => ( |
|
<Button |
|
className={`${btn.className} text-xs rounded p-2`} |
|
iconClassName={`bg-transparent mr-1`} |
|
text={btn.name} |
|
icon="images/FileManagerarrow-left.svg" |
|
/> |
|
))} |
|
</div> |
|
</div> |
|
{/* folderLists */} |
|
<Folderlists /> |
|
{/* ? pageTitle */} |
|
<div |
|
className="mt-5 rounded-lg shadow-md w-full" |
|
style={{ backgroundColor: "#FBFBFB" }} |
|
> |
|
{/* <TitleSubtitle /> */} |
|
<BasicTable /> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
{/* left Section */} |
|
<div className="w-3/12 py-5 flex flex-col"> |
|
<TitleSubtitle subTitle={false} titleBorderClassName={""} /> |
|
<SemiDonut /> |
|
<div className="px-4" style={{ marginTop: "-113px" }}> |
|
<TitleSubtitle subTitle={false} titleBorderClassName={""} /> |
|
<div className="flex flex-col items-center justify-center"> |
|
{/* {[0, 1, 2].map((item, index) => ( |
|
<CardHolder /> |
|
))} */} |
|
<CardHolder /> <UploadFile /> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
); |
|
}; |
|
|
|
export default FileManager; |
|
|
|
FileManager.defaultProps = { |
|
buttons: [ |
|
{ |
|
name: "رابط کاربری", |
|
className: "bg-[#4E85E5] text-white", |
|
}, |
|
{ |
|
name: "فرانت اند", |
|
className: |
|
"bg-transparent border border-[#4E85E5] text-[#4E85E5] font-sansbold", |
|
}, |
|
], |
|
};
|
|
|