update 5 files

src/App.js

@@ -187,7 +187,7 @@ function App() {
         {/* <FolderTree /> */}
         {/* ----------------------------$$$ end---------------------------- */}
 
-        <ReactTable4 />
+        {/* <ReactTable4 /> */}
         {/* <ReactTable5 /> */}
 
         {/* ----------------------------$$$ start---------------------------- */}
@@ -207,11 +207,11 @@ function App() {
         {/* <ProfilePicNextToEachOther />  */}
         {/* ----------------------------$$$ end---------------------------- */}
 
-        {/* <FileManager /> */}
+        <FileManager />
 
-        <GridListTable />
+        {/* <GridListTable /> */}
 
-        {/* <PopupCard /> */}
+        <PopupCard />
 
         {/* ----------------------------$$$ start---------------------------- */}
         {/* <CircleInCircle /> */}
@@ -219,9 +219,9 @@ function App() {
         {/* <SelectYear /> */}
         {/* ----------------------------$$$ end---------------------------- */}
 
-        {/* <TimeLineComponent /> */}
+        <TimeLineComponent />
 
-        {/* <CardTrelloDesign /> */}
+        <CardTrelloDesign />
 
         {/* <ReligiousTimes /> */}
 
@@ -232,19 +232,19 @@ function App() {
         {/* <CustomToast /> */}
         {/* ----------------------------$$$ end---------------------------- */}
 
-        {/* <CardDesign1 /> */}
+        <CardDesign1 />
 
         {/* ----------------------------$$$ start---------------------------- */}
         {/* <IndianaDragScroll /> */}
         {/* ----------------------------$$$ end---------------------------- */}
 
-        {/* <CardDesign2 /> */}
+        <CardDesign2 />
 
         {/* ----------------------------$$$ start---------------------------- */}
         {/* <CustomToast2 /> */}
         {/* ----------------------------$$$ end---------------------------- */}
 
-        {/* <CardDesign3 /> */}
+        <CardDesign3 />
 
         {/* ----------------------------$$$ start---------------------------- */}
         {/* <DateTime /> */}
@@ -253,13 +253,13 @@ function App() {
         {/* <ProfileInfo /> */}
         {/* ----------------------------$$$ end---------------------------- */}
 
-        {/* <UserProfileInfo /> */}
+        <UserProfileInfo />
 
-        {/* <BoxNextToEachOther /> */}
+        <BoxNextToEachOther />
 
-        {/* <ContactUsInfoCard /> */}
+        <ContactUsInfoCard />
 
-        {/* <RoomCardInfo /> */}
+        <RoomCardInfo />
 
         {/* ----------------------------$$$ start---------------------------- */}
         {/* <DateRangePicker /> */}

src/components/Button/index.js

@@ -7,7 +7,7 @@ const Button = ({ className, iconClassName, icon, text, onClick }) => {
     >
       {text}
       {icon && (
-        <span className={`rounded-full ${iconClassName}}`}>
+        <span className={`${iconClassName}`}>
           <img src={icon} alt="" className="w-full" />
         </span>
       )}

src/components/FileManager/index.js

@@ -13,15 +13,17 @@ import UploadFile from "../UploadFile";
 
 import graySearchIcon from "./images/gray-search-icon.svg";
 import arrowLeft from "./images/arrow-left.svg";
+
 import BasicTable from "../ReactTable4/index";
 import SemiDonut from "../SemiDonut";
+import Button from "../Button";
 
-const FileManager = () => {
+const FileManager = ({ buttons }) => {
   return (
-    <div style={{ backgroundColor: "#FBFBFB" }} className="flex flex-row">
+    <div className="flex flex-row bg-[#FBFBFB]">
       {/* ? right Section */}
-      <div className="w-9/12">
+      <div className="w-9/12 flex flex-col">
-        <div className="px-7 py-5">
+        <div className=" p-4">
           {/* ? breadCrumb */}
           <div className="mb-5">
             <BreadCrumb />
@@ -30,7 +32,6 @@ const FileManager = () => {
           <div className="flex flex-row justify-between">
             {/* ? pageTitle */}
             <TitleSubtitle titleBorderClassName={""} />
-
             {/* ? searchbox */}
             <div className="self-end">
               <SearchBox
@@ -54,34 +55,14 @@ const FileManager = () => {
               </div>
               {/* buttons */}
               <div className="flex flex-row item-center justify-between self-center gap-2">
-                <ButtonNewDesign
+                {buttons.map((btn) => (
-                  bgColor={"bg-blue-500"}
+                  <Button
-                  bgHoverColor={"hover:bg-blue-600"}
+                    className={`${btn.className} text-xs rounded p-2`}
-                  iconBgColor={null}
+                    iconClassName={`bg-transparent mr-1`}
-                  textColor={"text-white"}
+                    text={btn.name}
-                  border={"border"}
+                    icon={arrowLeft}
-                  borderColor={"border-blue-500"}
+                  />
-                  borderRadius={"rounded"}
+                ))}
-                  fontSize={"text-xs"}
-                  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"}
-                  paddingX={"p-3"}
-                  paddingY={"p-3"}
-                  icon={true}
-                  buttonIcon={arrowLeft}
-                />
               </div>
             </div>
             {/* folderLists */}
@@ -100,7 +81,6 @@ const FileManager = () => {
       {/* 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={""} />
@@ -117,3 +97,17 @@ const FileManager = () => {
 };
 
 export default FileManager;
+
+FileManager.defaultProps = {
+  buttons: [
+    {
+      name: "رابط کاربری",
+      className: "bg-[#4E85E5] text-white",
+    },
+    {
+      name: "فرانت اند",
+      className:
+        "bg-transparent border border-[#4E85E5] text-[#4E85E5] font-sansbold",
+    },
+  ],
+};

src/components/Playlist/index.js

@@ -15,30 +15,25 @@ const Playlist = ({ items }) => {
           style={{ borderColor: "#EEEEEE" }}
           key={index}
         >
-          <img src={item.icon} className="w-14 " />
+          <img src={item.icon} className="w-14" alt="" />
           <div className="flex flex-col mr-1">
-            <p style={{ color: "#00253A" }} className="text-sm">
+            <p className="text-sm text-[#00253A]">{item.title}</p>
-              {item.title}
+            <span className="text-xs mt-2 text-[#81818177]">
-            </p>
-            <span style={{ color: "#81818177" }} className="text-xs mt-2">
               {item.percent}
             </span>
           </div>
           <div className="flex flex-col items-center mr-3">
-            <p style={{ color: "#132F52" }} className="font-sansbold text-xs">
+            <p className="font-sansbold text-xs text-[#132F52]">
-              {item.memory}{" "}
+              {item.memory}
               <span className="font-light" style={{ fontSize: "10px" }}>
                 گیگابایت
               </span>
             </p>
-            <p
+            <p className="font-sansbold text-xs mt-2 text-[#132F52]">
-              style={{ color: "#132F52" }}
+              {item.fileNum}
-              className="font-sansbold text-xs mt-2"
-            >
-              {item.fileNum}{" "}
               <span className="font-light" style={{ fontSize: "10px" }}>
                 فایل
-              </span>{" "}
+              </span>
             </p>
           </div>
         </div>

src/components/ReactTable5/BasicTable.js

@@ -297,7 +297,6 @@ const BasicTable = ({ addTab, activeTab }) => {
                     <span className="text-xs text-left text-gray-500">
                       {row.original.fileSize}
                     </span>
-                    <ViewEdit />
                   </div>
                 );
               })}