market list toggle added, thumbnail images added in add pay card page

src/components/MarketPlace/MainSection.jsx

@@ -1,6 +1,8 @@
 import React, { useEffect, useMemo, useState } from "react";
 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'
 
 export default function MainSection({
   className,
@@ -14,6 +16,8 @@ export default function MainSection({
   );
   const [tab, setTab] = useState(Object.keys(marketCategories)[0]);
 
+  let [contentDisplay, setContentDisplay] = useState('grid') // STATE TO HOLD LIST VIEW STYLE
+
   // Convert to array in order to map
   const mappedArray = Object.entries(marketCategories).map(([key, value]) => {
     return { key, value };
@@ -55,16 +59,28 @@ export default function MainSection({
               ))}
             </div>
           </div>
+          {/* contentDisplay toggler */}
+          <div className="p-2 w-[35px] h-[35px] bg-white dark:bg-slate-200 rounded-lg">
+            {/* <div className="p-1 h-full border flex justify-between items-center"> */}
+              <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">
-          <div className="grid lg:grid-cols-3 sm:grid-cols-2 gap-[30px]">
+          <div className={contentDisplay == 'grid' ? 'grid lg:grid-cols-3 sm:grid-cols-2 gap-[30px]' : 'w-full'}>
             <DataIteration
               datas={products}
               startLength={process.env.REACT_APP_ZERO_STATE}
               endLength={products?.length}
             >
               {({ datas }) => (
-                <AvailableJobsCard key={datas.id} datas={datas} />
+                <AvailableJobsCard contentDisplay={contentDisplay} key={datas.id} datas={datas} />
               )}
             </DataIteration>
           </div>