update 3 files and delete 96 files

src/components/FooterDesign/FooterDesign2/index.js

@@ -2,13 +2,6 @@
 
 import React from "react";
 
-import "./FooterDesign1.scss";
-
-import enamad from "../../../assets/images/enamad-pic.svg";
-import samandehi from "../../../assets/images/samandehi-pic.svg";
-
-import lightBlueLine from "../../../assets/icons/light-blue-line.svg";
-
 const FooterDesign1 = ({ footerItems, array }) => {
   return (
     <footer className="p-6 flex flex-col md:flex-row justify-around items-start md:items-start relative bg-white">
@@ -27,12 +20,12 @@ const FooterDesign1 = ({ footerItems, array }) => {
         ))}
       </div>
       <div className="flex items-center mt-10 md:mt-0">
-        <img src={enamad} alt="" className="w-28 ml-10" />
-        <img src={samandehi} alt="" className="w-28" />
+        <img src="images/enamad-pic.svg" alt="" className="w-28 ml-10" />
+        <img src="images/samandehi-pic.svg" alt="" className="w-28" />
       </div>
       {/* line */}
       <img
-        src={lightBlueLine}
+        src="images/light-blue-line.svg"
         alt=""
         className="hidden sm:block absolute bottom-5 left-20"
       />

src/components/FooterDesign/index.js

@@ -1,10 +1,12 @@
 import React, { useState } from "react";
 
 import Footer from "./Footer";
