265 lines
10 KiB
TypeScript
265 lines
10 KiB
TypeScript
"use client";
|
|
import { listData, listStaticBanner } 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 {
|
|
formatDateToIndonesian,
|
|
getPublicLocaleTimestamp,
|
|
textEllipsis,
|
|
} from "@/utils/globals";
|
|
import { Icon } from "@iconify/react/dist/iconify.js";
|
|
import {
|
|
Carousel,
|
|
CarouselContent,
|
|
CarouselItem,
|
|
CarouselNext,
|
|
CarouselPrevious,
|
|
} from "@/components/ui/carousel";
|
|
import Image from "next/image";
|
|
|
|
const HeaderBannerSatker = () => {
|
|
const router = useRouter();
|
|
const params = useParams();
|
|
const satkerName: any = params?.satker_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",
|
|
"",
|
|
"",
|
|
"satker-" + satkerName
|
|
);
|
|
var data = res?.data?.data?.content;
|
|
if (data) {
|
|
const resStatic = await listStaticBanner(satkerName, false);
|
|
for (let i = 0; i < resStatic?.data?.data?.length; i++) {
|
|
const media = resStatic?.data.data[i]?.mediaUpload;
|
|
media.fileTypeId = media.fileType?.id;
|
|
data = data.filter((item: any) => item.id != media.id);
|
|
data.splice(0, 0, media);
|
|
}
|
|
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 Left */}
|
|
<div className="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-20 py-4 mx-auto w-auto mt-6">
|
|
{isBannerLoading ? (
|
|
<div className="flex flex-col space-y-3 mx-auto w-full lg:w-2/3">
|
|
<Skeleton className="h-[310px] lg:h-[420px] rounded-xl" />
|
|
<div className="space-y-2">
|
|
<Skeleton className="h-4 w-[250px]" />
|
|
<Skeleton className="h-4 w-[200px]" />
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<Carousel className="lg:w-2/3 lg:h-full ">
|
|
<CarouselContent>
|
|
{content?.map((row: any) => (
|
|
<CarouselItem key={row?.id}>
|
|
<div className="relative h-[310px] lg:h-[420px]">
|
|
<Image
|
|
src={row?.thumbnailLink}
|
|
alt=""
|
|
width={1920}
|
|
height={1080}
|
|
className="w-full h-[310px] lg:h-[420px] rounded-lg object-cover"
|
|
/>
|
|
<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("/satker/") == 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>
|
|
)}
|
|
|
|
{/* Section Kanan */}
|
|
<div>
|
|
{isBannerLoading ? (
|
|
<>
|
|
<div className="flex items-center gap-4 max-w-sm mx-auto mb-3">
|
|
<Skeleton className="h-[73px] w-16 rounded-md" />
|
|
<div className="space-y-2">
|
|
<Skeleton className="h-4 w-[250px]" />
|
|
<Skeleton className="h-4 w-[200px]" />
|
|
</div>
|
|
</div>
|
|
<div className="items-center hidden md:block gap-4 max-w-sm mx-auto mb-3 lg:flex">
|
|
<Skeleton className="h-[73px] w-16 rounded-md" />
|
|
<div className="space-y-2">
|
|
<Skeleton className="h-4 w-[250px]" />
|
|
<Skeleton className="h-4 w-[200px]" />
|
|
</div>
|
|
</div>
|
|
<div className="hidden md:block items-center gap-4 max-w-sm mx-auto mb-3 lg:flex">
|
|
<Skeleton className="h-[73px] w-16 rounded-md" />
|
|
<div className="space-y-2">
|
|
<Skeleton className="h-4 w-[250px]" />
|
|
<Skeleton className="h-4 w-[200px]" />
|
|
</div>
|
|
</div>
|
|
<div className="hidden md:block items-center gap-4 max-w-sm mx-auto mb-3 lg:flex">
|
|
<Skeleton className="h-[73px] w-16 rounded-md" />
|
|
<div className="space-y-2">
|
|
<Skeleton className="h-4 w-[250px]" />
|
|
<Skeleton className="h-4 w-[200px]" />
|
|
</div>
|
|
</div>
|
|
<div className="hidden md:block items-center gap-4 max-w-sm mx-auto lg:flex">
|
|
<Skeleton className="h-[73px] w-16 rounded-md" />
|
|
<div className="space-y-2">
|
|
<Skeleton className="h-4 w-[250px]" />
|
|
<Skeleton className="h-4 w-[200px]" />
|
|
</div>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<ul className="py-4 lg:py-0 flex flex-row lg:flex-col gap-4 flex-nowrap w-[95vw] lg:w-auto overflow-x-auto">
|
|
{content?.map((item: any) => (
|
|
<li key={item?.id} className="flex gap-4 flex-row lg:w-full ">
|
|
<div className="flex-shrink-0 w-24 rounded-lg">
|
|
<Image
|
|
width={720}
|
|
height={480}
|
|
src={item?.thumbnailLink}
|
|
alt={item?.title}
|
|
className="w-full h-[73px] object-cover rounded-lg"
|
|
/>
|
|
</div>
|
|
<div className="w-[280px] lg:w-auto">
|
|
<span className="text-white bg-[#bb3523] px-4 py-1 rounded-lg flex text-[8px] font-bold uppercase w-fit">
|
|
{item?.categoryName}
|
|
</span>
|
|
<Link
|
|
href={
|
|
Number(item?.fileType?.id) == 1
|
|
? `${
|
|
asPath.includes("/satker/") == true ? asPath : ""
|
|
}/image/detail/${item?.slug}`
|
|
: Number(item?.fileType?.id) == 2
|
|
? `/video/detail/${item?.slug}`
|
|
: Number(item?.fileType?.id) == 3
|
|
? `/document/detail/${item?.slug}`
|
|
: `/audio/detail/${item?.slug}`
|
|
}
|
|
>
|
|
<h3 className="text-base font-bold mt-2">
|
|
{textEllipsis(item?.title, 30)}
|
|
</h3>
|
|
</Link>
|
|
<p className="text-[10px] flex flex-row items-center gap-1 text-gray-500 mt-1">
|
|
{formatDateToIndonesian(new Date(item?.createdAt))}{" "}
|
|
{item?.timezone ? 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>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default HeaderBannerSatker;
|