delete and edit icon seperator width reduced

src/assets/images/icon-delete.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" id="delete"><g color="#000"><path fill="#ee4c45" style="line-height:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;block-progression:tb;white-space:normal;isolation:auto;mix-blend-mode:normal;solid-color:#000;solid-opacity:1" d="M12 1028.362c-6.626 0-12 5.374-12 12s5.374 12 12 12 12-5.374 12-12-5.374-12-12-12z" font-family="sans-serif" font-weight="400" overflow="visible" transform="translate(0 -1028.362)"></path><path fill="#fff" style="isolation:auto;mix-blend-mode:normal;solid-color:#000;solid-opacity:1" d="M10.5 1034.362v1h-3v1h9v-1h-3v-1h-3zm-2 3v9h7v-9h-7zm1 1h1v7h-1v-7zm2 0h1v7h-1v-7zm2 0h1v7h-1v-7z" overflow="visible" transform="translate(0 -1028.362)"></path></g></svg>

src/assets/images/icon-edit.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 60 60" viewBox="0 0 60 60" id="edit"><path fill="#3B4652" d="M52.9687347,19.3099976l-2.7999878-2.7999878c-0.9099731-0.9100342-2.3899536-0.9100342-3.2999878,0
+		l-1.4129639,1.4129639c0.0185547,0.017395,0.0423584,0.0234985,0.0601196,0.0422974l5.7765503,6.1199341
+		c0.0361328,0.038269,0.0506592,0.0881348,0.0813599,0.1296997l1.5949097-1.5949097
+		C53.8787689,21.7099609,53.8787689,20.2199707,52.9687347,19.3099976z"></path><path fill="#2B79C2" d="M10.8887787,25.5499878H34.998764l7.5900269-7.5900269l1.7599487-1.75V9c0-1.6500244-1.3499756-3-3-3h-32
+		c-1.6599731,0-3,1.3499756-3,3v42c0,1.6499634,1.3400269,3,3,3h32c1.6500244,0,3-1.3500366,3-3V34.0700073l-5.8899536,5.8800049
+		c-0.3099976,0.3199463-0.7000122,0.5599976-1.1199951,0.7099609l-7.2200317,2.5200195
+		c-0.3099976,0.1099854-0.6500244,0.1699829-0.9899902,0.1699829c-0.7800293,0-1.5200195-0.2999878-2.0900269-0.8399658
+		c-0.3399658-0.3400269-0.5799561-0.7400513-0.7299805-1.1600342H10.8887787c-0.5599976,0-1-0.4500122-1-1s0.4400024-1,1-1
+		h15.4199829v-0.0100098l1.7000122-4.8899536H10.8887787c-0.5599976,0-1-0.4500122-1-1c0-0.5500488,0.4400024-1,1-1H28.708786
+		l0.0999756-0.3000488c0.1699829-0.4699707,0.4400024-0.8800049,0.789978-1.1900024l3.4000244-3.4099731H10.8887787
+		c-0.5599976,0-1-0.4500122-1-1S10.3287811,25.5499878,10.8887787,25.5499878z M10.8887787,46.25h24.9099731
+		c0.5599976,0,1,0.4500122,1,1s-0.4400024,1-1,1H10.8887787c-0.5599976,0-1-0.4500122-1-1S10.3287811,46.25,10.8887787,46.25z
+		 M10.8887787,11.75h24.9099731c0.5599976,0,1,0.4500122,1,1s-0.4400024,1-1,1H10.8887787c-0.5599976,0-1-0.4500122-1-1
+		S10.3287811,11.75,10.8887787,11.75z M10.8887787,18.6499634h24.9099731c0.5599976,0,1,0.4500122,1,1c0,0.5500488-0.4400024,1-1,1
+		H10.8887787c-0.5599976,0-1-0.4499512-1-1C9.8887787,19.0999756,10.3287811,18.6499634,10.8887787,18.6499634z"></path><path fill="#3B4652" d="M30.9387665,32.4400024c-0.1099854,0.0999756-0.1900024,0.2299805-0.2399902,0.3699951
+		l-2.5100098,7.2099609c-0.1300049,0.3600464-0.039978,0.7700195,0.2299805,1.0400391
+		c0.2000122,0.1900024,0.4500122,0.289978,0.710022,0.289978c0.1099854,0,0.2199707-0.0200195,0.3300171-0.0599976
+		l7.2099609-2.5100098c0.1400146-0.0499878,0.2700195-0.1300049,0.3800049-0.2399902l12.5599976-12.5599976l-5.9299927-6.2799683
+		L30.9387665,32.4400024z"></path></svg>

