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

new layout for full account offer list added

Browse Source
This commit was merged in pull request #263.
This commit is contained in:
victorAnumudu
2023-07-07 01:54:56 +01:00
parent ef045e2bc1
commit c0281f3734
6 changed files with 311 additions and 554 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MyTasks/MyOffersFamilyTable.jsx
+90 -82
View File
@@ -1,8 +1,8 @@
import { useRef, useState } from "react";
import OfferCard from "../Cards/OfferCard";
import Icons from "../Helpers/Icons";
import SliderCom from "../Helpers/SliderCom";
import OfferJobPopout from "../jobPopout/OfferJobPopout";
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
@@ -12,41 +12,41 @@ export default function MyOffersFamilyTable({ className, familyOffers }) {
slidesToScroll: 3,
infinite: familyOffers?.length > 3,
responsive: [
{
breakpoint: 1025,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: familyOffers?.length > 3,
},
{
breakpoint: 1025,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: familyOffers?.length > 3,
},
{
breakpoint: 769,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
infinite: familyOffers?.length > 2,
},
},
{
breakpoint: 769,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
infinite: familyOffers?.length > 2,
},
{
breakpoint: 619,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
infinite: familyOffers?.length > 1,
},
},
{
breakpoint: 619,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
infinite: familyOffers?.length > 1,
},
},
],
};
};
console.log("YES WE SEE OFFERS", familyOffers);
const trendingSlider = useRef(null);
const prevHandler = () => {
trendingSlider.current.slickPrev();
trendingSlider.current.slickPrev();
};
const nextHandler = () => {
trendingSlider.current.slickNext();
trendingSlider.current.slickNext();
};
if (!familyOffers || familyOffers?.result_list?.length == 0) {
@@ -56,65 +56,73 @@ export default function MyOffersFamilyTable({ className, familyOffers }) {
return (
<>
<div className={`top-seller-top-buyer-wrapper ${className || ""}`}>
<div className={`trending-section w-full px-2 sm:px-0 ${className || ""}`}>
{/* heading */}
<div className="flex justify-between items-center mb-6">
<div>
<h1 className="text-26 font-bold text-dark-gray dark:text-white">Ready to Start?</h1>
</div>
<div className="slider-btns flex space-x-3">
<button onClick={nextHandler} type="button">
<div className="trending-slider-left-btn relative text-white w-10 h-10 flex justify-center items-center rounded-full overflow-hidden">
<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>
<button onClick={prevHandler} type="button">
<div className="trending-slider-right-btn primary-gradient text-white w-10 h-10 relative flex justify-center items-center rounded-full ">
<Icons name="arrows" />
</div>
</button>
</div>
<div
className={`trending-section w-full px-2 sm:px-0 ${className || ""}`}
>
{/* heading */}
<div className="flex justify-between items-center mb-6">
<div>
<h1 className="text-26 font-bold text-dark-gray dark:text-white">
Ready to Start?
</h1>
</div>
{/* trending products */}
<div className="trending-products slider-left relative w-full rounded-2xl p-[10px] bg-alice-blue">
<SliderCom selector={trendingSlider} settings={settings}>
{familyOffers &&
familyOffers.length > 0 &&
familyOffers.map((item) => {
return (
<FamilyOfferCard key={item.id} datas={item} setOfferPopout={setOfferPopout} />
)
})}
</SliderCom>
<div className="slider-btns flex space-x-3">
<button onClick={nextHandler} type="button">
<div className="trending-slider-left-btn relative text-white w-10 h-10 flex justify-center items-center rounded-full overflow-hidden">
<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>
<button onClick={prevHandler} type="button">
<div className="trending-slider-right-btn primary-gradient text-white w-10 h-10 relative flex justify-center items-center rounded-full ">
<Icons name="arrows" />
</div>
</button>
</div>
</div>
{/* trending products */}
<div className="trending-products slider-left relative w-full rounded-2xl p-[10px] bg-alice-blue">
<SliderCom selector={trendingSlider} settings={settings}>
{familyOffers &&
familyOffers.length > 0 &&
familyOffers.map((item) => {
return (
<OfferCard
key={item.id}
datas={item}
setOfferPopout={setOfferPopout}
/>
);
})}
</SliderCom>
</div>
</div>
{/* Offer Job Popout */}