+import FooterDesign2 from "./FooterDesign2";
 
 function FooterDesign() {
   const list = {
     1: <Footer />,
+    2: <FooterDesign2 />,
   };
   const [type, setType] = useState(1);
   return (

src/components/FormFields/FormInput/index.js

@@ -3,10 +3,10 @@
 import React from "react";
 import { useForm } from "react-hook-form";
 
-import DateRangePicker from "../DateRangePicker";
-import Input from "../AnimatedInput/Input";
-import CustomSelectBox from "../CustomSelectBox";
-import CustomSwitch from "../CustomSwitch";
+import DateRangePicker from "../../Datepicker/DateRangePicker";
+import Input from "../../AnimatedInput/Input";
+import CustomSelectBox from "../../SelectBox/CustomSelectBox";
+import CustomSwitch from "../../SwitchDesign/CustomSwitch";
 
 const FormInput = ({ items }) => {
   const { register, getValues } = useForm();

src/components/FormFields/index.js

@@ -0,0 +1,25 @@
+import React, { useState } from "react";
+
+import FormInput from "./FormInput";
+
+function FormFields() {
+  const list = {
+    1: <FormInput />,
+  };
+  const [type, setType] = useState(1);
+  return (
+    <div className="w-full flex flex-col items-center">
+      <select
+        className="mb-10 w-20 bg-gray-200"
+        onChange={(e) => setType(e.target.value)}
+      >
+        {Object.keys(list).map((option, index) => (
+          <option key={index}>{option}</option>
+        ))}
+      </select>
+      {list[type]}
+    </div>
+  );
+}
+
+export default FormFields;

src/components/MiniComponents/FolderTree/index.js

@@ -1,11 +1,5 @@
 import React, { useState } from "react";
 
-import arrow from "./images/arrow.svg";
-import selectedArrow from "./images/selectedArrow.svg";
-
-import icon1 from "./images/icon1.svg";
-import opened from "./images/opened.svg";
-
 const FolderState = ({ items }) => {
   let [selected, setSelected] = useState(1);
   let [top, setTop] = useState(1);
@@ -28,7 +22,17 @@ const FolderState = ({ items }) => {
   );
 };
 
-const FolderTree = ({ items, pid, selected, setSelected, setTop }) => {
+const FolderTree = ({
+  items,
+  pid,
+  selected,
+  setSelected,
+  setTop,
+  arrow,
+  selectedArrow,
+  icon1,
+  opened,
+}) => {
   const [expands, setExpand] = useState(
     items.filter((item) => item.exapnd).map((item) => item.id)
   );
@@ -100,6 +104,11 @@ const FolderTree = ({ items, pid, selected, setSelected, setTop }) => {
 export default FolderState;
 
 FolderState.defaultProps = {
+  arrow: "images/FolderTreearrow.svg",
+  selectedArrow: "images/FolderTreeselectedArrow.svg",
+  icon1: "images/FolderTreeicon1.svg",
+  opened: "images/FolderTreeopened.svg",
+
   items: [
     {
       id: 1,

src/components/Tabels/GridListTable/index.js

@@ -0,0 +1,20 @@
+import React from "react";
+import FolderTree from "../../MiniComponents/FolderTree";
+import ReactTable5 from "../ReactTable5";
+
+const GridListTable = () => {
+  return (
+    <section className="flex flex-row">
+      {/* right */}
+      <div className="w-[265px] " style={{ backgroundColor: "#FBFBFB" }}>
+        <FolderTree />
+      </div>
+      {/* left */}
+      <div className="flex-1">
+        <ReactTable5 />
+      </div>
+    </section>
+  );
+};
+
+export default GridListTable;

src/components/Tabels/ReactTable5/BasicTable.js

@@ -1,17 +1,11 @@
 import React, { useMemo, useState, useRef } from "react";
 
-import "./index.scss";
-
 import MOCK_DATA2 from "./MOCK_DATA2.json";
 
 import { GlobalFilter } from "./GlobalFilter";
 
 import { COLUMNS } from "./COLUMNS";
 
-import grid from "./grid.svg";
-import list from "./list.svg";
-import graySearchIcon from "./gray-search-icon.svg";
-
 import RenderRowSubComponent from "./RenderRowSubComponent";
 import EditRow from "./EditRow";
 
@@ -25,8 +19,8 @@ import {
   useColumnOrder,
   useExpanded,
 } from "react-table";
-import ButtonNewDesign from "../ButtonNewDesign";
-import Button from "../Button";
+
+import Button from "../../ButtonDesign/Button";
 import ViewEdit from "./ViewEdit";
 
 export const SelectColumnFilter = ({
@@ -86,7 +80,7 @@ export const SelectColumnFilter = ({
   );
 };
 
-const BasicTable = ({ addTab, activeTab }) => {
+const BasicTable = ({ addTab, activeTab, grid, list, graySearchIcon }) => {
   const data = useMemo(() => MOCK_DATA2, []);
   // console.log(data);
 
@@ -318,4 +312,8 @@ const BasicTable = ({ addTab, activeTab }) => {
 
 export default BasicTable;
 
-BasicTable.defaultProps = {};
+BasicTable.defaultProps = {
+  grid: "images/ReactTable5grid.svg",
+  list: "images/ReactTable5list.svg",
+  graySearchIcon: "images/ReactTable5gray-search-icon.svg",
+};

src/components/Tabels/ReactTable5/GlobalFilter.js

@@ -1,13 +1,9 @@
 import React, { useState } from "react";
 import { useAsyncDebounce } from "react-table";
 
-import search from "./search-normal.svg";
-import cancleIcon from "./zarbedar-icon.svg";
-
 export const GlobalFilter = ({
   filter,
   setFilter,
-  searchIcon,
   bgColor,
   borderColor,
   textColor,
@@ -27,14 +23,14 @@ export const GlobalFilter = ({
     <div className="flex flex-row-reverse items-center relative ml-2 w-full">
       {activeSearchBox && (
         <img
-          src={cancleIcon}
+          src="images/ReactTable5zarbedar-icon.svg"
           alt=""
           className="w-3 h-3 absolute left-7 cursor-pointer"
           onClick={() => setActiveSearchBox(false)}
         />
       )}
       <img
-        src={searchIcon}
+        src="images/ReactTable5search-normal.svg"
         alt=""
         className="w-4 h-4 absolute left-2 cursor-pointer"
       />
@@ -59,7 +55,6 @@ export const GlobalFilter = ({
 };
 
 GlobalFilter.defaultProps = {
-  searchIcon: search,
   bgColor: "bg-[#F9FBFF]",
   borderColor: "border-[#B5D6FF]",
   textColor: "text-blue-400",

src/components/Tabels/ReactTable5/ViewEdit.js

@@ -1,6 +1,5 @@
 import React, { useState } from "react";
-import Button from "../Button";
-import ButtonNewDesign from "../ButtonNewDesign";
+import Button from "../../ButtonDesign/Button";
 import EditRow from "./EditRow";
 
 const ViewEdit = ({ row }) => {

src/components/Tabels/ReactTable5/index.js

@@ -1,14 +1,7 @@
 // it has style inside index.scss ---> // Start ReactTable5 && end ReactTable5
 
 import React, { useRef, useState } from "react";
-
 import BasicTable from "./BasicTable";
-import TitleSubtitle from "../TitleSubtitle";
-
-import MultiRangeInput from "./MultiRangeInput";
-
-import grayLeftArrow from "./gray-arrow-left.svg";
-import { BreadCrumb } from "../BreadCrumb";
 
 const ReactTable5 = ({ breadCrumbs, breadCrumb }) => {
   const [tabs, setTabs] = useState([
@@ -54,7 +47,7 @@ const ReactTable5 = ({ breadCrumbs, breadCrumb }) => {
                     breadCrumb.active ? "text-blue-900" : "text-blue-400"
                   }`}
                 >
-                  <img src={grayLeftArrow} />
+                  <img src="images/ReactTable5gray-arrow-left.svg" />
                 </div>
               )}
             </div>

src/components/Tabels/Table/index.js

@@ -0,0 +1,165 @@
+import React, { useState } from "react";
+
+const TableDesign1 = ({ tableItems, tableSubItems }) => {
+  const [sortedField, setSortedField] = useState(null);
+
+  if (sortedField !== null) {
+    tableSubItems.sort((a, b) => {
+      if (a.payedPrice > b.payedPrice) {
+        return -1;
+      }
+    });
+  }
+
+  return (
+    <div className="flex flex-col">
+      <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+        <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
+          <div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
+            <table className="min-w-full divide-y divide-gray-200">
+              <thead className="bg-gray-50">
+                {tableItems.map((tableItem, index) => (
+                  <tr className="" key={index}>
+                    <th
+                      scope="col"
+                      className="text-blue-400 font-light text-right text-sm p-4"
+                    >
+                      {tableItem.title}
+                    </th>
+                    <th
+                      scope=""
+                      className="text-blue-400 font-light text-right text-sm p-4 "
+                    >
+                      <div className="flex flex-row items-center">
+                        {tableItem.status}
+                        <div className="mr-3 flex flex-col">
+                          <img
+                            src="images/Tablearrow-up.svg"
+                            alt=""
+                            className="w-4 cursor-pointer"
+                          />
+                          <img
+                            src="images/Tablearrow-up.svg"
+                            alt=""
+                            className="w-4 cursor-pointer rotate-180"
+                          />
+                        </div>
+                      </div>
+                    </th>
+                    <th
+                      scope="col"
+                      className="text-blue-400 font-light text-right text-sm p-4"
+                    >
+                      <div className="flex flex-row items-center">
+                        {tableItem.date}
+                        <div className="mr-3 flex flex-col">
+                          <img
+                            src="images/Tablearrow-up.svg"
+                            alt=""
+                            className="w-4 cursor-pointer"
+                            // onClick={() => setSortedField}
+                          />
+                          <img
+                            src="images/Tablearrow-up.svg"
+                            alt=""
+                            className="w-4 cursor-pointer rotate-180"
+                          />
+                        </div>
+                      </div>
+                    </th>
+                    <th
+                      scope="col"
+                      className="text-blue-400 font-light text-right text-sm p-4"
+                    >
+                      <div className="flex flex-row items-center">
+                        {tableItem.payedPrice}
+                        <div className="mr-3 flex flex-col">
+                          <img
+                            src="images/Tablearrow-up.svg"
+                            alt=""
+                            className="w-4 cursor-pointer"
+                            onClick={() => setSortedField()}
+                          />
+                          <img
+                            src="images/Tablearrow-up.svg"
+                            alt=""
+                            className="w-4 cursor-pointer rotate-180"
+                            // onClick={() => setSortedField()}
+                          />
+                        </div>
+                      </div>
+                    </th>
+                  </tr>
+                ))}
+              </thead>
+              <tbody className="bg-white divide-y divide-gray-200">
+                {tableSubItems.map((tableSubItem, i) => (
+                  <tr key={i}>
+                    <td className="p-4 whitespace-nowrap text-base font-light">
+                      {tableSubItem.title}
+                    </td>
+                    <td
+                      className={`p-4 whitespace-nowrap text-base font-light 
+                        ${
+                          tableSubItem.status
+                            ? "text-green-400"
+                            : "text-red-400"
+                        }`}
+                    >
+                      {tableSubItem.status ? "فعال" : "غیر فعال"}
+                    </td>
+                    <td className="p-4 whitespace-nowrap text-base font-light">
+                      {tableSubItem.date}
+                    </td>
+                    <td className="p-4 whitespace-nowrap text-base font-light">
+                      {tableSubItem.payedPrice} ریال
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TableDesign1;
+
+TableDesign1.defaultProps = {
+  tableItems: [
+    {
+      title: "عنوان",
+      status: "وضعیت",
+      date: "تاریخ",
+      payedPrice: "مبلغ پرداختی",
+    },
+  ],
+  tableSubItems: [
+    {
+      title: "مایکروویر سامسونگ مدل",
+      status: true,
+      date: "1400/09/21",
+      payedPrice: 73,
+    },
+    {
+      title: "آزمون آنلاین درس علوم تجربی",
+      status: false,
+      date: "1400/09/21",
+      payedPrice: 75,
+    },
+    {
+      title: "مایکروویر سامسونگ مدل",
+      status: true,
+      date: "1400/09/21",
+      payedPrice: 25,
+    },
+    {
+      title: "آزمون آنلاین درس علوم تجربی",
+      status: false,
+      date: "1400/09/21",
+      payedPrice: 27,
+    },
+  ],
+};