src/components/MyJobs/MyJobTable.jsx

@@ -11,6 +11,9 @@ import PaginatedList from "../Pagination/PaginatedList";
 import EditJobPopOut from "../jobPopout/EditJobPopout";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 
+import EditIcon from '../../assets/images/icon-edit.svg'
+import DeleteIcon from '../../assets/images/icon-delete.svg'
+
 export default function MyJobTable({ MyJobList, reloadJobList, className }) {
   // Getting the categories
   const currentJobCart = MyJobList?.data?.categories;
@@ -132,10 +135,10 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
               </div>
             </div>
 
-            <div className="min-w-[110px] max-w-[110px] bg-yellow-300 mx-2 rounded-md flex flex-nowrap space-x-2 justify-center items-center self-end">
+            <div className="h-[33px] w-[150px] flex flex-nowrap items-center self-end">
               <button
                 type="button"
-                className="p-2 w-[60px] h-11"
+                className="p-1 border-2 border-red-400 rounded-md"
                 onClick={() => {
                   setDeleteJobPopout({
                     show: true,
@@ -143,12 +146,12 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
                   });
                 }}
               >
-                [Delete]
+                <img className="w-[21px] h-[21px]" src={DeleteIcon} alt='delete-icon' />
               </button>
-              <span>|</span>
+              <div className="mx-[4px] h-full w-[1px] bg-black dark:bg-dark-gray"></div>
               <button
                 type="button"
-                className="p-2 w-[40px] h-11"
+                className="p-1 border-2 border-sky-blue rounded-md flex items-center"
                 onClick={() => {
                   setEditJob({
                     show: true,
@@ -156,7 +159,8 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
                   });
                 }}
               >
-                Edit
+                <img className="w-[21px] h-[21px]" src={EditIcon} alt='edit-icon' />
+                <span className="text-sm text-sky-blue">Edit</span>
               </button>
             </div>
           </div>

src/components/Resources/CollectionTab.jsx

@@ -43,7 +43,7 @@ export default function CollectionTab({ className, products }) {
               <DataIteration
                 datas={products}
                 startLength={process.env.REACT_APP_ZERO_STATE}
-                endLength={products.length}
+                endLength={products?.length}
               >
                 {({ datas }) => (
                   <CollectionCard key={datas.uniqKey} collectionData={datas} />

src/components/Resources/index.jsx

@@ -1,9 +1,9 @@
 import React, { useState } from "react";
 import { Link } from "react-router-dom";
-import authProfilePic from "../../assets/images/auth-profile-picture.png";
-import profileBanner from "../../assets/images/profile-cover.png";
-import collections from "../../data/collectionplan_data.json";
-import marketPlace from "../../data/marketplace_data.json";
+// import authProfilePic from "../../assets/images/auth-profile-picture.png";
+// import profileBanner from "../../assets/images/profile-cover.png";
+// import collections from "../../data/collectionplan_data.json"; Should this be cleaned off?
+// import marketPlace from "../../data/marketplace_data.json";
 import products from "../../data/product_data.json";
 import Layout from "../Partials/Layout";
 import ActivitiesTab from "./ActivitiesTab";
@@ -12,130 +12,132 @@ import CreatedTab from "./CreatedTab";
 import HiddenProductsTab from "./HiddenProductsTab";
 import OnSaleTab from "./OnSaleTab";
 import OwnTab from "./OwnTab";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
 
 export default function Resources(props) {
-  console.log('RESOURCES=>',props);
-  const onSaleProducts = marketPlace.data;
-  const CreatedSell = marketPlace.data;
-  const CreatedBits = products.datas;
+  // console.log("RESOURCES=>", props);
   // const mainProducts = products.datas;
   const ownProducts = products.datas;
-  const collectionProducts = collections.data;
 
-  const tabs = [
-    {
-      id: 1,
-      name: "onsale",
-      content: "On Sale",
-    },
-    {
-      id: 2,
-      name: "owned",
-      content: "Owned",
-    },
-    {
-      id: 3,
-      name: "created",
-      content: "Created",
-    },
-    {
-      id: 4,
-      name: "hidden",
-      content: "Hidden",
-    },
-    {
-      id: 5,
-      name: "collection",
-      content: "Collection",
-    },
-    {
-      id: 6,
-      name: "activity",
-      content: "Activity",
-    },
-  ];
+  // Resource Props
+  const __resources = props.MyResourceData;
+
+  // Collection Items
+  const collectionProducts = __resources?.collectiondata?.data;
+  const tab_categories = __resources?.tab_categories?.data;
+  const onSaleProducts = __resources?.marketdata?.data;
+  const CreatedSell = __resources?.marketdata?.data;
+  const CreatedBits = __resources?.productdata?.data;
+
+  const [tab, setTab] = useState(tab_categories ? tab_categories[0]?.name : "");
 
-  const [tab, setTab] = useState(tabs[0].name);
   const tabHandler = (value) => {
     setTab(value);
   };
+
+  // Category Components
+  const tabComponents = {
+    onsale: <OnSaleTab products={onSaleProducts} />,
+    owned: <OwnTab products={ownProducts} />,
+    created: (
+      <CreatedTab marketProducts={CreatedSell} mainProducts={CreatedBits} />
+    ),
+    hidden: (
+      <HiddenProductsTab
+        marketProducts={CreatedSell}
+        mainProducts={CreatedBits}
+      />
+    ),
+    collection: <CollectionTab products={collectionProducts} />,
+    activity: <ActivitiesTab />,
+  };
+
+  const defaultTabComponent = <OnSaleTab products={onSaleProducts} />;
+
+  const selectedTabComponent = tabComponents[tab] || defaultTabComponent;
+
+  // Tab Item Component
+  const TabItem = ({ tabValue, isActive }) => {
+    return (
+      <li
+        className={`relative group inline`}
+        onClick={() => tabHandler(tabValue.name)}
+      >
+        <span
+          className={`py-4 sm:border-b-none border-b group-hover:border-purple border-transparent lg:text-xl text-sm tracking-wide font-bold group-hover:text-purple text-dark-gray dark:text-white relative z-10 cursor-pointer ${
+            isActive
+              ? "text-purple border-purple"
+              : "text-dark-gray dark:text-white border-transparent"
+          }`}
+        >
+          {tabValue.content}
+        </span>
+        <span
+          className={`w-5 h-5 group-hover:bg-pink group-hover:text-white text-[10px] rounded-full absolute -top-2 -right-5 flex justify-center items-center ${
+            isActive
+              ? "text-white bg-pink"
+              : "text-thin-light-gray bg-[#F2B8FD]"
+          }`}
+        >
+          16
+        </span>
+      </li>
+    );
+  };
+
+  // Tab List Component
+  const TabList = ({ tabCategories }) => {
+    return (
+      <ul className="lg:flex lg:space-x-14 space-x-8">
+        {tabCategories.length > 0 &&
+          tabCategories?.map((tabValue, idx) => (
+            <TabItem
+              key={tabValue.id}
+              tabValue={tabValue}
+              isActive={tab === tabValue.name || (idx === 0 && tab === "")}
+            />
+          ))}
+      </ul>
+    );
+  };
+
   return (
     <>
       <Layout>
         <div className="nft-authprofile-wrapper w-full">
-          <div className="main-wrapper w-full">
-            <div className="content-wrapper-profile-only w-full mb-6">
-              <div className="auth-tab-content relative mb-10">
-                <div className="lg:flex justify-between">
-                  <div className="tab-items">
-                    <ul className="lg:flex lg:space-x-14 space-x-8">
-                      {tabs &&
-                        tabs.length > 0 &&
-                        tabs.map((tabValue) => (
-                          <li
-                            key={tabValue.id}
-                            className="relative group inline"
-                            onClick={() => tabHandler(tabValue.name)}
-                          >
-                            <span
-                              className={`py-4 sm:border-b-none border-b group-hover:border-purple border-transparent lg:text-xl text-sm tracking-wide font-bold  group-hover:text-purple text-dark-gray dark:text-white relative z-10 cursor-pointer ${
-                                tab === tabValue.name
-                                  ? "text-purple border-purple "
-                                  : "text-dark-gray dark:text-white border-transparent "
-                              }`}
-                            >
-                              {tabValue.content}
-                            </span>
-                            <span
-                              className={`w-5 h-5 group-hover:bg-pink group-hover:text-white  text-[10px]  rounded-full absolute -top-2 -right-5 flex justify-center items-center ${
-                                tab === tabValue.name
-                                  ? "text-white bg-pink"
-                                  : "text-thin-light-gray bg-[#F2B8FD]"
-                              }`}
-                            >
-                              16
-                            </span>
-                          </li>
-                        ))}
-                    </ul>
-                  </div>
-                  <div style={{ transform: "translateY(-22px)" }}>
-                    <Link
-                      to="/upload-product"
-                      className="btn-gradient lg:flex hidden w-[153px] h-[46px] rounded-full text-white justify-center items-center"
-                    >
-                      Upload Product
-                    </Link>
+          {props.MyResourceData.length == 0 ||
+          Object.keys(props.MyResourceData).length == 0 ? (
+            <div className="w-full h-full flex items-center justify-center">
+              <LoadingSpinner size={16} color="sky-blue" />
+            </div>
+          ) : (
+            <div className="main-wrapper w-full">
+              <div className="content-wrapper-profile-only w-full mb-6">
+                <div className="auth-tab-content relative mb-10">
+                  <div className="lg:flex justify-between">
+                    <div className="tab-items">
+                      <ul className="lg:flex lg:space-x-14 space-x-8">
+                        <TabList tabCategories={tab_categories} />
+                      </ul>
+                    </div>
+                    <div style={{ transform: "translateY(-22px)" }}>
+                      <Link
+                        to="/upload-product"
+                        className="btn-gradient lg:flex hidden w-[153px] h-[46px] rounded-full text-white justify-center items-center"
+                      >
+                        Upload Product
+                      </Link>
+                    </div>
                   </div>
+                  <div className="hidden lg:block w-full h-[1px] bg-[#DCD5FE] dark:bg-[#5356fb29] absolute top-[42px] left-0"></div>
                 </div>
-                <div className="hidden lg:block w-full h-[1px] bg-[#DCD5FE] dark:bg-[#5356fb29] absolute top-[42px] left-0"></div>
+              </div>
+
+              <div className="tab-cotainer w-full mb-10">
+                {selectedTabComponent}
               </div>
             </div>
-
-            <div className="tab-cotainer w-full mb-10">
-              {tab === "onsale" ? (
-                <OnSaleTab products={onSaleProducts} />
-              ) : tab === "owned" ? (
-                <OwnTab products={ownProducts} />
-              ) : tab === "created" ? (
-                <CreatedTab
-                  marketProducts={CreatedSell}
-                  mainProducts={CreatedBits}
-                />
-              ) : tab === "hidden" ? (
-                <HiddenProductsTab
-                  marketProducts={CreatedSell}
-                  mainProducts={CreatedBits}
-                />
-              ) : tab === "collection" ? (
-                <CollectionTab products={collectionProducts} />
-              ) : tab === "activity" ? (
-                <ActivitiesTab />
-              ) : (
-                ""
-              )}
-            </div>
-          </div>
+          )}
         </div>
       </Layout>
     </>

src/views/ResourcePage.jsx

@@ -1,24 +1,21 @@
-import React, { useContext, useState, useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import Resources from "../components/Resources";
-import {useSelector} from "react-redux";
 import usersService from "../services/UsersService";
 export default function ResourcePage() {
+  const [MyResourceData, setMyResourceData] = useState([]);
+  const api = new usersService();
 
-    const [MyResourceData, setMyResourceData] = useState([]);
-    const api = new usersService();
+  const getMyResourceData = async () => {
+    try {
+      const res = await api.getResourceList();
+      setMyResourceData(res.data);
+    } catch (error) {
+      throw new Error("Error getting mode");
+    }
+  };
+  useEffect(() => {
+    getMyResourceData();
+  }, []);
 
-    const getMyResourceData = async () => {
-        try {
-            const res = await api.getResourceList();
-            setMyResourceData(res.data);
-        } catch (error) {
-            console.log("Error getting mode");
-        }
-    };
-    useEffect(() => {
-        getMyResourceData();
-    }, []);
-
-    return <Resources
-               MyResourceData={MyResourceData} />;
-}
+  return <Resources MyResourceData={MyResourceData} />;
+}