|
|
|
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",
|
|
|
|
},
|
|
|
|
],
|
|
|
|
};
|