WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

market category toggle position changed

Browse Source
This commit was merged in pull request #196.
This commit is contained in:
victorAnumudu
2023-06-21 10:02:47 +01:00
parent 3a3503447a
commit 8f1d2b6584
2 changed files with 28 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MarketPlace/MainSection.jsx
+26 -17
View File
@@ -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">