update 8 files

src/App.js

@@ -181,13 +181,13 @@ function App() {
         {/* <ReactTable3 /> */}
 
         {/* ----------------------------$$$ start---------------------------- */}
-        <BreadCrumb />
+        {/* <BreadCrumb /> */}
         {/* <SearchBox /> */}
         {/* <TitleSubtitle /> */}
         {/* <FolderTree /> */}
         {/* ----------------------------$$$ end---------------------------- */}
 
-        {/* <ReactTable4 /> */}
+        <ReactTable4 />
         {/* <ReactTable5 /> */}
 
         {/* ----------------------------$$$ start---------------------------- */}
@@ -209,7 +209,7 @@ function App() {
 
         {/* <FileManager /> */}
 
-        {/* <GridListTable /> */}
+        <GridListTable />
 
         {/* <PopupCard /> */}
 
@@ -265,7 +265,7 @@ function App() {
         {/* <DateRangePicker /> */}
         {/* ----------------------------$$$ end---------------------------- */}
 
-        {/* <FormInput /> */}
+        <FormInput />
 
         {/* <LeafletMap /> */}
 

src/components/FolderTree/index.js

@@ -1,8 +1,5 @@
 import React, { useState } from "react";
 
-import folder from "./images/folder.svg";
-import selectedFolder from "./images/selectedFolder.svg";
-
 import arrow from "./images/arrow.svg";
 import selectedArrow from "./images/selectedArrow.svg";
 
@@ -16,7 +13,7 @@ const FolderState = ({ items }) => {
   return (
     <>
       <div
-        className={`z-0 absolute w-3/12 right-0 py-2 bg-blue-100 transition-all border-r-4 border-blue-600`}
+        className={`z-0 absolute w-[265px] right-0 py-2 bg-blue-300 transition-all border-r-4 border-blue-600`}
         style={{ top: top - 10 }}
       >
         &nbsp;
@@ -35,9 +32,11 @@ const FolderTree = ({ items, pid, selected, setSelected, setTop }) => {
   const [expands, setExpand] = useState(
     items.filter((item) => item.exapnd).map((item) => item.id)
   );
+
   if (!pid) pid = null;
+
   return (
-    <div className={"w-fit pr-3 "}>
+    <div className={"w-fit pr-3"}>
       {items
         .filter((item) => item.pid === pid)
         .map((item, index) => {
@@ -47,7 +46,7 @@ const FolderTree = ({ items, pid, selected, setSelected, setTop }) => {
               <div
                 key={index}
                 className={
-                  "flex flex-row items-center cursor-pointer py-1 "
+                  "flex flex-row items-center cursor-pointer py-2"
                   //  + (selected === item.id ? "bg-blue-200" : "")
                 }
                 onClick={(e) => {
@@ -71,7 +70,6 @@ const FolderTree = ({ items, pid, selected, setSelected, setTop }) => {
                   src={expand ? opened : icon1}
                   className="z-10 w-7  transition-all duration-700"
                 />
-
                 <span
                   className={
                     "z-10   mr-2 " +

src/components/GridListTable/index.js

@@ -6,11 +6,11 @@ const GridListTable = () => {
   return (
     <section className="flex flex-row">
       {/* right */}
-      <div className="w-3/12" style={{ backgroundColor: "#FBFBFB" }}>
+      <div className="w-[265px] " style={{ backgroundColor: "#FBFBFB" }}>
         <FolderTree />
       </div>
       {/* left */}
-      <div className="w-9/12">
+      <div className="flex-1">
         <ReactTable5 />
       </div>
     </section>

src/components/ReactTable5/BasicTable.js

@@ -26,6 +26,7 @@ import {
   useExpanded,
 } from "react-table";
 import ButtonNewDesign from "../ButtonNewDesign";
+import Button from "../Button";
 
 export const SelectColumnFilter = ({
   column: { filterValue, setFilter, preFilteredRows, id, render },
@@ -168,14 +169,8 @@ const BasicTable = ({ addTab, activeTab }) => {
               ) : null
             )
           )}
-          <ButtonNewDesign
-            bgColor={"bg-blue-500"}
-            icon={null}
-            border={"border-0"}
-            borderRadius={"rounded"}
-            fontSize={"text-xs"}
-            paddingX={"p-3"}
-            paddingY={"p-3"}
+          <Button
+            className={"bg-blue-500 rounded text-xs p-3 text-white"}
             text={
               chekedItems.length < page.length ? "انتخاب همه" : "حذف انتخاب"
             }
@@ -188,7 +183,7 @@ const BasicTable = ({ addTab, activeTab }) => {
             }}
           />
         </div>
-        <div className="w-4/12 ">
+        <div className="">
           <GlobalFilter
             filter={globalFilter}
             setFilter={setGlobalFilter}
@@ -271,14 +266,14 @@ const BasicTable = ({ addTab, activeTab }) => {
           {activeList === true && (
             <div
               {...getTableBodyProps()}
-              className="flex flex-row flex-wrap gap-4 items-center justify-center"
+              className="flex flex-wrap gap-5 items-center justify-between "
             >
               {page.map((row, idx) => {
                 prepareRow(row);
                 return (
                   <div
                     {...row.getRowProps()}
-                    className={`flex flex-col items-stretch px-3 py-2 rounded-md w-52 relative ${
+                    className={`flex flex-col min-w-[250px] items-stretch p-4 rounded-md relative  ${
                       chekedItems.includes(row.original.id)
                         ? "bg-[#ddd]"
                         : "bg-[#F3F3F3]"
@@ -297,9 +292,12 @@ const BasicTable = ({ addTab, activeTab }) => {
                       alt={row.original.filePic}
                       className="w-16 mx-auto"
                     />
-                    <p className="text-xs my-3">{row.original.fileName}</p>
+                    <p className="text-xs mb-3 mt-5">{row.original.fileName}</p>
                     <span className="text-xs text-left text-gray-500">
                       {row.original.fileSize}
+                      {console.log("mahdi")}
+                      {console.log(row.original)}
+                      {console.log("mahdi")}
                     </span>
                   </div>
                 );

src/components/ReactTable5/EditRow.js

@@ -7,15 +7,15 @@ const EditRow = ({ row }) => {
     <div
       onClick={() => setOpenModal(false)}
       data-modal-toggle="large-modal"
-      className={`cursor-pointer w-screen h-screen backdrop-filter backdrop-blur-lg bg-opacity-90 bg-gray-600 flex items-center justify-center fixed left-0 top-0
-      ${openModal ? "opacity-80" : "opacity-0 pointer-events-none"}`}
+      className={`cursor-pointer w-screen h-screen backdrop-filter backdrop-blur-lg bg-opacity-90 bg-gray-900 flex items-center justify-center fixed left-0 top-0
+      ${openModal ? "opacity-90" : "opacity-0 pointer-events-none"}`}
     >
       <div
-        className="absolute w-6/12 bg-white p-4 rounded flex flex-row flex-wrap items-center justify-around"
+        className="absolute w-fit bg-white p-4 rounded flex flex-row items-center space-x-10"
         style={{ top: "10%" }}
         onClick={(e) => e.stopPropagation()}
       >
-        <img src={row.original.filePic} className="w-20" />
+        <img src={row.original.filePic} alt="" className="w-20" />
         <span
           role="textbox"
           style={{

src/components/ReactTable5/ViewEdit.js

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import Button from "../Button";
 import ButtonNewDesign from "../ButtonNewDesign";
 import EditRow from "./EditRow";
 
@@ -7,33 +8,21 @@ const ViewEdit = ({ row }) => {
   return (
     <div className="flex flex-row justify-end gap-x-2">
       <div onClick={(e) => e.stopPropagation()}>
-        <ButtonNewDesign
-          bgColor={"bg-blue-400"}
-          bgHoverColor={"hover:bg-blue-600"}
-          textColor={"text-white"}
-          border={"border-0"}
-          borderRadius={"rounded"}
-          fontSize={"text-xs"}
-          paddingX={"p-3"}
-          paddingY={"p-3"}
-          icon={null}
+        <Button
+          className={
+            "bg-blue-400 hover:bg-blue-600 text-white rounded text-xs p-3"
+          }
           text={"نمایش"}
           {...row.getToggleRowExpandedProps()}
         />
       </div>
       <div onClick={(e) => e.stopPropagation()}>
-        <ButtonNewDesign
-          bgColor={"bg-transparent"}
-          bgHoverColor={null}
-          textColor={"text-blue-600"}
-          border={"border"}
-          borderColor={"border-blue-600"}
-          borderRadius={"rounded"}
-          fontSize={"text-xs"}
-          paddingX={"p-3"}
-          paddingY={"p-3"}
-          icon={null}
+        <Button
+          className={
+            "bg-transparent hover:bg-blue-600 hover:text-white border border-blue-600 text-blue-600 rounded text-xs p-3"
+          }
           text={"ویرایش"}
+          {...row.getToggleRowExpandedProps()}
           onClick={() => setSelectedTab(true)}
         />
       </div>