feat: auto change in right bottom banner
This commit is contained in:
parent
8645f913bf
commit
13dcd5cd26
|
|
@ -437,6 +437,18 @@ const HeroNew = (props: { group?: string }) => {
|
||||||
? Buffer.from(str).toString("base64")
|
? Buffer.from(str).toString("base64")
|
||||||
: window.btoa(str);
|
: window.btoa(str);
|
||||||
|
|
||||||
|
const [scrollIndex, setScrollIndex] = useState(0);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!content || content.length < 3) return;
|
||||||
|
|
||||||
|
const interval = setInterval(() => {
|
||||||
|
setScrollIndex((prevIndex) => (prevIndex + 1) % content.length);
|
||||||
|
}, 3000);
|
||||||
|
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
}, [content]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex items-start justify-center mx-auto w-auto">
|
<div className="flex items-start justify-center mx-auto w-auto">
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
|
|
@ -509,122 +521,142 @@ const HeroNew = (props: { group?: string }) => {
|
||||||
</Carousel> */}
|
</Carousel> */}
|
||||||
|
|
||||||
<div className="relative w-full">
|
<div className="relative w-full">
|
||||||
<Swiper
|
{content && content.length > 0 && (
|
||||||
modules={[Autoplay, Navigation]}
|
<Swiper
|
||||||
autoplay={{ delay: 3000, disableOnInteraction: false }}
|
modules={[Autoplay, Navigation]}
|
||||||
navigation={{
|
autoplay={{
|
||||||
nextEl: ".swiper-button-next",
|
delay: 3000,
|
||||||
prevEl: ".swiper-button-prev",
|
disableOnInteraction: false,
|
||||||
}}
|
}}
|
||||||
loop
|
loop={true}
|
||||||
className="w-full"
|
navigation={{
|
||||||
>
|
nextEl: ".swiper-button-next",
|
||||||
{content?.map((list: any) => (
|
prevEl: ".swiper-button-prev",
|
||||||
<SwiperSlide key={list?.id}>
|
}}
|
||||||
<div className="relative h-[310px] lg:h-[700px]">
|
className="w-full"
|
||||||
{/* Gambar */}
|
>
|
||||||
<Image
|
{content.map((list: any) => (
|
||||||
priority
|
<SwiperSlide key={list?.id}>
|
||||||
src={list?.smallThumbnailLink}
|
<div className="relative h-[310px] lg:h-[700px]">
|
||||||
alt="gambar"
|
{/* Gambar */}
|
||||||
fill
|
<Image
|
||||||
className="object-cover w-full h-full"
|
priority
|
||||||
/>
|
src={list?.smallThumbnailLink}
|
||||||
|
alt="gambar"
|
||||||
|
fill
|
||||||
|
className="object-cover w-full h-full"
|
||||||
|
/>
|
||||||
|
|
||||||
{/* Overlay hitam transparan */}
|
{/* Overlay */}
|
||||||
<div className="absolute inset-0 bg-black/40 z-10" />
|
<div className="absolute inset-0 bg-black/40 z-10" />
|
||||||
|
|
||||||
{/* Konten judul */}
|
{/* Judul & Link */}
|
||||||
<Link
|
<Link
|
||||||
href={
|
href={
|
||||||
Number(list?.fileTypeId) === 1
|
Number(list?.fileTypeId) === 1
|
||||||
? `${prefixPath}/image/detail/${list?.slug}`
|
? `${prefixPath}/image/detail/${list?.slug}`
|
||||||
: Number(list?.fileTypeId) === 2
|
: Number(list?.fileTypeId) === 2
|
||||||
? `${prefixPath}/video/detail/${list?.slug}`
|
? `${prefixPath}/video/detail/${list?.slug}`
|
||||||
: Number(list?.fileTypeId) === 3
|
: Number(list?.fileTypeId) === 3
|
||||||
? `${prefixPath}/document/detail/${list?.slug}`
|
? `${prefixPath}/document/detail/${list?.slug}`
|
||||||
: `${prefixPath}/audio/detail/${list?.slug}`
|
: `${prefixPath}/audio/detail/${list?.slug}`
|
||||||
}
|
}
|
||||||
className="absolute bottom-20 left-8 lg:left-32 z-20 text-white w-[85%] lg:w-[45%] cursor-pointer"
|
className="absolute bottom-20 left-8 lg:left-32 z-20 text-white w-[85%] lg:w-[45%] cursor-pointer"
|
||||||
>
|
>
|
||||||
<span className="text-red-600 text-lg font-bold uppercase">
|
<span className="text-red-600 text-lg font-bold uppercase">
|
||||||
{list?.categoryName}
|
{list?.categoryName}
|
||||||
</span>
|
</span>
|
||||||
<h2 className="text-xl font-bold">{list?.title}</h2>
|
<h2 className="text-xl font-bold">{list?.title}</h2>
|
||||||
<p className="text-sm mt-2">
|
<p className="text-sm mt-2">
|
||||||
{formatDateToIndonesian(new Date(list?.createdAt))}{" "}
|
{formatDateToIndonesian(new Date(list?.createdAt))}{" "}
|
||||||
{list?.timezone || "WIB"} | 👁 {list?.clickCount}
|
{list?.timezone || "WIB"} | 👁 {list?.clickCount}
|
||||||
</p>
|
</p>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
{/* Tombol navigasi */}
|
{/* Tombol navigasi */}
|
||||||
<div className="swiper-button-prev absolute left-6 top-[45%] z-30 -translate-y-1/2 hover:bg-black/70 text-white p-2 rounded-full">
|
<div className="swiper-button-prev absolute left-6 top-[45%] z-30 -translate-y-1/2 hover:bg-black/70 text-white p-2 rounded-full">
|
||||||
<ChevronLeft className="w-5 h-5" />
|
<ChevronLeft className="w-5 h-5" />
|
||||||
|
</div>
|
||||||
|
<div className="swiper-button-next absolute right-6 top-[45%] z-30 -translate-y-1/2 hover:bg-black/70 text-white p-2 rounded-full">
|
||||||
|
<ChevronRight className="w-5 h-5" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="swiper-button-next absolute right-6 top-[45%] z-30 -translate-y-1/2 hover:bg-black/70 text-white p-2 rounded-full">
|
</SwiperSlide>
|
||||||
<ChevronRight className="w-5 h-5" />
|
))}
|
||||||
</div>
|
</Swiper>
|
||||||
</div>
|
)}
|
||||||
</SwiperSlide>
|
|
||||||
))}
|
|
||||||
</Swiper>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="hidden lg:flex flex-col gap-3 absolute bottom-4 right-[38px] w-[520px] bg-black/40 p-4 rounded-lg z-10">
|
<div className="hidden lg:flex flex-col gap-3 absolute bottom-4 right-[38px] w-[520px] bg-black/40 p-4 rounded-lg z-10 h-[250px] overflow-hidden">
|
||||||
{newContent?.slice(0, 3).map((item: any) => (
|
<div
|
||||||
<li key={item?.id} className="flex gap-4 flex-row lg:w-full mx-2">
|
className="transition-transform duration-500 ease-in-out"
|
||||||
<div className="flex-shrink-0 w-32 rounded-lg">
|
style={{
|
||||||
<Image
|
transform: "translateY(0%)",
|
||||||
priority={true}
|
}}
|
||||||
placeholder={`data:image/svg+xml;base64,${toBase64(
|
key={scrollIndex}
|
||||||
shimmer(700, 475)
|
>
|
||||||
)}`}
|
{content?.length >= 2 &&
|
||||||
width={720}
|
[0, 1].map((offset) => {
|
||||||
height={480}
|
const item = content[(scrollIndex + offset) % content.length];
|
||||||
src={item?.smallThumbnailLink}
|
return (
|
||||||
alt={item?.title}
|
<li
|
||||||
className="w-full h-[100px] object-cover rounded-lg"
|
key={item?.id}
|
||||||
/>
|
className="flex gap-4 flex-row lg:w-full mx-2 mb-2"
|
||||||
</div>
|
>
|
||||||
<div className="w-[280px] lg:w-full">
|
<div className="flex-shrink-0 w-32 rounded-lg">
|
||||||
<Link
|
<Image
|
||||||
href={
|
priority={true}
|
||||||
Number(item?.fileTypeId) == 1
|
placeholder={`data:image/svg+xml;base64,${toBase64(
|
||||||
? `${prefixPath}/image/detail/${item?.slug}`
|
shimmer(700, 475)
|
||||||
: Number(item?.fileTypeId) == 2
|
)}`}
|
||||||
? `${prefixPath}/video/detail/${item?.slug}`
|
width={720}
|
||||||
: Number(item?.fileTypeId) == 3
|
height={480}
|
||||||
? `${prefixPath}/document/detail/${item?.slug}`
|
src={item?.smallThumbnailLink}
|
||||||
: `${prefixPath}/audio/detail/${item?.slug}`
|
alt={item?.title}
|
||||||
}
|
className="w-full h-[100px] object-cover rounded-lg"
|
||||||
className="flex flex-col justify-between"
|
|
||||||
>
|
|
||||||
<p className="rounded-lg flex text-red-600 font-bold uppercase w-fit">
|
|
||||||
{item?.categoryName}
|
|
||||||
</p>
|
|
||||||
<h3 className="text-base text-white font-bold">
|
|
||||||
{item?.title}
|
|
||||||
</h3>
|
|
||||||
<p className="text-[10px] flex flex-row items-center gap-1 text-white mt-2">
|
|
||||||
{formatDateToIndonesian(new Date(item?.createdAt))}{" "}
|
|
||||||
{item?.timezone || "WIB"} |{" "}
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="1.2em"
|
|
||||||
height="1.2em"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
fill="currentColor"
|
|
||||||
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
|
|
||||||
/>
|
/>
|
||||||
</svg>{" "}
|
</div>
|
||||||
{item?.clickCount}
|
<div className="w-[280px] lg:w-full">
|
||||||
</p>
|
<Link
|
||||||
</Link>
|
href={
|
||||||
</div>
|
Number(item?.fileTypeId) == 1
|
||||||
</li>
|
? `${prefixPath}/image/detail/${item?.slug}`
|
||||||
))}
|
: Number(item?.fileTypeId) == 2
|
||||||
|
? `${prefixPath}/video/detail/${item?.slug}`
|
||||||
|
: Number(item?.fileTypeId) == 3
|
||||||
|
? `${prefixPath}/document/detail/${item?.slug}`
|
||||||
|
: `${prefixPath}/audio/detail/${item?.slug}`
|
||||||
|
}
|
||||||
|
className="flex flex-col justify-between"
|
||||||
|
>
|
||||||
|
<p className="rounded-lg flex text-red-600 font-bold uppercase w-fit">
|
||||||
|
{item?.categoryName}
|
||||||
|
</p>
|
||||||
|
<h3 className="text-base text-white font-bold">
|
||||||
|
{item?.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-[10px] flex flex-row items-center gap-1 text-white mt-2">
|
||||||
|
{formatDateToIndonesian(new Date(item?.createdAt))}{" "}
|
||||||
|
{item?.timezone || "WIB"} |{" "}
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="1.2em"
|
||||||
|
height="1.2em"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill="currentColor"
|
||||||
|
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
|
||||||
|
/>
|
||||||
|
</svg>{" "}
|
||||||
|
{item?.clickCount}
|
||||||
|
</p>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue