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

Merge branch 'market-toggle-position' of WrenchBoard/Users-Wrench into master

Browse Source
This commit is contained in:
Olusesan Ameye
2023-06-21 10:52:13 +00:00
committed by Gogs
parent 3a3503447a 8f1d2b6584
commit f106e17ce6
2 changed files with 28 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Helpers/SelectBox/index.jsx
+2 -2
View File
@@ -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 || ""}`}
>
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">