update 8 files

src/components/ReactTable4/BasicTable.js

@@ -26,9 +26,20 @@ import { Settings } from "./Settings";
 import { Checkbox } from "./Checkbox";
 import MOCK_DATA from "./MOCK_DATA.json";
 
-const BasicTable = ({ settingsIcon }) => {
+const BasicTable = ({
-  const columns = React.useMemo(() => COLUMNS, []);
+  settingsIcon,
+  addTab,
+  tabs,
+  delTab,
+  setActivateTab,
+  activeTab,
+}) => {
   const data = useMemo(() => MOCK_DATA, []);
+  const [filtering, setFiltering] = useState(false);
+  const columns = React.useMemo(
+    () => COLUMNS({ filtering, setFiltering, addTab }),
+    []
+  );
 
   const defaultColumn = useMemo(() => {
     return {
@@ -104,9 +115,15 @@ const BasicTable = ({ settingsIcon }) => {
       <div className="flex flex-row items-center justify-between">
         {/* right box */}
         <div className="" style={{ width: "70%" }}>
-          <Tabbar />
+          <Tabbar
+            tabs={tabs}
+            delTab={delTab}
+            setActivateTab={setActivateTab}
+            activeTab={activeTab}
+          />
         </div>
         {/* left box */}
+        {activeTab == 0 ? (
           <div
             className="rounded-md p-2 flex flex-row items-center justify-end"
             style={{ backgroundColor: "#F1F6FF" }}
@@ -142,14 +159,17 @@ const BasicTable = ({ settingsIcon }) => {
             {/* settings icon */}
             {settingsIcon && <Settings />}
           </div>
+        ) : null}
       </div>
+      {activeTab == 0 ? (
+        <>
           <table
             {...getTableProps()}
             className="min-w-full divide-y divide-gray-200"
           >
             <thead className="" style={{ backgroundColor: "#F3F8FF" }}>
-          {headerGroups.map((headerGroup) => (
+              {headerGroups.map((headerGroup, index) => (
-            <tr {...headerGroup.getHeaderGroupProps()}>
+                <tr key={index} {...headerGroup.getHeaderGroupProps()}>
                   {headerGroup.headers.map((column) => (
                     <th
                       {...column.getHeaderProps(column.getSortByToggleProps())}
@@ -171,10 +191,10 @@ const BasicTable = ({ settingsIcon }) => {
               ))}
             </thead>
             {/* filter row */}
-        {/* {selectedFilterRow === !null && (        )} */}
+            {filtering && (
               <thead style={{ backgroundColor: "#FAFBFF" }}>
-          {headerGroups.map((headerGroup) => (
+                {headerGroups.map((headerGroup, index) => (
-            <tr {...headerGroup.getHeaderGroupProps()}>
+                  <tr key={index} {...headerGroup.getHeaderGroupProps()}>
                     {headerGroup.headers.map((column) => (
                       <th {...column.getHeaderProps()} className="py-2 text-sm">
                         {column.canFilter ? column.render("Filter") : null}
@@ -183,6 +203,7 @@ const BasicTable = ({ settingsIcon }) => {
                   </tr>
                 ))}
               </thead>
+            )}
             <tbody
               {...getTableBodyProps()}
               className="divide-y divide-gray-200 bg-white"
@@ -190,14 +211,15 @@ const BasicTable = ({ settingsIcon }) => {
               {page.map((row, idx) => {
                 prepareRow(row);
                 return (
-              <React.Fragment>
+                  <React.Fragment key={idx}>
                     <tr
                       {...row.getRowProps()}
                       //   className={isEven(idx) ? "bg-gray-600" : "bg-white"}
                     >
-                  {row.cells.map((cell) => {
+                      {row.cells.map((cell, index) => {
                         return (
                           <td
+                            key={index}
                             {...cell.getCellProps()}
                             className="p-4 whitespace-nowrap text-xs"
                             role="cell"
@@ -211,8 +233,11 @@ const BasicTable = ({ settingsIcon }) => {
                     {row.isExpanded ? (
                       <tr>
                         <td colSpan={headerGroups[0].headers.length}>
-                      {renderRowSubComponent({ row: row.original })}
+                          {RenderRowSubComponent({
-                      {/* {renderRowSubComponent({ row: row.values })} */}
+                            row: row.original,
+                            columns,
+                          })}
+                          {/* {RenderRowSubComponent({ row: row.values })} */}
                         </td>
                       </tr>
                     ) : null}
@@ -221,12 +246,15 @@ const BasicTable = ({ settingsIcon }) => {
               })}
             </tbody>
             <tfoot
-          className={`bg-blue-900 ${rows.length > 10 ? "w-full" : "hidden"}`}
+              className={`bg-blue-900 ${
+                rows.length > 10 ? "w-full" : "hidden"
+              }`}
             >
-          {footerGroups.map((footerGroup) => (
+              {footerGroups.map((footerGroup, index) => (
-            <tr {...footerGroup.getFooterGroupProps()}>
+                <tr key={index} {...footerGroup.getFooterGroupProps()}>
-              {footerGroup.headers.map((column) => (
+                  {footerGroup.headers.map((column, index) => (
                     <td
+                      key={index}
                       {...column.getFooterProps}
                       className="px-4 py-2 text-right text-xs"
                       style={{ color: "#fff" }}
@@ -238,17 +266,6 @@ const BasicTable = ({ settingsIcon }) => {
               ))}
             </tfoot>
           </table>
-      <pre>
-        <code>
-          {JSON.stringify(
-            {
-              selectedFlatRows: selectedFlatRows.map((row) => row.original),
-            },
-            null,
-            2
-          )}
-        </code>
-      </pre>
           <div className="mt-3 ">
             <span className="text-sm ml-4">
               صفحه{" "}
@@ -294,10 +311,302 @@ const BasicTable = ({ settingsIcon }) => {
             </select>
           </div>
         </>
+      ) : (
+        <EditRow
+          row={
+            rows.find((e) => e.original && +e.original.id === activeTab)
+              ?.original || {}
+          }
+          columns={columns}
+        />
+      )}
+      {/* <pre>
+        <code>
+          {JSON.stringify(
+            {
+              selectedFlatRows: selectedFlatRows.map((row) => row.original),
+            },
+            null,
+            2
+          )}
+        </code>
+      </pre> */}
+    </>
   );
 };
-
+function EditRow({ row, columns }) {
-function renderRowSubComponent({ row }) {
+  console.log(row);
+  const persian = {
+    weight: "وزن",
+    pageNumber: "تعداد صفحات",
+    pageType: "نوع کاغذ",
+    bookNumber: "شماره شابک",
+    publisher: "انتشارات",
+    author: "نویسنده",
+    bookType: "قطع",
+    publishedYear: "سال انتشار",
+  };
+  return (
+    <div
+      className="w-full flex flex-row items-center border-r-4 border-blue-600 p-2"
+      style={{ backgroundColor: "#FAFBFF" }}
+    >
+      {/* right */}
+      <div
+        className="flex flex-row  flex-wrap items-center"
+        style={{ width: "90%" }}
+      >
+        {/* 1 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            نام و نام خانوادگی:
+            <input type="text" className="mr-1 text-black" value={row.name} />
+          </p>
+        </div>
+        {/* 2 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            تاریخ سفارش:
+            <span className="mr-1 text-black">{row.order_date}</span>
+          </p>
+        </div>
+        {/* 3 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            مبلغ سفارش:
+            <span className="mr-1 text-black">{row.order_price}</span>
+          </p>
+        </div>
+        {/* 4 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            شماره سفارش:
+            <span className="mr-1 text-black">{row.order_number}</span>
+          </p>
+        </div>
+        {/* 5 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            شغل کاربر:
+            <span className="mr-1 text-black">{row.user_job}</span>
+          </p>
+        </div>
+        {/* 6 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            وضعیت سفارش:
+            <span className="mr-1 text-black">
+              {columns[5].Cell({ value: row.order_status })}
+            </span>
+          </p>
+        </div>
+        {/* 7 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            سطح اهمیت:
+            <span className="mr-1 text-black">
+              {columns[6].Cell({ value: row.order_level })}
+            </span>
+          </p>
+        </div>
+        {/* 8 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            محل تولد:
+            <span className="mr-1 text-black">{row.birth_place}</span>
+          </p>
+        </div>
+        {/* 9 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            تلفن محل کار:
+            <span className="mr-1 text-black">{row.office_phone}</span>
+          </p>
+        </div>
+        {/* 10 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            تحصیلات:
+            <span className="mr-1 text-black">{row.education}</span>
+          </p>
+        </div>
+        {/* 11 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            تاریخ تولد:
+            <span className="mr-1 text-black">{row.birth_day}</span>
+          </p>
+        </div>
+        {/* 12 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            شغل:
+            <span className="mr-1 text-black">{row.job}</span>
+          </p>
+        </div>
+        {/* 13 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            دانشگاه:
+            <span className="mr-1 text-black">{row.uni}</span>
+          </p>
+        </div>
+        {/* 14 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            رشته تحصیلی:
+            <span className="mr-1 text-black">{row.field_study}</span>
+          </p>
+        </div>
+        {/* 15 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            اخلاق:
+            <span className="mr-1 text-black">{row.behaviour}</span>
+          </p>
+        </div>
+        {/* 16 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            نشانی:
+            <span className="mr-1 text-black">{row.address}</span>
+          </p>
+        </div>
+      </div>
+      {/* left */}
+      <div
+        className="flex flex-col items-end justify-end"
+        style={{ width: "10%" }}
+      >
+        <button
+          className="border rounded w-8/12 text-xs py-2 mb-2 bg-white"
+          style={{ borderColor: "#D53921", color: "#D53921" }}
+        >
+          حذف
+        </button>
+        <button
+          className="border rounded w-8/12 text-xs py-2 bg-white"
+          style={{ borderColor: "#65A9FF", color: "#65A9FF" }}
+        >
+          جزیات بیشتر
+        </button>
+      </div>
+    </div>
+  );
+}
+function RenderRowSubComponent({ row, columns }) {
   console.log(row);
   const persian = {
     weight: "وزن",
@@ -400,7 +709,9 @@ function renderRowSubComponent({ row }) {
             style={{ borderColor: "#65A9FF" }}
           >
             وضعیت سفارش:
-            <span className="mr-1 text-black">{row.order_status}</span>
+            <span className="mr-1 text-black">
+              {columns[5].Cell({ value: row.order_status })}
+            </span>
           </p>
         </div>
         {/* 7 */}
@@ -414,7 +725,9 @@ function renderRowSubComponent({ row }) {
             style={{ borderColor: "#65A9FF" }}
           >
             سطح اهمیت:
-            <span className="mr-1 text-black">{row.order_level}</span>
+            <span className="mr-1 text-black">
+              {columns[6].Cell({ value: row.order_level })}
+            </span>
           </p>
         </div>
         {/* 8 */}

src/components/ReactTable4/Buttons.js

@@ -4,7 +4,7 @@ import edit from "./edit.svg";
 
 import { useState } from "react";
 
-export function Buttons({ row }) {
+export const Buttons = ({ row, addTab }) => {
   const [activeDetails, setActiveDetails] = useState(null);
   return (
     <div className="flex flex-row items-center justify-end">
@@ -13,7 +13,7 @@ export function Buttons({ row }) {
         onClick={() => setActiveDetails(!activeDetails)}
         {...row.getToggleRowExpandedProps()}
       >
-        جزیات
+        جزپیات
         <img
           src={arrowIcon}
           alt=""
@@ -22,10 +22,15 @@ export function Buttons({ row }) {
           }`}
         />
       </button>
-      <div className="mx-1 p-2 rounded border border-gray-300 cursor-pointer ">
+      <div
+        className="mx-1 p-2 rounded border border-gray-300 cursor-pointer"
+        onClick={() => {
+          addTab({ name: row.original.name, id: row.original.id });
+        }}
+      >
         <img src={edit} alt="" className="w-4" />
       </div>
       <img src={more} alt="" className="w-5 cursor-pointer " />
     </div>
   );
-}
+};

src/components/ReactTable4/EditButtons.js

@@ -6,9 +6,9 @@ import DropDown from "./DropDown";
 import filter from "./filter.svg";
 import plus from "./plus.svg";
 
-export function EditButtons({}) {
+export function EditButtons({ setFiltering, filtering, addTab }) {
-  const [activeFilter, setActiveFilter] = useState(null);
+  const [selectedFilterRow, setSelectedFilterRow] = useState(filtering);
-  // const [selectedFilterRow, setSelectedFilterRow] = useState(null);
+  // setFiltering(selectedFilterRow);
 
   return (
     <div className="flex flex-row items-center justify-end">
@@ -16,6 +16,10 @@ export function EditButtons({}) {
       <button
         className="mx-1  flex flex-row items-center p-2 text-xs text-white rounded border-b-2 border-blue-600"
         style={{ backgroundColor: "#65A9FF" }}
+        onClick={() => {
+          console.log("new!!!");
+          addTab({ id: "new", name: "ردیف جدید" });
+        }}
       >
         ثبت جدید
         <img src={plus} alt="" className={`cursor-pointer w-2 mr-1 `} />
@@ -26,8 +30,11 @@ export function EditButtons({}) {
         // onClick={() => setSelectedFilterRow(!selectedFilterRow)}
         alt=""
         className={`mx-1 p-2 rounded border border-blue-300 cursor-pointer w-8 
-        ${activeFilter ? "border" : "border-0"}`}
+        ${selectedFilterRow ? "border" : "border-0"}`}
-        onClick={() => setActiveFilter(!activeFilter)}
+        onClick={() => {
+          setFiltering(!selectedFilterRow);
+          setSelectedFilterRow(!selectedFilterRow);
+        }}
       />
       {/* dropDown */}
       <DropDown />

src/components/ReactTable4/MOCK_DATA.json

@@ -1,5 +1,6 @@
 [
   {
+    "id": 1,
     "name": "خسرو سهرابی",
     "order_date": "1400/11/09",
     "order_price": 1,
@@ -18,6 +19,7 @@
     "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
   },
   {
+    "id": 2,
     "name": "خسرو شکیبایی",
     "order_date": "1340/04/13",
     "order_price": 2,
@@ -36,6 +38,7 @@
     "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
   },
   {
+    "id": 3,
     "name": "علی علوی",
     "order_date": "1330/12/05",
     "order_price": 3,
@@ -54,6 +57,7 @@
     "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
   },
   {
+    "id": 4,
     "name": "پارسا ایرانی",
     "order_date": "1372/01/08",
     "order_price": 4,
@@ -72,6 +76,7 @@
     "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
   },
   {
+    "id": 5,
     "name": "محمد محمدی",
     "order_date": "1389/01/26",
     "order_price": 5,

src/components/ReactTable4/OrderStatus.js

@@ -1,4 +1,6 @@
 export function OrderStatus({ value }) {
+  value = +value;
+
   return (
     <div className="">
       {(() => {
@@ -52,4 +54,3 @@ export function OrderStatus({ value }) {
     </div>
   );
 }
-  

src/components/ReactTable4/ToggleColumns.js

@@ -6,8 +6,10 @@ export const ToggleColumns = ({ allColumns, getToggleHideAllColumnsProps }) => {
       <div>
         <input type="checkbox" {...getToggleHideAllColumnsProps()} /> Toggle All
       </div>
-      {allColumns.map((column) => (
+      {allColumns
-        <div key={column.id}>
+        .filter((column) => column.Header === "string")
+        .map((column, index) => (
+          <div key={index}>
             <label>
               <input type="checkbox" {...column.getToggleHiddenProps()} />
               {column.Header}

src/components/ReactTable4/columns.js

@@ -10,7 +10,7 @@ import { SelectColumnFilter } from "./SelectColumnFilter.js";
 import { SelectColumnFilter2 } from "./SelectColumnFilter2.js";
 import { SliderColumnFilter } from "./SliderColumnFilter.js";
 
-export const COLUMNS = [
+export const COLUMNS = ({ setFiltering, filtering, addTab }) => [
   {
     Header: "نام و نام خانوادگی",
     Footer: "نام و نام خانوادگی",
@@ -57,10 +57,10 @@ export const COLUMNS = [
     Filter: SelectColumnFilter,
   },
   {
-    Header: EditButtons,
+    Header: () => EditButtons({ setFiltering, filtering, addTab }),
     Footer: "ویرایش",
     accessor: "edit",
-    Cell: Buttons,
+    Cell: ({ row }) => Buttons({ row, addTab }),
     disableSortBy: true,
     disableFilters: true,
   },

src/components/ReactTable4/index.js

@@ -1,16 +1,35 @@
-import React, { useRef } from "react";
+import React, { useRef, useState } from "react";
 import BasicTable from "./BasicTable";
 // import useDraggableScroll from "use-draggable-scroll";
 
 import cancleIcon from "./zarbedar-icon.svg";
 
 const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
+  const [tabs, setTabs] = useState([
+    { name: "جدول " + breadCrumbs[breadCrumbs.length - 1].name, id: 0 },
+  ]);
+  let [activeTab, setActivateTab] = useState(0);
+  const stateRef = useRef();
+  const stateActiveRef = useRef();
+  stateRef.current = tabs;
+  stateActiveRef.current = activeTab;
+
+  const addTab = (newTab) => {
+    setActivateTab(newTab.id);
+    if (stateRef.current.find((e) => e.id === newTab.id)) return;
+    setTabs([...stateRef.current, newTab]);
+  };
+  const delTab = (id) => {
+    setTabs(stateRef.current.filter((e) => e.id != id));
+    if (stateActiveRef.current == id) setActivateTab(0);
+  };
+
   return (
     <div className="my-10 w-11/12 mx-auto">
       {/* breadCrumb */}
       <div className="flex flex-row items-center">
         {breadCrumbs.map((breadCrumb, index) => (
-          <div className="flex flex-row items-center">
+          <div className="flex flex-row items-center" key={index}>
             <span
               className={`cursor-pointer text-xs hover:text-blue-900  ${
                 breadCrumb.active ? "text-blue-900" : "text-blue-400"
@@ -42,19 +61,23 @@ const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
           <h2 className="text-xs">{subTitle}</h2>
         </div>
       </div>
-      <Tabbar />
+      {/* <Tabbar tabs={tabs} /> */}
-      <BasicTable />
+      <BasicTable
+        addTab={addTab}
+        tabs={tabs}
+        delTab={delTab}
+        setActivateTab={setActivateTab}
+        activeTab={activeTab}
+      />
     </div>
   );
 };
 window.isDown = false;
 export default ReactTable4;
 
-export function Tabbar({}) {
+export function Tabbar({ tabs, delTab, setActivateTab, activeTab }) {
-  const ref = useRef(null);
-
   // const { onMouseDown } = useDraggableScroll(ref);
-  const tabs = ["فروشگاه دانوین", "مهدی عندلیب"];
+
   return (
     <ul
       className="tabbar flex no-scrollbar overflow-x-scroll scrolling-touch"
@@ -79,17 +102,34 @@ export function Tabbar({}) {
         slider.scrollLeft = window.scrollLeft - walk;
       }}
     >
-      {tabs.map((el) => (
+      {tabs.map((el, index) => (
         <li
+          key={index}
           onClick={(e) => {
             if (window.isDown) return e.preventDefault();
           }}
           aria-current="page"
-          className="flex flex-row items-center text-sm text-center active px-4 py-4 rounded-sm mx-1"
+          className="flex flex-row items-center text-sm text-center active px-4  rounded-sm mx-1"
-          style={{ backgroundColor: "#F1F6FF" }}
+          style={{
+            backgroundColor: activeTab === el.id ? "#92c1fc" : "#F1F6FF",
+
+            color: activeTab === el.id ? "#fff" : "#000",
+          }}
         >
-          <span className="">{el}</span>
+          <div className="h-full py-4" onClick={(e) => setActivateTab(el.id)}>
-          <img src={cancleIcon} className="w-2 h-2 mr-2" />
+            {el.name}
+          </div>
+          {el.id ? (
+            <img
+              src={cancleIcon}
+              className="w-2 h-2 mr-2"
+              alt=""
+              onClick={(e) => {
+                e.preventDefault();
+                delTab(el.id);
+              }}
+            />
+          ) : null}
         </li>
       ))}
     </ul>