125 lines
4.4 KiB
JavaScript
125 lines
4.4 KiB
JavaScript
"use client";
|
|
import {
|
|
Carousel,
|
|
CarouselContent,
|
|
CarouselItem,
|
|
} from "@/components/ui/carousel";
|
|
import { useEffect, useState } from "react";
|
|
import { RiArrowLeftLine, RiArrowRightLine } from "react-icons/ri";
|
|
import Autoplay from "embla-carousel-autoplay";
|
|
import { userSignUpData } from "@/redux/reducer/authSlice";
|
|
import { useSelector } from "react-redux";
|
|
import CustomLink from "@/components/Common/CustomLink";
|
|
import { getIsRtl } from "@/redux/reducer/languageSlice";
|
|
import CustomImage from "@/components/Common/CustomImage";
|
|
|
|
const OfferSlider = ({ Slider }) => {
|
|
const [api, setApi] = useState();
|
|
const [current, setCurrent] = useState(0);
|
|
const userData = useSelector(userSignUpData);
|
|
const isRTL = useSelector(getIsRtl);
|
|
|
|
useEffect(() => {
|
|
if (!api) {
|
|
return;
|
|
}
|
|
setCurrent(api.selectedScrollSnap());
|
|
api.on("select", () => {
|
|
setCurrent(api.selectedScrollSnap());
|
|
});
|
|
}, [api]);
|
|
|
|
return (
|
|
<section className="py-6 bg-muted">
|
|
<div className="container">
|
|
<Carousel
|
|
key={isRTL ? "rtl" : "ltr"}
|
|
className="w-full"
|
|
setApi={setApi}
|
|
opts={{
|
|
align: "start",
|
|
containScroll: "trim",
|
|
direction: isRTL ? "rtl" : "ltr",
|
|
}}
|
|
plugins={[Autoplay({ delay: 3000 })]}
|
|
>
|
|
<CarouselContent className="-ml-3 md:-ml-[30px]">
|
|
{Slider.map((ele, index) => {
|
|
let href;
|
|
if (ele?.model_type === "App\\Models\\Item") {
|
|
if (userData && userData?.id === ele?.model?.user_id) {
|
|
href = `/my-listing/${ele?.model?.slug}`;
|
|
} else {
|
|
href = `/ad-details/${ele?.model?.slug}`;
|
|
}
|
|
} else if (ele?.model_type === null) {
|
|
href = ele?.third_party_link;
|
|
} else if (ele?.model_type === "App\\Models\\Category") {
|
|
href = `/ads?category=${ele.model.slug}`;
|
|
} else {
|
|
href = "/";
|
|
}
|
|
// First 2 images load with eager loading and priority for Lighthouse performance
|
|
const isPriorityImage = index < 2;
|
|
return (
|
|
<CarouselItem
|
|
className="basis-full md:basis-2/3 pl-3 md:pl-[30px]"
|
|
key={ele?.id}
|
|
>
|
|
<CustomLink
|
|
href={href}
|
|
target={ele?.model_type === null ? "_blank" : ""}
|
|
>
|
|
<CustomImage
|
|
src={ele.image}
|
|
alt="slider imag"
|
|
width={983}
|
|
height={493}
|
|
className="aspect-[983/493] w-full object-cover rounded-xl"
|
|
loading={isPriorityImage ? "eager" : "lazy"}
|
|
priority={isPriorityImage}
|
|
/>
|
|
</CustomLink>
|
|
</CarouselItem>
|
|
);
|
|
})}
|
|
</CarouselContent>
|
|
|
|
{Slider && Slider?.length > 1 && (
|
|
<>
|
|
<button
|
|
onClick={() => api?.scrollTo(current - 1)}
|
|
className={`sm:block absolute z-10 top-1/2 -translate-y-1/2 ltr:left-2 rtl:right-2 bg-primary p-1 md:p-2 rounded-full ${
|
|
!api?.canScrollPrev() ? "cursor-default" : ""
|
|
}`}
|
|
disabled={!api?.canScrollPrev()}
|
|
>
|
|
<RiArrowLeftLine
|
|
size={24}
|
|
color="white"
|
|
className={isRTL ? "rotate-180" : ""}
|
|
/>
|
|
</button>
|
|
<button
|
|
onClick={() => api?.scrollTo(current + 1)}
|
|
className={`sm:block absolute z-10 top-1/2 -translate-y-1/2 ltr:right-2 rtl:left-2 bg-primary p-1 md:p-2 rounded-full ${
|
|
!api?.canScrollNext() ? "cursor-default" : ""
|
|
}`}
|
|
disabled={!api?.canScrollNext()}
|
|
>
|
|
<RiArrowRightLine
|
|
size={24}
|
|
color="white"
|
|
className={isRTL ? "rotate-180" : ""}
|
|
/>
|
|
</button>
|
|
</>
|
|
)}
|
|
</Carousel>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default OfferSlider;
|