From b16b35653274d8bf90024b7c92d883d6e225b5f6 Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Thu, 6 Jul 2023 11:01:54 +0100 Subject: [PATCH] family offer new layout --- src/components/Cards/FamilyOfferCard.jsx | 71 +++ src/components/Home/FamilyActiveLSlde.jsx | 4 +- .../MyTasks/MyOffersFamilyTable.jsx | 454 ++++-------------- src/index.css | 8 +- 4 files changed, 169 insertions(+), 368 deletions(-) create mode 100644 src/components/Cards/FamilyOfferCard.jsx diff --git a/src/components/Cards/FamilyOfferCard.jsx b/src/components/Cards/FamilyOfferCard.jsx new file mode 100644 index 0000000..2339c33 --- /dev/null +++ b/src/components/Cards/FamilyOfferCard.jsx @@ -0,0 +1,71 @@ +import { useState } from "react"; +import { toast } from "react-toastify"; +import localImgLoad from "../../lib/localImgLoad"; +import CountDown from "../Helpers/CountDown"; +import Icons from "../Helpers/Icons"; +import {PriceFormatter} from '../Helpers/PriceFormatter' + + +export default function FamilyOfferCard({ datas, hidden = false, setOfferPopout }) { + let thePrice = PriceFormatter(datas?.price * 0.01,datas?.currency_code,datas?.currency); + + return ( +
+
+ {/* thumbnail */} +
+ {/* thumbnail image */} +
+ {hidden && ( +
+ +
+ )} +
+
+ {/* details */} +
+

+ {datas.title} +

+ {/* countdown */} +
+
+

+ Task Code +

+

+ {datas.contract} +

+
+
+
+

+ Remaining Time +

+

+ +

+
+
+
+
+
+ +
+
+ ); +} diff --git a/src/components/Home/FamilyActiveLSlde.jsx b/src/components/Home/FamilyActiveLSlde.jsx index 2f81d9d..025a3bd 100644 --- a/src/components/Home/FamilyActiveLSlde.jsx +++ b/src/components/Home/FamilyActiveLSlde.jsx @@ -93,8 +93,8 @@ export default function FamilyActiveLSlde({ className, trending }) { {/* trending products */} -
- +
+ {trending && trending.length > 0 && trending.map((item) => ( diff --git a/src/components/MyTasks/MyOffersFamilyTable.jsx b/src/components/MyTasks/MyOffersFamilyTable.jsx index dcc900f..6526cb9 100644 --- a/src/components/MyTasks/MyOffersFamilyTable.jsx +++ b/src/components/MyTasks/MyOffersFamilyTable.jsx @@ -2,47 +2,51 @@ import { useRef, useState } from "react"; import Icons from "../Helpers/Icons"; import SliderCom from "../Helpers/SliderCom"; import OfferJobPopout from "../jobPopout/OfferJobPopout"; -import { PriceFormatter } from "../Helpers/PriceFormatter"; +import FamilyOfferCard from "../Cards/FamilyOfferCard"; export default function MyOffersFamilyTable({ className, familyOffers }) { let [offerPopout, setOfferPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW const settings = { arrows: false, - dots: false, - infinite: familyOffers?.result_list?.length > 4, - autoplay: true, - slidesToShow: 4, - slidesToScroll: 1, + slidesToShow: 3, + slidesToScroll: 3, + infinite: familyOffers?.length > 3, responsive: [ - { - breakpoint: 426, - settings: { - slidesToShow: 2, - slidesToScroll: 1, - infinite: familyOffers?.result_list?.length > 2, + { + breakpoint: 1025, + settings: { + slidesToShow: 3, + slidesToScroll: 3, + infinite: familyOffers?.length > 3, + }, + }, + { + breakpoint: 769, + settings: { + slidesToShow: 2, + slidesToScroll: 2, + infinite: familyOffers?.length > 2, + }, + }, + { + breakpoint: 619, + settings: { + slidesToShow: 1, + slidesToScroll: 1, + infinite: familyOffers?.length > 1, + }, }, - }, ], - }; +}; console.log("YES WE SEE OFFERS", familyOffers); - const sellSlider = useRef(null); - //const buySlider = useRef(null); - const prevHandler = (value) => { - if (value === "sell") { - sellSlider.current.slickPrev(); - } - // if (value === "buy") { - // buySlider.current.slickPrev(); - // } + + const trendingSlider = useRef(null); + const prevHandler = () => { + trendingSlider.current.slickPrev(); }; - const nextHandler = (value) => { - if (value === "sell") { - sellSlider.current.slickNext(); - } - // if (value === "buy") { - // buySlider.current.slickNext(); - // } + const nextHandler = () => { + trendingSlider.current.slickNext(); }; if (!familyOffers || familyOffers?.result_list?.length == 0) { @@ -52,345 +56,65 @@ export default function MyOffersFamilyTable({ className, familyOffers }) { return ( <>
-
-
-
-
-

- You Have Task(s) Waiting For You -

-
- - +
+ {/* heading */} +
+
+

Ready to Start?

-
-
- - {familyOffers && - familyOffers?.length > 0 && - familyOffers?.map((value, index) => { - let thePrice = PriceFormatter( - value?.price * 0.01, - value?.currency_code, - value?.currency - ); - return ( -
-
- {/* title */} -
-

- {value.title} -

-
- {/* username */} -
-

- {value.timeline_days} Days -

-
- {thePrice} -
-
- -
+ + + + + + + + +
- ); - })} - - {/*
*/} - {/* /!* img *!/*/} - {/*
*/} - {/*
*/} - {/* top*/} - {/*
*/} - {/* */} - {/* */} - {/* */} - {/*
*/} - {/*
*/} - {/*
*/} - {/* /!* title *!/*/} - {/*
*/} - {/*

*/} - {/* Brokln Simons*/} - {/*

*/} - {/*
*/} - {/* /!* username *!/*/} - {/*
*/} - {/*

*/} - {/* @broklinslam_75*/} - {/*

*/} - {/*
*/} - {/* /!* items *!/*/} - {/*
*/} - {/*
*/} - {/**/} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/**/} - {/* 3435 Items*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/* /!* img *!/*/} - {/*
*/} - {/*
*/} - {/* top*/} - {/*
*/} - {/* */} - {/* */} - {/* */} - {/*
*/} - {/*
*/} - {/*
*/} - {/* /!* title *!/*/} - {/*
*/} - {/*

*/} - {/* Brokln Simons*/} - {/*

*/} - {/*
*/} - {/* /!* username *!/*/} - {/*
*/} - {/*

*/} - {/* @broklinslam_75*/} - {/*

*/} - {/*
*/} - {/* /!* items *!/*/} - {/*
*/} - {/*
*/} - {/**/} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/**/} - {/* 3435 Items*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/* /!* img *!/*/} - {/*
*/} - {/*
*/} - {/* top*/} - {/*
*/} - {/* */} - {/* */} - {/* */} - {/*
*/} - {/*
*/} - {/*
*/} - {/* /!* title *!/*/} - {/*
*/} - {/*

*/} - {/* Brokln Simons*/} - {/*

*/} - {/*
*/} - {/* /!* username *!/*/} - {/*
*/} - {/*

*/} - {/* @broklinslam_75*/} - {/*

*/} - {/*
*/} - {/* /!* items *!/*/} - {/*
*/} - {/*
*/} - {/**/} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/**/} - {/* 3435 Items*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/* /!* img *!/*/} - {/*
*/} - {/*
*/} - {/* top*/} - {/*
*/} - {/* */} - {/* */} - {/* */} - {/*
*/} - {/*
*/} - {/*
*/} - {/* /!* title *!/*/} - {/*
*/} - {/*

*/} - {/* Brokln Simons*/} - {/*

*/} - {/*
*/} - {/* /!* username *!/*/} - {/*
*/} - {/*

*/} - {/* @broklinslam_75*/} - {/*

*/} - {/*
*/} - {/* /!* items *!/*/} - {/*
*/} - {/*
*/} - {/**/} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/**/} - {/* 3435 Items*/} - {/*
*/} - {/*
*/} - {/*
*/} - -
+ + +
+
+ {/* trending products */} +
+ + {familyOffers && + familyOffers.length > 0 && + familyOffers.map((item) => { + return ( + + ) + })} +
-
{/* Offer Job Popout */} diff --git a/src/index.css b/src/index.css index 844d7f9..50edd25 100644 --- a/src/index.css +++ b/src/index.css @@ -931,4 +931,10 @@ TODO: Responsive =========================== /* TO REMOVE SLIDER COMPONENT FROM CENTRALIZED */ .trending-products .slick-slider .slick-track{ margin: 0; -} \ No newline at end of file +} +/* .slick-slide, .slick-slide::after, .slick-slide::before{ + background-color: red; + opacity: 1; + padding: 20; + box-shadow: none; +} */ \ No newline at end of file -- 2.34.1