122 lines
4.3 KiB
TypeScript
122 lines
4.3 KiB
TypeScript
"use client";
|
|
import { listData } from "@/service/landing/landing";
|
|
import { useParams, usePathname, useRouter } from "next/navigation";
|
|
import React, { useEffect, useState } from "react";
|
|
import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
|
|
import { Link } from "@/i18n/routing";
|
|
import { getPublicLocaleTimestamp } from "@/utils/globals";
|
|
import { Icon } from "@iconify/react/dist/iconify.js";
|
|
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
|
|
|
|
const HeaderBanner = () => {
|
|
const router = useRouter();
|
|
const params = useParams();
|
|
const poldaName: any = params?.polda_name;
|
|
const asPath: any = usePathname();
|
|
const [content, setContent] = useState([]);
|
|
|
|
const [isBannerLoading, setIsBannerLoading] = useState(true);
|
|
const [centerPadding, setCenterPadding] = useState<any>();
|
|
|
|
useEffect(() => {
|
|
// async function initState() {
|
|
// const res = await listCarousel();
|
|
// setContent(res?.data?.data);
|
|
// setCenterPadding(`${Math.trunc(Number(window.innerWidth) / 10 + 40)}px`);
|
|
// }
|
|
|
|
async function fetchData() {
|
|
const res = await listData("1", "", "", 5, 0, "createdAt", "", "", poldaName);
|
|
let data = res?.data?.data?.content;
|
|
setContent(data);
|
|
setCenterPadding(`${Math.trunc(Number(window.innerWidth) / 10 + 40)}px`);
|
|
setIsBannerLoading(false);
|
|
console.log("Done");
|
|
}
|
|
|
|
fetchData();
|
|
}, [params?.page]);
|
|
|
|
const settings = {
|
|
className: "center",
|
|
// centerMode: true,
|
|
infinite: true,
|
|
centerPadding,
|
|
slidesToShow: 2,
|
|
autoplay: true,
|
|
speed: 1500,
|
|
autoplaySpeed: 15_000,
|
|
focusOnSelect: true,
|
|
responsive: [
|
|
{
|
|
breakpoint: 768,
|
|
settings: {
|
|
arrows: false,
|
|
centerMode: true,
|
|
centerPadding: "60px",
|
|
slidesToShow: 1,
|
|
},
|
|
},
|
|
{
|
|
breakpoint: 480,
|
|
settings: {
|
|
arrows: false,
|
|
centerMode: true,
|
|
centerPadding: "20px",
|
|
slidesToShow: 1,
|
|
},
|
|
},
|
|
],
|
|
};
|
|
return (
|
|
<div>
|
|
{/* Header */}
|
|
<div className="p-6 lg:px-16 flex flex-col lg:flex-row">
|
|
{isBannerLoading ? (
|
|
<SkeletonTheme highlightColor="#f2f2f2">
|
|
<Skeleton className="w-[100%] h-[480px]" />
|
|
</SkeletonTheme>
|
|
) : (
|
|
<div className="mt-3">
|
|
<Carousel className="w-full h-full">
|
|
<CarouselContent>
|
|
{content?.map((row: any) => (
|
|
<CarouselItem key={row?.id} className="basis-1/2">
|
|
<div className="relative h-[310px] lg:h-[420px]">
|
|
<img src={row?.thumbnailLink} alt="" className="w-full h-[310px] lg:h-[420px] rounded-lg" />
|
|
<div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg">
|
|
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{row?.categoryName}</span>
|
|
<Link
|
|
href={
|
|
Number(row.fileType?.id) == 1
|
|
? `${asPath.includes("/polda/") == true ? asPath : ""}/image/detail/${row.slug}`
|
|
: Number(row.fileType?.id) == 2
|
|
? `/video/detail/${row.slug}`
|
|
: Number(row.fileType?.id) == 3
|
|
? `/document/detail/${row.slug}`
|
|
: `/audio/detail/${row.slug}`
|
|
}
|
|
>
|
|
<h3>{row.title}</h3>
|
|
</Link>
|
|
<p className="text-xs flex flex-row items-center gap-1 mt-1 text-white">
|
|
{getPublicLocaleTimestamp(new Date(row?.createdAt))} WIB {" | "}
|
|
<Icon icon="formkit:eye" width="15" height="15" /> {row?.clickCount}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CarouselItem>
|
|
))}
|
|
</CarouselContent>
|
|
<CarouselPrevious />
|
|
<CarouselNext />
|
|
</Carousel>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default HeaderBanner;
|