Merge branch 'resources-page' of WrenchBoard/Users-Wrench into master
This commit is contained in:
Gogs
@@ -9,13 +9,13 @@ export default function AvailableJobsCard({
|
||||
className,
|
||||
datas,
|
||||
hidden = false,
|
||||
contentDisplay
|
||||
contentDisplay,
|
||||
}) {
|
||||
//debugger;
|
||||
const [marketPopUp, setMarketPopUp] = useState({ show: false, data: {} });
|
||||
const [imageUrl, setImageUrl] = useState("");
|
||||
|
||||
let thePrice = PriceFormatter(
|
||||
let thePrice = PriceFormatter(
|
||||
datas?.price * 0.01,
|
||||
datas?.currency_code,
|
||||
datas?.currency
|
||||
@@ -27,121 +27,136 @@ export default function AvailableJobsCard({
|
||||
}, []);
|
||||
return (
|
||||
<>
|
||||
{contentDisplay == 'grid' ?
|
||||
<div
|
||||
className={`card-style-two w-full h-[426px] p-[20px] bg-white dark:bg-dark-white rounded-2xl section-shadow ${
|
||||
className || ""
|
||||
}`}
|
||||
>
|
||||
<div className="flex flex-col justify-between w-full h-full">
|
||||
<Link to="/shop-details" className="mb-2.5">
|
||||
{contentDisplay == "grid" ? (
|
||||
<div
|
||||
className={`card-style-two w-full h-[426px] p-[20px] bg-white dark:bg-dark-white rounded-2xl section-shadow ${
|
||||
className || ""
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
onClick={() => {
|
||||
setMarketPopUp({ show: true, data: datas });
|
||||
}}
|
||||
className="flex flex-col justify-between w-full h-full"
|
||||
>
|
||||
<h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
|
||||
{datas.title}
|
||||
</h1>
|
||||
</Link>
|
||||
|
||||
<div className="card-two-info flex justify-between items-center">
|
||||
<div className="owned-by flex space-x-2 items-center">
|
||||
<div>
|
||||
<p className="text-thin-light-gray text-sm leading-3">Added</p>
|
||||
<p className="text-base text-dark-gray dark:text-white">
|
||||
{datas.offer_added}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-[1px] bg-light-purple dark:bg-dark-light-purple h-7"></div>
|
||||
<div className="created-by flex space-x-2 items-center flex-row-reverse">
|
||||
<div>
|
||||
<p className="text-thin-light-gray text-sm leading-3 text-right">
|
||||
Expires
|
||||
</p>
|
||||
<p className="text-base text-dark-gray dark:text-white text-right">
|
||||
{datas.expire}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="thumbnail-area w-full">
|
||||
<div
|
||||
className="w-full h-[236px] p-6 rounded-xl overflow-hidden bg-center bg-cover bg-no-repeat"
|
||||
style={{
|
||||
backgroundImage: `url('${imageUrl}')`,
|
||||
}}
|
||||
>
|
||||
<div className="flex justify-center">{datas.description}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="details-area">
|
||||
<div className="product-two-options flex justify-between mb-5 relative">
|
||||
{/* <div className="status">*/}
|
||||
{/* {datas.isActive && (*/}
|
||||
{/* <span className="text-xs px-3 py-1.5 tracking-wide rounded-full bg-gold text-white">*/}
|
||||
{/* Active*/}
|
||||
{/*</span>*/}
|
||||
{/* )}*/}
|
||||
{/* </div>*/}
|
||||
|
||||
{/*<div className=" review flex space-x-2">*/}
|
||||
{/* <button*/}
|
||||
{/* onClick={favoriteHandler}*/}
|
||||
{/* type="button"*/}
|
||||
{/* className={`w-7 h-7 bg-white rounded-full flex justify-center items-center ${*/}
|
||||
{/* addFavorite ? "text-red-500" : "text-thin-light-gray"*/}
|
||||
{/* }`}*/}
|
||||
{/* >*/}
|
||||
{/* <Icons name="star" />*/}
|
||||
{/* </button>*/}
|
||||
{/*</div>*/}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="card-two-info flex justify-between items-center">
|
||||
<div className="owned-by flex space-x-2 items-center">
|
||||
<div>
|
||||
<p className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white">
|
||||
{/* {thePrice} | {datas.timeline_days} day(s) */}
|
||||
{thePrice}
|
||||
<p className="text-thin-light-gray text-sm leading-3">
|
||||
Added
|
||||
</p>
|
||||
<p className="text-sm text-lighter-gray">
|
||||
( {datas.offer_code}) |
|
||||
<span className="italic ml-1">
|
||||
{datas.timeline_days} day(s)
|
||||
</span>
|
||||
<p className="text-base text-dark-gray dark:text-white">
|
||||
{datas.offer_added}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
|
||||
onClick={() => {
|
||||
setMarketPopUp({ show: true, data: datas });
|
||||
}}
|
||||
>
|
||||
View
|
||||
</button>
|
||||
<div className="w-[1px] bg-light-purple dark:bg-dark-light-purple h-7"></div>
|
||||
<div className="created-by flex space-x-2 items-center flex-row-reverse">
|
||||
<div>
|
||||
<p className="text-thin-light-gray text-sm leading-3 text-right">
|
||||
Expires
|
||||
</p>
|
||||
<p className="text-base text-dark-gray dark:text-white text-right">
|
||||
{datas.expire}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="thumbnail-area w-full">
|
||||
<div
|
||||
className="w-full h-[236px] p-6 rounded-xl overflow-hidden bg-center bg-cover bg-no-repeat"
|
||||
style={{
|
||||
backgroundImage: `url('${imageUrl}')`,
|
||||
}}
|
||||
>
|
||||
<div className="flex justify-center">{datas.description}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="details-area">
|
||||
<div className="product-two-options flex justify-between mb-5 relative">
|
||||
{/* <div className="status">*/}
|
||||
{/* {datas.isActive && (*/}
|
||||
{/* <span className="text-xs px-3 py-1.5 tracking-wide rounded-full bg-gold text-white">*/}
|
||||
{/* Active*/}
|
||||
{/*</span>*/}
|
||||
{/* )}*/}
|
||||
{/* </div>*/}
|
||||
|
||||
{/*<div className=" review flex space-x-2">*/}
|
||||
{/* <button*/}
|
||||
{/* onClick={favoriteHandler}*/}
|
||||
{/* type="button"*/}
|
||||
{/* className={`w-7 h-7 bg-white rounded-full flex justify-center items-center ${*/}
|
||||
{/* addFavorite ? "text-red-500" : "text-thin-light-gray"*/}
|
||||
{/* }`}*/}
|
||||
{/* >*/}
|
||||
{/* <Icons name="star" />*/}
|
||||
{/* </button>*/}
|
||||
{/*</div>*/}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div>
|
||||
<p className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white">
|
||||
{/* {thePrice} | {datas.timeline_days} day(s) */}
|
||||
{thePrice}
|
||||
</p>
|
||||
<p className="text-sm text-lighter-gray">
|
||||
( {datas.offer_code}) |
|
||||
<span className="italic ml-1">
|
||||
{datas.timeline_days} day(s)
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
|
||||
onClick={() => {
|
||||
setMarketPopUp({ show: true, data: datas });
|
||||
}}
|
||||
>
|
||||
View
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
:
|
||||
<div className="card-style-two w-full p-8 my-2 flex items-center gap-4 bg-white dark:bg-dark-white rounded-2xl section-shadow">
|
||||
<div className="flex gap-5 items-center w-full">
|
||||
<div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] min-w-[60px] max-w-[60px]">
|
||||
<img src={dataImage2} alt="data" className="w-full h-full" />
|
||||
</div>
|
||||
<div className="flex flex-col flex-[0.9]">
|
||||
<Link to="/shop-details" className="">
|
||||
<h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
|
||||
) : (
|
||||
<div className="card-style-two w-full p-8 my-2 flex items-center gap-4 bg-white dark:bg-dark-white rounded-2xl section-shadow">
|
||||
<div className="flex gap-5 items-center w-full">
|
||||
<div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] min-w-[60px] max-w-[60px]">
|
||||
<img src={dataImage2} alt="data" className="w-full h-full" />
|
||||
</div>
|
||||
<div className="flex flex-col flex-[0.9]">
|
||||
<h1
|
||||
onClick={() => {
|
||||
setMarketPopUp({ show: true, data: datas });
|
||||
}}
|
||||
className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize"
|
||||
>
|
||||
{datas?.title}
|
||||
</h1>
|
||||
</Link>
|
||||
|
||||
<div className="my-2">
|
||||
<p className="text-dark-gray dark:text-white">{datas?.description}</p>
|
||||
</div>
|
||||
<div
|
||||
onClick={() => {
|
||||
setMarketPopUp({ show: true, data: datas });
|
||||
}}
|
||||
className="my-2"
|
||||
>
|
||||
<p className="text-dark-gray dark:text-white">
|
||||
{datas?.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* <div className="card-two-info flex gap-2 items-center">
|
||||
{/* <div className="card-two-info flex gap-2 items-center">
|
||||
<div className="owned-by flex space-x-2 items-center">
|
||||
<div>
|
||||
<p className="text-thin-light-gray text-sm leading-3">Added</p>
|
||||
@@ -162,40 +177,37 @@ export default function AvailableJobsCard({
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="block sm:flex flex-wrap gap-4">
|
||||
<p className="text-sm text-thin-light-gray flex flext-start gap-1">
|
||||
Price: <span className="text-purple">{thePrice}</span>
|
||||
</p>
|
||||
<p className="text-sm text-thin-light-gray">
|
||||
Duration:{" "}
|
||||
<span className="text-purple italic">
|
||||
{" "}
|
||||
{datas?.timeline_days} day(s)
|
||||
</span>
|
||||
</p>
|
||||
<p className="text-sm text-thin-light-gray">
|
||||
Code:{" "}
|
||||
<span className="text-purple">
|
||||
{" "}
|
||||
{datas?.offer_code}
|
||||
</span>
|
||||
</p>
|
||||
<div className="block sm:flex flex-wrap gap-4">
|
||||
<p className="text-sm text-thin-light-gray flex flext-start gap-1">
|
||||
Price: <span className="text-purple">{thePrice}</span>
|
||||
</p>
|
||||
<p className="text-sm text-thin-light-gray">
|
||||
Duration:{" "}
|
||||
<span className="text-purple italic">
|
||||
{" "}
|
||||
{datas?.timeline_days} day(s)
|
||||
</span>
|
||||
</p>
|
||||
<p className="text-sm text-thin-light-gray">
|
||||
Code:{" "}
|
||||
<span className="text-purple"> {datas?.offer_code}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="">
|
||||
<button
|
||||
type="button"
|
||||
className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
|
||||
onClick={() => {
|
||||
setMarketPopUp({ show: true, data: datas });
|
||||
}}
|
||||
>
|
||||
View
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="">
|
||||
<button
|
||||
type="button"
|
||||
className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
|
||||
onClick={() => {
|
||||
setMarketPopUp({ show: true, data: datas });
|
||||
}}
|
||||
>
|
||||
View
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
)}
|
||||
{marketPopUp.show && (
|
||||
<MarketPopUp
|
||||
details={datas}
|
||||
|
||||
@@ -2,11 +2,13 @@ import { useState } from "react";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
import { handlePagingFunc, PaginatedList } from "../../Pagination";
|
||||
import LoadingSpinner from "../../Spinners/LoadingSpinner";
|
||||
import SuggestTask from "../../FamilyPopup/SuggestTask";
|
||||
|
||||
const FamilyWaitlist = ({ familyData, className, loader }) => {
|
||||
const navigate = useNavigate();
|
||||
const { pathname } = useLocation();
|
||||
|
||||
const [popUp, setPopUp] = useState({ show: false, data: {} });
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(0);
|
||||
const itemsPerPage = Number(process.env.REACT_APP_ITEM_PER_PAGE);
|
||||
const indexOfFirstItem = currentPage;
|
||||
@@ -18,6 +20,10 @@ const FamilyWaitlist = ({ familyData, className, loader }) => {
|
||||
|
||||
const handlePagination = (e) => handlePagingFunc(e, setCurrentPage);
|
||||
|
||||
const popUpHandler = () => {
|
||||
setPopUp((prev) => !prev);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`update-table w-full bg-white dark:bg-dark-white h-full lg:min-h-[450px] overflow-hidden rounded-2xl section-shadow ${
|
||||
@@ -75,7 +81,7 @@ const FamilyWaitlist = ({ familyData, className, loader }) => {
|
||||
</td>
|
||||
<td className="text-right py-4 px-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setPopUp({ show: true, data: value })}
|
||||
className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
>
|
||||
View
|
||||
@@ -100,6 +106,7 @@ const FamilyWaitlist = ({ familyData, className, loader }) => {
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{popUp.show && <SuggestTask details={popUp.data} onClose={() => {setPopUp({ show: false, data: {} })}} situation={popUp.show} />}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import React, { useMemo, useState } from "react";
|
||||
import { useState } from "react";
|
||||
import { useLocation } from "react-router-dom";
|
||||
import ModalCom from "../Helpers/ModalCom";
|
||||
import { Form, Formik } from "formik";
|
||||
import InputCom from "../Helpers/Inputs/InputCom";
|
||||
@@ -6,6 +7,7 @@ import usersService from "../../services/UsersService";
|
||||
|
||||
const DEFAULT_IMAGE = require("../../assets/images/family/default.jpg");
|
||||
const SuggestTask = ({ details, onClose, situation }) => {
|
||||
const { pathname, state } = useLocation();
|
||||
const [submitTask, setSubmitTask] = useState({
|
||||
loading: false,
|
||||
msg: "",
|
||||
@@ -16,16 +18,16 @@ const SuggestTask = ({ details, onClose, situation }) => {
|
||||
const initialValues = {
|
||||
title: details?.title || "",
|
||||
description: details?.description || "",
|
||||
banner: details?.banner
|
||||
banner: details?.banner,
|
||||
};
|
||||
|
||||
const apiCall = new usersService();
|
||||
|
||||
const handleSubmit = async (values) => {
|
||||
if(!values.title && !values.description) return;
|
||||
if (!values.title && !values.description) return;
|
||||
try {
|
||||
setSubmitTask({ loading: true });
|
||||
const reqData = { ...values, };
|
||||
const reqData = { ...values };
|
||||
const res = await apiCall.sendFamilySuggestedTasks(reqData);
|
||||
if (res.internal_return < 0) {
|
||||
setSubmitTask({ loading: false, msg: res.status, state: "bad" });
|
||||
@@ -40,12 +42,16 @@ const SuggestTask = ({ details, onClose, situation }) => {
|
||||
throw new Error("Error Occurred", error);
|
||||
}
|
||||
};
|
||||
|
||||
// console.log("state >-->>", state);
|
||||
return (
|
||||
<ModalCom action={onClose} situation={situation}>
|
||||
<div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
|
||||
<div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29] border-light-purple">
|
||||
<h1 className="text-base md:text-lg font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
Suggest to Parent
|
||||
{pathname === "/manage-family"
|
||||
? `${state?.firstname}'s Suggested Task`
|
||||
: "Suggest to Parent"}
|
||||
</h1>
|
||||
<button
|
||||
type="button"
|
||||
@@ -93,10 +99,16 @@ const SuggestTask = ({ details, onClose, situation }) => {
|
||||
{/* Title */}
|
||||
<div className="field w-full mb-[15px]">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
fieldClass={
|
||||
pathname === "/manage-family" ? "px-2" : "px-6"
|
||||
}
|
||||
label="Title"
|
||||
labelClass="tracking-wide"
|
||||
inputBg="bg-slate-100"
|
||||
inputBg={
|
||||
pathname === "/manage-family"
|
||||
? "bg-white"
|
||||
: "bg-slate-100"
|
||||
}
|
||||
inputClass="disabled:cursor-default"
|
||||
type="text"
|
||||
name="title"
|
||||
@@ -129,7 +141,11 @@ const SuggestTask = ({ details, onClose, situation }) => {
|
||||
<textarea
|
||||
id="description"
|
||||
rows="5"
|
||||
className={`input-field px-3 pt-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[130px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px]`}
|
||||
className={`input-field pt-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[130px] ${
|
||||
pathname === "/manage-family"
|
||||
? "px-2"
|
||||
: "bg-slate-100 px-3 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px]"
|
||||
}`}
|
||||
style={{ resize: "none" }}
|
||||
name="description"
|
||||
value={props.values.description}
|
||||
@@ -148,21 +164,21 @@ const SuggestTask = ({ details, onClose, situation }) => {
|
||||
>
|
||||
<span className="text-gradient"> Cancel</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={props.isSubmitting}
|
||||
className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full"
|
||||
>
|
||||
{submitTask.loading
|
||||
? "Submitting Task"
|
||||
: submitTask.state == "success"
|
||||
? "Task Submitted"
|
||||
: submitTask.state == "bad"
|
||||
? "An Error Occurred"
|
||||
: "Send to Parents"}
|
||||
</button>
|
||||
{/* )} */}
|
||||
{pathname !== "/manage-family" && (
|
||||
<button
|
||||
type="submit"
|
||||
disabled={props.isSubmitting}
|
||||
className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full"
|
||||
>
|
||||
{submitTask.loading
|
||||
? "Submitting Task"
|
||||
: submitTask.state == "success"
|
||||
? "Task Submitted"
|
||||
: submitTask.state == "bad"
|
||||
? "An Error Occurred"
|
||||
: "Send to Parents"}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
|
||||
@@ -76,7 +76,7 @@ export default function InputCom({
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className={`input-wrapper border w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base ${inputClass}`}
|
||||
className={`input-wrapper w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-base ${inputClass ? inputClass : "text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] border"}`}
|
||||
>
|
||||
<input
|
||||
placeholder={placeholder}
|
||||
|
||||
@@ -1,8 +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'
|
||||
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({
|
||||
@@ -17,7 +17,7 @@ export default function MainSection({
|
||||
);
|
||||
const [tab, setTab] = useState(Object.keys(marketCategories)[0]);
|
||||
|
||||
let [contentDisplay, setContentDisplay] = useState('grid') // STATE TO HOLD LIST VIEW STYLE
|
||||
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]) => {
|
||||
@@ -29,8 +29,8 @@ export default function MainSection({
|
||||
setTab(value);
|
||||
};
|
||||
|
||||
// Handles the category selection on mobile view
|
||||
const handleSetCategory = (value) => {
|
||||
// Handles the category selection on mobile view
|
||||
const handleSetCategory = (value) => {
|
||||
for (let i in marketCategories) {
|
||||
if (marketCategories[i] == value) {
|
||||
setTab(i);
|
||||
@@ -57,7 +57,7 @@ export default function MainSection({
|
||||
<div className="hidden lg:flex md:space-x-8 space-x-2">
|
||||
{mappedArray.map(({ key, value }) => (
|
||||
<span
|
||||
key={key}
|
||||
key={key}
|
||||
onClick={() => tabHandler(key)}
|
||||
className={`md:text-[18px] text-md text-dark-gray dark:text-white hover:text-pink border-b hover:border-pink font-medium cursor-pointer ${
|
||||
tab === key
|
||||
@@ -76,30 +76,43 @@ export default function MainSection({
|
||||
datas={Object.values(marketCategories)}
|
||||
className="Update-table-dropdown"
|
||||
contentBodyClasses="w-auto min-w-max"
|
||||
position='left'
|
||||
position="left"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* contentDisplay toggler */}
|
||||
<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"
|
||||
/>
|
||||
<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>
|
||||
{/* end of contentDisplay toggler */}
|
||||
</div>
|
||||
<div className="filter-navigate-content w-full min-h-screen">
|
||||
<div className={contentDisplay == 'grid' ? 'grid lg:grid-cols-3 sm:grid-cols-2 gap-[30px]' : 'w-full'}>
|
||||
<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 contentDisplay={contentDisplay} key={datas.id} datas={datas} />
|
||||
<AvailableJobsCard
|
||||
contentDisplay={contentDisplay}
|
||||
key={datas.id}
|
||||
datas={datas}
|
||||
/>
|
||||
)}
|
||||
</DataIteration>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user