victorAnumudu
108 lines
4.5 KiB
React
108 lines
4.5 KiB
React
import React, { useRef } from "react";
|
|
//import ProductCardStyleOne from "../Cards/ProductCardStyleOne";
|
|
import Icons from "../Helpers/Icons";
|
|
import SliderCom from "../Helpers/SliderCom";
|
|
import FamilyActiveJobsCard from "../Cards/FamilyActiveJobsCard";
|
|
|
|
export default function FamilyActiveLSlde({ className, trending, image_server }) {
|
|
const settings = {
|
|
arrows: false,
|
|
slidesToShow: 3,
|
|
slidesToScroll: 3,
|
|
infinite: trending?.length > 3,
|
|
responsive: [
|
|
{
|
|
breakpoint: 1025,
|
|
settings: {
|
|
slidesToShow: 3,
|
|
slidesToScroll: 3,
|
|
infinite: trending?.length > 3,
|
|
},
|
|
},
|
|
{
|
|
breakpoint: 769,
|
|
settings: {
|
|
slidesToShow: 2,
|
|
slidesToScroll: 2,
|
|
infinite: trending?.length > 2,
|
|
},
|
|
},
|
|
{
|
|
breakpoint: 619,
|
|
settings: {
|
|
slidesToShow: 1,
|
|
slidesToScroll: 1,
|
|
infinite: trending?.length > 1,
|
|
},
|
|
},
|
|
],
|
|
};
|
|
const trendingSlider = useRef(null);
|
|
const prevHandler = () => {
|
|
trendingSlider.current.slickPrev();
|
|
};
|
|
const nextHandler = () => {
|
|
trendingSlider.current.slickNext();
|
|
};
|
|
return (
|
|
<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">Current Tasks</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>
|
|
{/* trending products */}
|
|
<div className="trending-products slider-left relative w-full rounded-2xl p-[10px] bg-alice-blue">
|
|
<SliderCom selector={trendingSlider} settings={settings}>
|
|
{trending &&
|
|
trending.length > 0 &&
|
|
trending.map((item) => (
|
|
<FamilyActiveJobsCard key={item.id} datas={item} image_server={image_server} />
|
|
))}
|
|
</SliderCom>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|