Moved Offer Table to Dash
This commit was merged in pull request #233.
This commit is contained in:
@@ -0,0 +1,175 @@
|
||||
import { useRef, useState } from "react";
|
||||
import Icons from "../Helpers/Icons";
|
||||
import SliderCom from "../Helpers/SliderCom";
|
||||
|
||||
import OfferJobPopout from "../jobPopout/OfferJobPopout";
|
||||
import LoadingSpinner from "../Spinners/LoadingSpinner";
|
||||
import { PriceFormatter } from "../Helpers/PriceFormatter";
|
||||
|
||||
export default function MyOffersFamilyTable({ className, MyActiveOffersList }) {
|
||||
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: MyActiveOffersList?.result_list?.length > 4,
|
||||
autoplay: true,
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 426,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 1,
|
||||
infinite: MyActiveOffersList?.result_list?.length > 2,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
console.log("YES WE SEE OFFERS", MyActiveOffersList);
|
||||
const sellSlider = useRef(null);
|
||||
//const buySlider = useRef(null);
|
||||
const prevHandler = (value) => {
|
||||
if (value === "sell") {
|
||||
sellSlider.current.slickPrev();
|
||||
}
|
||||
// if (value === "buy") {
|
||||
// buySlider.current.slickPrev();
|
||||
// }
|
||||
};
|
||||
const nextHandler = (value) => {
|
||||
if (value === "sell") {
|
||||
sellSlider.current.slickNext();
|
||||
}
|
||||
// if (value === "buy") {
|
||||
// buySlider.current.slickNext();
|
||||
// }
|
||||
};
|
||||
|
||||
if (!MyActiveOffersList || MyActiveOffersList?.result_list?.length == 0) {
|
||||
return ""; // want blank or no appear when no items
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={`top-seller-top-buyer-wrapper ${className || ""}`}>
|
||||
<div className="top-seller-top-buyer-wrapper-container">
|
||||
<div className="main-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4">
|
||||
<div className="lg:w-2/2 w-full mb-10 lg:mb-0 sm:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl section-shadow">
|
||||
<div className="heading flex justify-between items-center mb-4">
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
You Have Task(s) Waiting For You
|
||||
</h1>
|
||||
<div className="slider-btns flex space-x-4">
|
||||
<button
|
||||
onClick={() => nextHandler("sell")}
|
||||
type="button"
|
||||
className="transform rotate-180 text-dark-gray dark:text-white dark:opacity-25"
|
||||
>
|
||||
<Icons name="arrows" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => prevHandler("sell")}
|
||||
type="button"
|
||||
className="transform rotate-180"
|
||||
>
|
||||
<div className=" text-dark-gray dark:text-white">
|
||||
<svg
|
||||
width="11"
|
||||
height="19"
|
||||
viewBox="0 0 11 19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M9.09766 1.1499L1.13307 9.11449L9.09766 17.0791"
|
||||
stroke="url(#paint0_linear_220_23410)"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_220_23410"
|
||||
x1="9.09766"
|
||||
y1="1.1499"
|
||||
x2="-4.2474"
|
||||
y2="7.96749"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#F539F8" />
|
||||
<stop offset="0.416763" stopColor="#C342F9" />
|
||||
<stop offset="1" stopColor="#5356FB" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="slider-content">
|
||||
<SliderCom settings={settings} selector={sellSlider}>
|
||||
{MyActiveOffersList &&
|
||||
MyActiveOffersList?.result_list?.length > 0 &&
|
||||
MyActiveOffersList?.result_list?.map((value, index) => {
|
||||
let thePrice = PriceFormatter(
|
||||
value?.price * 0.01,
|
||||
value?.currency_code,
|
||||
value?.currency
|
||||
);
|
||||
return (
|
||||
<div className="item" key={index}>
|
||||
<div className="offer-slide-item flex flex-col justify-between items-center">
|
||||
{/* title */}
|
||||
<div className="flex justify-center">
|
||||
<p className="text-xl text-dark-gray dark:text-white font-bold mb-2">
|
||||
{value.title}
|
||||
</p>
|
||||
</div>
|
||||
{/* username */}
|
||||
<div className="flex flex-col justify-center my-1">
|
||||
<p className="text-xs text-thin-light-gray">
|
||||
{value.timeline_days} Days
|
||||
</p>
|
||||
<div className="my-2 flex space-x-1 items-center text-purple text-xs">
|
||||
<span>{thePrice}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setOfferPopout({
|
||||
show: true,
|
||||
data: {...value, thePrice },
|
||||
});
|
||||
}}
|
||||
className="w-20 h-11 self-center btn-gradient text-base rounded-full text-white"
|
||||
>
|
||||
Start Task
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</SliderCom>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Offer Job Popout */}
|
||||
{offerPopout.show && (
|
||||
<OfferJobPopout
|
||||
details={offerPopout.data}
|
||||
onClose={() => {
|
||||
setOfferPopout({ show: false, data: {} });
|
||||
}}
|
||||
situation={offerPopout.show}
|
||||
/>
|
||||
)}
|
||||
{/* End of Offer Job Popout */}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user