From 8f1d2b65849ab767b0052f85810dcd47b9af3980 Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Wed, 21 Jun 2023 10:02:47 +0100
Subject: [PATCH] market category toggle position changed

---
 src/components/Helpers/SelectBox/index.jsx |  4 +-
 src/components/MarketPlace/MainSection.jsx | 43 +++++++++++++---------
 2 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/src/components/Helpers/SelectBox/index.jsx b/src/components/Helpers/SelectBox/index.jsx
index c2fa678..512ab36 100644
--- a/src/components/Helpers/SelectBox/index.jsx
+++ b/src/components/Helpers/SelectBox/index.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import useToggle from "../../../hooks/useToggle";
 
-function SelectBox({ datas = [], className, action, contentBodyClasses }) {
+function SelectBox({ datas = [], className, action, contentBodyClasses, position }) {
   const [item, setItem] = useState(datas[0]);
   // custom hook
   const [toggle, setToggle] = useToggle(false);
@@ -49,7 +49,7 @@ function SelectBox({ datas = [], className, action, contentBodyClasses }) {
 
           <div
             style={{ boxShadow: "0px 4px 87px 0px #0000002B" }}
-            className={`drop-down-content w-[120px] bg-white dark:bg-dark-white   rounded-[4px] p-3 absolute right-0 top-[100%] z-20 ${
+            className={`drop-down-content w-[120px] bg-white dark:bg-dark-white   rounded-[4px] p-3 absolute ${position =='left' ? 'left-0' : 'right-0'} top-[100%] z-20 ${
               toggle ? "active" : ""
             } ${contentBodyClasses || ""}`}
           >
diff --git a/src/components/MarketPlace/MainSection.jsx b/src/components/MarketPlace/MainSection.jsx
index 4f22f3a..90eb038 100644
--- a/src/components/MarketPlace/MainSection.jsx
+++ b/src/components/MarketPlace/MainSection.jsx
@@ -3,6 +3,7 @@ import DataIteration from "../Helpers/DataIteration";
 import AvailableJobsCard from "../Cards/AvailableJobsCard";
 import ListView from '../../assets/images/list-view.png'
 import GridView from '../../assets/images/grid-view.svg'
+import SelectBox from "../Helpers/SelectBox";
 
 export default function MainSection({
   className,
@@ -27,6 +28,16 @@ export default function MainSection({
   const tabHandler = (value) => {
     setTab(value);
   };
+
+   // Handles the category selection on mobile view
+   const handleSetCategory = (value) => {
+    for (let i in marketCategories) {
+      if (marketCategories[i] == value) {
+        setTab(i);
+      }
+    }
+  };
+
   useEffect(() => {
     if (tab === "All") {
       setProducts(marketPlaceProduct);
@@ -41,21 +52,9 @@ export default function MainSection({
   return (
     <div className={`market-place-section w-full ${className || ""}`}>
       <div className="market-place-wrapper w-full">
-        {/* contentDisplay toggler */}
-        <div className="w-full flex items-center justify-end">
-          <div className="p-2 w-[35px] h-[35px] bg-white dark:bg-slate-200 rounded-lg">
-              <img 
-                title={contentDisplay=='grid'? 'list view' : 'grid view'}
-                onClick={()=>setContentDisplay((prev)=>prev=='grid'? 'list' : 'grid')}
-                src={contentDisplay=='grid'? ListView : GridView}
-                className="w-full h-full cursor-pointer" alt="view" 
-              />
-          </div>
-        </div>
-        {/* end of contentDisplay toggler */}
-        <div className="filter-navigate-area lg:flex justify-between mb-8 items-center">
-          <div className="tab-item lg:mb-0 mb-5">
-            <div className="md:flex md:space-x-8 space-x-2">
+        <div className="filter-navigate-area flex justify-between items-center mb-8">
+          <div className="tab-item w-full flex items-center">
+            <div className="hidden lg:flex md:space-x-8 space-x-2">
               {mappedArray.map(({ key, value }) => (
                 <span
                 key={key}
@@ -70,16 +69,26 @@ export default function MainSection({
                 </span>
               ))}
             </div>
+            {/* market categories on screen smaller than large screen */}
+            <div className="w-[80%] lg:hidden">
+              <SelectBox
+                action={handleSetCategory}
+                datas={Object.values(marketCategories)}
+                className="Update-table-dropdown"
+                contentBodyClasses="w-auto min-w-max"
+                position='left'
+              />
+            </div>
           </div>
           {/* contentDisplay toggler */}
-          {/* <div className="p-2 w-[35px] h-[35px] bg-white dark:bg-slate-200 rounded-lg">
+          <div className="p-2 w-[35px] h-[35px] bg-white dark:bg-slate-200 rounded-lg">
               <img 
                 title={contentDisplay=='grid'? 'list view' : 'grid view'}
                 onClick={()=>setContentDisplay((prev)=>prev=='grid'? 'list' : 'grid')}
                 src={contentDisplay=='grid'? ListView : GridView}
                 className="w-full h-full cursor-pointer" alt="view" 
               />
-          </div> */}
+          </div>
           {/* end of contentDisplay toggler */}
         </div>
         <div className="filter-navigate-content w-full min-h-screen">