feat: update conflict
This commit is contained in:
commit
59834d95e7
|
|
@ -560,7 +560,6 @@ export default function FormConvertSPIT() {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
return temp;
|
||||
};
|
||||
|
||||
|
|
@ -609,7 +608,8 @@ export default function FormConvertSPIT() {
|
|||
icon: "success",
|
||||
confirmButtonColor: "#3085d6",
|
||||
}).then(() => {
|
||||
router.push("/in/contributor/content/spit");
|
||||
// router.push("/in/contributor/content/spit");
|
||||
router.replace(`${window.location.pathname}?id=${id}`);
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Failed to save:", error);
|
||||
|
|
|
|||
|
|
@ -2,7 +2,12 @@ import { formatDateToIndonesian, shimmer, toBase64 } from "@/utils/globals";
|
|||
import React, { useEffect, useRef, useState } from "react";
|
||||
import "swiper/css/bundle";
|
||||
import "swiper/css/navigation";
|
||||
import { getHeroData, getListContent, listStaticBanner } from "@/service/landing/landing";
|
||||
import {
|
||||
getHeroData,
|
||||
getListContent,
|
||||
listPopUp,
|
||||
listStaticBanner,
|
||||
} from "@/service/landing/landing";
|
||||
import Link from "next/link";
|
||||
import { useParams, usePathname, useRouter } from "next/navigation";
|
||||
import {
|
||||
|
|
@ -29,22 +34,183 @@ type HeroModalProps = {
|
|||
satkerName?: string;
|
||||
};
|
||||
|
||||
// const HeroModal = ({
|
||||
// onClose,
|
||||
// group,
|
||||
// poldaName,
|
||||
// satkerName,
|
||||
// }: HeroModalProps) => {
|
||||
// const [heroData, setHeroData] = useState<any>();
|
||||
// const params = useParams();
|
||||
// const locale = params?.locale;
|
||||
// const swiperRef = useRef<SwiperClass | null>(null);
|
||||
|
||||
// useEffect(() => {
|
||||
// initFetch();
|
||||
// }, []);
|
||||
|
||||
// useEffect(() => {
|
||||
// document.body.classList.add("overflow-hidden");
|
||||
|
||||
// return () => {
|
||||
// document.body.classList.remove("overflow-hidden");
|
||||
// };
|
||||
// }, []);
|
||||
|
||||
// const initFetch = async () => {
|
||||
// if (group === "polda" && poldaName && String(poldaName).length > 1) {
|
||||
// const response = await listStaticBanner(poldaName, locale == "en");
|
||||
|
||||
// const banners =
|
||||
// response?.data?.data?.map((item: any) => {
|
||||
// const media = item?.mediaUpload;
|
||||
// if (media?.fileType) {
|
||||
// media.fileTypeId = media.fileType.id;
|
||||
// }
|
||||
// return media;
|
||||
// }) || [];
|
||||
|
||||
// console.log("banner Modal", banners);
|
||||
// setHeroData(banners);
|
||||
// } else {
|
||||
// console.log("Test");
|
||||
// setHeroData([]);
|
||||
// }
|
||||
// };
|
||||
|
||||
// return (
|
||||
// <div className="fixed inset-0 flex items-center justify-center backdrop-brightness-50 z-50 ">
|
||||
// <div className="relative dark:bg-gray-900 rounded-lg w-[90%] md:w-[600px] p-4 shadow-none">
|
||||
// {heroData?.length > 0 && (
|
||||
// <>
|
||||
// <button
|
||||
// className="absolute left-3 top-1/2 z-10 -translate-y-1/2 text-white text-3xl"
|
||||
// onClick={() => swiperRef.current?.slidePrev()}
|
||||
// >
|
||||
// <ChevronLeft />
|
||||
// </button>
|
||||
// <button
|
||||
// className="absolute right-3 top-1/2 z-10 -translate-y-1/2 text-white text-3xl"
|
||||
// onClick={() => swiperRef.current?.slideNext()}
|
||||
// >
|
||||
// <ChevronRight />
|
||||
// </button>
|
||||
// </>
|
||||
// )}
|
||||
// <Swiper
|
||||
// pagination={{ dynamicBullets: true }}
|
||||
// modules={[Pagination, Autoplay]}
|
||||
// onSwiper={(swiper) => (swiperRef.current = swiper)}
|
||||
// autoplay={{ delay: 3000 }}
|
||||
// className="mySwiper w-full"
|
||||
// >
|
||||
// <div className="relative h-[310px] lg:h-[420px]">
|
||||
// <button
|
||||
// onClick={onClose}
|
||||
// className="absolute top-3 right-3 text-gray-700 dark:text-gray-300 hover:text-black dark:hover:text-white border border-white bg-white rounded-full h-8 w-8 z-10"
|
||||
// >
|
||||
// ✕
|
||||
// </button>
|
||||
|
||||
// {heroData && heroData.length > 0 ? (
|
||||
// heroData.map((list: any, index: number) => (
|
||||
// <SwiperSlide key={list?.id}>
|
||||
// <div className="relative h-[310px] lg:h-[420px]">
|
||||
// <Image
|
||||
// priority={true}
|
||||
// src={list?.smallThumbnailLink}
|
||||
// alt="gambar-utama"
|
||||
// width={1920}
|
||||
// height={1080}
|
||||
// placeholder={`data:image/svg+xml;base64,${toBase64(
|
||||
// shimmer(700, 475)
|
||||
// )}`}
|
||||
// className="w-full h-[310px] lg:h-[420px] rounded-lg object-cover"
|
||||
// />
|
||||
|
||||
// <div className="absolute bottom-0 left-0 right-0 bg-black/30 backdrop-brightness-50 text-white pb-4 px-4 pt-8 rounded-bl-2xl rounded-tr-2xl mx-3 mb-2">
|
||||
// <div className="absolute top-0 left-0 bottom-0 w-2 bg-[#bb3523] rounded-bl-lg"></div>
|
||||
// <span className="absolute top-0 left-0 mt-2 mb-3 mx-3 bg-[#bb3523] text-white text-xs font-semibold uppercase px-2 py-1 rounded">
|
||||
// {list?.categoryName || "Liputan Kegiatan"}
|
||||
// </span>
|
||||
|
||||
// <Link href={`${locale}/image/detail/${list?.slug}`}>
|
||||
// <h2 className="text-lg leading-tight">{list?.title}</h2>
|
||||
// </Link>
|
||||
|
||||
// <p className="text-xs flex items-center gap-1 mt-2 opacity-80">
|
||||
// {formatDateToIndonesian(new Date(list?.createdAt))}{" "}
|
||||
// {list?.timezone || "WIB"} |{" "}
|
||||
// <svg
|
||||
// xmlns="http://www.w3.org/2000/svg"
|
||||
// width="1em"
|
||||
// height="1em"
|
||||
// viewBox="0 0 24 24"
|
||||
// className="inline-block"
|
||||
// >
|
||||
// <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>
|
||||
// {list?.clickCount}
|
||||
// </p>
|
||||
// </div>
|
||||
// </div>
|
||||
// </SwiperSlide>
|
||||
// ))
|
||||
// ) : (
|
||||
// <div className="flex items-center justify-center h-full">
|
||||
// <Image
|
||||
// priority={true}
|
||||
// width={1920}
|
||||
// height={1080}
|
||||
// src="/assets/empty-data.png"
|
||||
// alt="empty"
|
||||
// className="h-52 w-52 my-4"
|
||||
// />
|
||||
// </div>
|
||||
// )}
|
||||
// </div>
|
||||
|
||||
// <style jsx global>{`
|
||||
// .swiper-pagination-bullet {
|
||||
// background: white !important;
|
||||
// opacity: 0.7;
|
||||
// }
|
||||
// .swiper-pagination-bullet-active {
|
||||
// background: white !important;
|
||||
// opacity: 1;
|
||||
// }
|
||||
// `}</style>
|
||||
// </Swiper>
|
||||
// </div>
|
||||
// </div>
|
||||
// );
|
||||
// };
|
||||
|
||||
const HeroModal = ({
|
||||
onClose,
|
||||
group,
|
||||
poldaName,
|
||||
satkerName,
|
||||
}: HeroModalProps) => {
|
||||
const [heroData, setHeroData] = useState<any>();
|
||||
const [heroData, setHeroData] = useState<any[]>([]);
|
||||
const params = useParams();
|
||||
const locale = params?.locale;
|
||||
const swiperRef = useRef<SwiperClass | null>(null);
|
||||
const pathname = usePathname();
|
||||
const modalRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
let prefixPath = "";
|
||||
if (group === "polda" && poldaName) {
|
||||
prefixPath = `/polda/${poldaName}`;
|
||||
} else if (group === "satker" && satkerName) {
|
||||
prefixPath = `/satker/${satkerName}`;
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
initFetch();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
document.body.classList.add("overflow-hidden");
|
||||
|
||||
return () => {
|
||||
|
|
@ -53,29 +219,35 @@ const HeroModal = ({
|
|||
}, []);
|
||||
|
||||
const initFetch = async () => {
|
||||
if (group === "polda" && poldaName && String(poldaName).length > 1) {
|
||||
const response = await listStaticBanner(poldaName, locale == "en");
|
||||
const response = await listPopUp(
|
||||
group === "mabes"
|
||||
? ""
|
||||
: group === "polda" && poldaName
|
||||
? poldaName
|
||||
: group === "satker" && satkerName
|
||||
? "satker-" + satkerName
|
||||
: "",
|
||||
locale == "en"
|
||||
);
|
||||
const interstitial = response?.data?.data || [];
|
||||
setHeroData(interstitial);
|
||||
};
|
||||
|
||||
const banners =
|
||||
response?.data?.data?.map((item: any) => {
|
||||
const media = item?.mediaUpload;
|
||||
if (media?.fileType) {
|
||||
media.fileTypeId = media.fileType.id;
|
||||
}
|
||||
return media;
|
||||
}) || [];
|
||||
|
||||
console.log("banner Modal", banners);
|
||||
setHeroData(banners);
|
||||
} else {
|
||||
console.log("Test");
|
||||
setHeroData([]);
|
||||
const handleClickOutside = (event: React.MouseEvent<HTMLDivElement>) => {
|
||||
if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 flex items-center justify-center backdrop-brightness-50 z-50 ">
|
||||
<div className="relative dark:bg-gray-900 rounded-lg w-[90%] md:w-[600px] p-4 shadow-none">
|
||||
<div
|
||||
onClick={handleClickOutside}
|
||||
className="fixed inset-0 flex items-center justify-center backdrop-brightness-50 z-50"
|
||||
>
|
||||
<div
|
||||
ref={modalRef}
|
||||
className="relative dark:bg-gray-900 rounded-lg w-[90%] md:w-[600px] p-4 shadow-none"
|
||||
>
|
||||
{heroData?.length > 0 && (
|
||||
<>
|
||||
<button
|
||||
|
|
@ -99,75 +271,65 @@ const HeroModal = ({
|
|||
autoplay={{ delay: 3000 }}
|
||||
className="mySwiper w-full"
|
||||
>
|
||||
<div className="relative h-[310px] lg:h-[420px]">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="absolute top-3 right-3 text-gray-700 dark:text-gray-300 hover:text-black dark:hover:text-white border border-white bg-white rounded-full h-8 w-8 z-10"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
|
||||
{heroData && heroData.length > 0 ? (
|
||||
heroData.map((list: any, index: number) => (
|
||||
<SwiperSlide key={list?.id}>
|
||||
<div className="relative h-[310px] lg:h-[420px]">
|
||||
<Image
|
||||
priority={true}
|
||||
src={list?.smallThumbnailLink}
|
||||
alt="gambar-utama"
|
||||
width={1920}
|
||||
height={1080}
|
||||
placeholder={`data:image/svg+xml;base64,${toBase64(
|
||||
shimmer(700, 475)
|
||||
)}`}
|
||||
className="w-full h-[310px] lg:h-[420px] rounded-lg object-cover"
|
||||
/>
|
||||
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-black/30 backdrop-brightness-50 text-white pb-4 px-4 pt-8 rounded-bl-2xl rounded-tr-2xl mx-3 mb-2">
|
||||
<div className="absolute top-0 left-0 bottom-0 w-2 bg-[#bb3523] rounded-bl-lg"></div>
|
||||
<span className="absolute top-0 left-0 mt-2 mb-3 mx-3 bg-[#bb3523] text-white text-xs font-semibold uppercase px-2 py-1 rounded">
|
||||
{list?.categoryName || "Liputan Kegiatan"}
|
||||
</span>
|
||||
|
||||
<Link href={`${locale}/image/detail/${list?.slug}`}>
|
||||
<h2 className="text-lg leading-tight">{list?.title}</h2>
|
||||
</Link>
|
||||
|
||||
<p className="text-xs flex items-center gap-1 mt-2 opacity-80">
|
||||
{formatDateToIndonesian(new Date(list?.createdAt))}{" "}
|
||||
{list?.timezone || "WIB"} |{" "}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
className="inline-block"
|
||||
>
|
||||
<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>
|
||||
{list?.clickCount}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
))
|
||||
) : (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
{heroData.map((list: any) => (
|
||||
<SwiperSlide key={list?.id}>
|
||||
<div className="relative h-[310px] lg:h-[420px]">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="absolute top-3 right-3 text-gray-700 dark:text-gray-300 hover:text-black dark:hover:text-white border border-white bg-white rounded-full h-8 w-8"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
<Image
|
||||
priority={true}
|
||||
src={list?.smallThumbnailLink}
|
||||
alt="gambar-utama"
|
||||
width={1920}
|
||||
height={1080}
|
||||
src="/assets/empty-data.png"
|
||||
alt="empty"
|
||||
className="h-52 w-52 my-4"
|
||||
placeholder={`data:image/svg+xml;base64,${toBase64(
|
||||
shimmer(700, 475)
|
||||
)}`}
|
||||
className="w-full h-[310px] lg:h-[420px] rounded-lg object-cover"
|
||||
/>
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-black/30 backdrop-brightness-50 text-white pb-4 px-4 pt-8 rounded-bl-2xl rounded-tr-2xl mx-3 mb-2">
|
||||
<div className="absolute top-0 left-0 bottom-0 w-2 bg-[#bb3523] rounded-bl-lg"></div>
|
||||
<span className="absolute top-0 left-0 mt-2 mb-3 mx-3 bg-[#bb3523] text-white text-xs font-semibold uppercase px-2 py-1 rounded">
|
||||
{list?.categoryName || "Liputan Kegiatan"}
|
||||
</span>
|
||||
<Link
|
||||
href={
|
||||
Number(list?.fileTypeId) === 1
|
||||
? `${prefixPath}/image/detail/${list?.slug}`
|
||||
: Number(list?.fileTypeId) === 2
|
||||
? `${prefixPath}/video/detail/${list?.slug}`
|
||||
: Number(list?.fileTypeId) === 3
|
||||
? `${prefixPath}/document/detail/${list?.slug}`
|
||||
: `${prefixPath}/audio/detail/${list?.slug}`
|
||||
}
|
||||
>
|
||||
<h2 className="text-lg leading-tight">{list?.title}</h2>
|
||||
</Link>
|
||||
<p className="text-xs flex items-center gap-1 mt-2 opacity-80">
|
||||
{formatDateToIndonesian(new Date(list?.createdAt))}{" "}
|
||||
{list?.timezone || "WIB"} |{" "}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
className="inline-block"
|
||||
>
|
||||
<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>
|
||||
{list?.clickCount}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</SwiperSlide>
|
||||
))}
|
||||
<style jsx global>{`
|
||||
.swiper-pagination-bullet {
|
||||
background: white !important;
|
||||
|
|
|
|||
|
|
@ -2,21 +2,41 @@ import { formatDateToIndonesian, shimmer, toBase64 } from "@/utils/globals";
|
|||
import React, { useEffect, useRef, useState } from "react";
|
||||
import "swiper/css/bundle";
|
||||
import "swiper/css/navigation";
|
||||
import { getHeroData, listStaticBanner } from "@/service/landing/landing";
|
||||
import { getHeroData, listPopUp, listStaticBanner } from "@/service/landing/landing";
|
||||
import Link from "next/link";
|
||||
import { useParams, usePathname, useRouter } from "next/navigation";
|
||||
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
|
||||
import {
|
||||
Carousel,
|
||||
CarouselContent,
|
||||
CarouselItem,
|
||||
CarouselNext,
|
||||
CarouselPrevious,
|
||||
} from "@/components/ui/carousel";
|
||||
import { Skeleton } from "../ui/skeleton";
|
||||
import Image from "next/image";
|
||||
import Cookies from "js-cookie";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
|
||||
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../ui/card";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "../ui/card";
|
||||
import { Label } from "../ui/label";
|
||||
import { Input } from "../ui/input";
|
||||
import { Button } from "../ui/button";
|
||||
import { Textarea } from "../ui/textarea";
|
||||
import { Checkbox } from "../ui/checkbox";
|
||||
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "../ui/dialog";
|
||||
import {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "../ui/dialog";
|
||||
import { Autoplay, Navigation, Pagination } from "swiper/modules";
|
||||
import { Swiper, SwiperClass, SwiperSlide } from "swiper/react";
|
||||
import "swiper/css";
|
||||
|
|
@ -31,35 +51,155 @@ type HeroModalProps = {
|
|||
satkerName?: string;
|
||||
};
|
||||
|
||||
const HeroModal = ({ onClose, group, poldaName, satkerName }: HeroModalProps) => {
|
||||
const [heroData, setHeroData] = useState<any>();
|
||||
// const HeroModal = ({ onClose, group, poldaName, satkerName }: HeroModalProps) => {
|
||||
// const [heroData, setHeroData] = useState<any>();
|
||||
// const params = useParams();
|
||||
// const locale = params?.locale;
|
||||
// const swiperRef = useRef<SwiperClass | null>(null);
|
||||
|
||||
// useEffect(() => {
|
||||
// async function fetchCategories() {
|
||||
// const url = "https://netidhub.com/api/csrf";
|
||||
|
||||
// try {
|
||||
// const response = await fetch(url);
|
||||
|
||||
// if (!response.ok) {
|
||||
// throw new Error(`HTTP error! status: ${response.status}`);
|
||||
// }
|
||||
|
||||
// const data = await response.json();
|
||||
// return data;
|
||||
// } catch (error) {
|
||||
// console.error("Fetch error: ", error);
|
||||
// }
|
||||
// }
|
||||
|
||||
// fetchCategories();
|
||||
// initFetch();
|
||||
// }, []);
|
||||
|
||||
// useEffect(() => {
|
||||
// document.body.classList.add("overflow-hidden");
|
||||
|
||||
// return () => {
|
||||
// document.body.classList.remove("overflow-hidden");
|
||||
// };
|
||||
// }, []);
|
||||
|
||||
// const initFetch = async () => {
|
||||
// if (group === "satker" && satkerName && String(satkerName).length > 1) {
|
||||
// const response = await listStaticBanner(satkerName, locale == "en");
|
||||
|
||||
// const banners =
|
||||
// response?.data?.data?.map((item: any) => {
|
||||
// const media = item?.mediaUpload;
|
||||
// if (media?.fileType) {
|
||||
// media.fileTypeId = media.fileType.id;
|
||||
// }
|
||||
// return media;
|
||||
// }) || [];
|
||||
|
||||
// console.log("banner Modal", banners);
|
||||
// setHeroData(banners);
|
||||
// } else {
|
||||
// console.log("Test");
|
||||
// setHeroData([]);
|
||||
// }
|
||||
// };
|
||||
|
||||
// return (
|
||||
// <div className="fixed inset-0 flex items-center justify-center backdrop-brightness-50 z-50 ">
|
||||
// <div className="relative dark:bg-gray-900 rounded-lg w-[90%] md:w-[600px] p-4 shadow-none">
|
||||
// {heroData?.length > 0 && (
|
||||
// <>
|
||||
// <button className="absolute left-3 top-1/2 z-10 -translate-y-1/2 text-white text-3xl" onClick={() => swiperRef.current?.slidePrev()}>
|
||||
// <ChevronLeft />
|
||||
// </button>
|
||||
// <button className="absolute right-3 top-1/2 z-10 -translate-y-1/2 text-white text-3xl" onClick={() => swiperRef.current?.slideNext()}>
|
||||
// <ChevronRight />
|
||||
// </button>
|
||||
// </>
|
||||
// )}
|
||||
// <Swiper pagination={{ dynamicBullets: true }} modules={[Pagination, Autoplay]} onSwiper={(swiper) => (swiperRef.current = swiper)} autoplay={{ delay: 3000 }} className="mySwiper w-full">
|
||||
// <div className="relative h-[310px] lg:h-[420px]">
|
||||
// <button onClick={onClose} className="absolute top-3 right-3 text-gray-700 dark:text-gray-300 hover:text-black dark:hover:text-white border border-white bg-white rounded-full h-8 w-8 z-10">
|
||||
// ✕
|
||||
// </button>
|
||||
|
||||
// {heroData && heroData.length > 0 ? (
|
||||
// heroData.map((list: any, index: number) => (
|
||||
// <SwiperSlide key={list?.id}>
|
||||
// <div className="relative h-[310px] lg:h-[420px]">
|
||||
// <Image priority={true} src={list?.smallThumbnailLink} alt="gambar-utama" width={1920} height={1080} placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} className="w-full h-[310px] lg:h-[420px] rounded-lg object-cover" />
|
||||
|
||||
// <div className="absolute bottom-0 left-0 right-0 bg-black/30 backdrop-brightness-50 text-white pb-4 px-4 pt-8 rounded-bl-2xl rounded-tr-2xl mx-3 mb-2">
|
||||
// <div className="absolute top-0 left-0 bottom-0 w-2 bg-[#bb3523] rounded-bl-lg"></div>
|
||||
// <span className="absolute top-0 left-0 mt-2 mb-3 mx-3 bg-[#bb3523] text-white text-xs font-semibold uppercase px-2 py-1 rounded">{list?.categoryName || "Liputan Kegiatan"}</span>
|
||||
|
||||
// <Link href={`${locale}/image/detail/${list?.slug}`}>
|
||||
// <h2 className="text-lg leading-tight">{list?.title}</h2>
|
||||
// </Link>
|
||||
|
||||
// <p className="text-xs flex items-center gap-1 mt-2 opacity-80">
|
||||
// {formatDateToIndonesian(new Date(list?.createdAt))} {list?.timezone || "WIB"} |{" "}
|
||||
// <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" className="inline-block">
|
||||
// <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>
|
||||
// {list?.clickCount}
|
||||
// </p>
|
||||
// </div>
|
||||
// </div>
|
||||
// </SwiperSlide>
|
||||
// ))
|
||||
// ) : (
|
||||
// <div className="flex items-center justify-center h-full">
|
||||
// <Image priority={true} width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
|
||||
// </div>
|
||||
// )}
|
||||
// </div>
|
||||
|
||||
// <style jsx global>{`
|
||||
// .swiper-pagination-bullet {
|
||||
// background: white !important;
|
||||
// opacity: 0.7;
|
||||
// }
|
||||
// .swiper-pagination-bullet-active {
|
||||
// background: white !important;
|
||||
// opacity: 1;
|
||||
// }
|
||||
// `}</style>
|
||||
// </Swiper>
|
||||
// </div>
|
||||
// </div>
|
||||
// );
|
||||
// };
|
||||
|
||||
const HeroModal = ({
|
||||
onClose,
|
||||
group,
|
||||
poldaName,
|
||||
satkerName,
|
||||
}: HeroModalProps) => {
|
||||
const [heroData, setHeroData] = useState<any[]>([]);
|
||||
const params = useParams();
|
||||
const locale = params?.locale;
|
||||
const swiperRef = useRef<SwiperClass | null>(null);
|
||||
const pathname = usePathname();
|
||||
const modalRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
let prefixPath = "";
|
||||
if (group === "polda" && poldaName) {
|
||||
prefixPath = `/polda/${poldaName}`;
|
||||
} else if (group === "satker" && satkerName) {
|
||||
prefixPath = `/satker/${satkerName}`;
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchCategories() {
|
||||
const url = "https://mediahub.polri.go.id/api/v2/csrf";
|
||||
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
return data;
|
||||
} catch (error) {
|
||||
console.error("Fetch error: ", error);
|
||||
}
|
||||
}
|
||||
|
||||
fetchCategories();
|
||||
initFetch();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
document.body.classList.add("overflow-hidden");
|
||||
|
||||
return () => {
|
||||
|
|
@ -68,80 +208,117 @@ const HeroModal = ({ onClose, group, poldaName, satkerName }: HeroModalProps) =>
|
|||
}, []);
|
||||
|
||||
const initFetch = async () => {
|
||||
if (group === "satker" && satkerName && String(satkerName).length > 1) {
|
||||
const response = await listStaticBanner(satkerName, locale == "en");
|
||||
const response = await listPopUp(
|
||||
group === "mabes"
|
||||
? ""
|
||||
: group === "polda" && poldaName
|
||||
? poldaName
|
||||
: group === "satker" && satkerName
|
||||
? "satker-" + satkerName
|
||||
: "",
|
||||
locale == "en"
|
||||
);
|
||||
const interstitial = response?.data?.data || [];
|
||||
setHeroData(interstitial);
|
||||
};
|
||||
|
||||
const banners =
|
||||
response?.data?.data?.map((item: any) => {
|
||||
const media = item?.mediaUpload;
|
||||
if (media?.fileType) {
|
||||
media.fileTypeId = media.fileType.id;
|
||||
}
|
||||
return media;
|
||||
}) || [];
|
||||
|
||||
console.log("banner Modal", banners);
|
||||
setHeroData(banners);
|
||||
} else {
|
||||
console.log("Test");
|
||||
setHeroData([]);
|
||||
const handleClickOutside = (event: React.MouseEvent<HTMLDivElement>) => {
|
||||
if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 flex items-center justify-center backdrop-brightness-50 z-50 ">
|
||||
<div className="relative dark:bg-gray-900 rounded-lg w-[90%] md:w-[600px] p-4 shadow-none">
|
||||
<div
|
||||
onClick={handleClickOutside}
|
||||
className="fixed inset-0 flex items-center justify-center backdrop-brightness-50 z-50"
|
||||
>
|
||||
<div
|
||||
ref={modalRef}
|
||||
className="relative dark:bg-gray-900 rounded-lg w-[90%] md:w-[600px] p-4 shadow-none"
|
||||
>
|
||||
{heroData?.length > 0 && (
|
||||
<>
|
||||
<button className="absolute left-3 top-1/2 z-10 -translate-y-1/2 text-white text-3xl" onClick={() => swiperRef.current?.slidePrev()}>
|
||||
<button
|
||||
className="absolute left-3 top-1/2 z-10 -translate-y-1/2 text-white text-3xl"
|
||||
onClick={() => swiperRef.current?.slidePrev()}
|
||||
>
|
||||
<ChevronLeft />
|
||||
</button>
|
||||
<button className="absolute right-3 top-1/2 z-10 -translate-y-1/2 text-white text-3xl" onClick={() => swiperRef.current?.slideNext()}>
|
||||
<button
|
||||
className="absolute right-3 top-1/2 z-10 -translate-y-1/2 text-white text-3xl"
|
||||
onClick={() => swiperRef.current?.slideNext()}
|
||||
>
|
||||
<ChevronRight />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
<Swiper pagination={{ dynamicBullets: true }} modules={[Pagination, Autoplay]} onSwiper={(swiper) => (swiperRef.current = swiper)} autoplay={{ delay: 3000 }} className="mySwiper w-full">
|
||||
<div className="relative h-[310px] lg:h-[420px]">
|
||||
<button onClick={onClose} className="absolute top-3 right-3 text-gray-700 dark:text-gray-300 hover:text-black dark:hover:text-white border border-white bg-white rounded-full h-8 w-8 z-10">
|
||||
✕
|
||||
</button>
|
||||
|
||||
{heroData && heroData.length > 0 ? (
|
||||
heroData.map((list: any, index: number) => (
|
||||
<SwiperSlide key={list?.id}>
|
||||
<div className="relative h-[310px] lg:h-[420px]">
|
||||
<Image priority={true} src={list?.smallThumbnailLink} alt="gambar-utama" width={1920} height={1080} placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} className="w-full h-[310px] lg:h-[420px] rounded-lg object-cover" />
|
||||
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-black/30 backdrop-brightness-50 text-white pb-4 px-4 pt-8 rounded-bl-2xl rounded-tr-2xl mx-3 mb-2">
|
||||
<div className="absolute top-0 left-0 bottom-0 w-2 bg-[#bb3523] rounded-bl-lg"></div>
|
||||
<span className="absolute top-0 left-0 mt-2 mb-3 mx-3 bg-[#bb3523] text-white text-xs font-semibold uppercase px-2 py-1 rounded">{list?.categoryName || "Liputan Kegiatan"}</span>
|
||||
|
||||
<Link href={`${locale}/image/detail/${list?.slug}`}>
|
||||
<h2 className="text-lg leading-tight">{list?.title}</h2>
|
||||
</Link>
|
||||
|
||||
<p className="text-xs flex items-center gap-1 mt-2 opacity-80">
|
||||
{formatDateToIndonesian(new Date(list?.createdAt))} {list?.timezone || "WIB"} |{" "}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" className="inline-block">
|
||||
<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>
|
||||
{list?.clickCount}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
))
|
||||
) : (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<Image priority={true} width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
|
||||
<Swiper
|
||||
pagination={{ dynamicBullets: true }}
|
||||
modules={[Pagination, Autoplay]}
|
||||
onSwiper={(swiper) => (swiperRef.current = swiper)}
|
||||
autoplay={{ delay: 3000 }}
|
||||
className="mySwiper w-full"
|
||||
>
|
||||
{heroData.map((list: any) => (
|
||||
<SwiperSlide key={list?.id}>
|
||||
<div className="relative h-[310px] lg:h-[420px]">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="absolute top-3 right-3 text-gray-700 dark:text-gray-300 hover:text-black dark:hover:text-white border border-white bg-white rounded-full h-8 w-8"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
<Image
|
||||
priority={true}
|
||||
src={list?.smallThumbnailLink}
|
||||
alt="gambar-utama"
|
||||
width={1920}
|
||||
height={1080}
|
||||
placeholder={`data:image/svg+xml;base64,${toBase64(
|
||||
shimmer(700, 475)
|
||||
)}`}
|
||||
className="w-full h-[310px] lg:h-[420px] rounded-lg object-cover"
|
||||
/>
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-black/30 backdrop-brightness-50 text-white pb-4 px-4 pt-8 rounded-bl-2xl rounded-tr-2xl mx-3 mb-2">
|
||||
<div className="absolute top-0 left-0 bottom-0 w-2 bg-[#bb3523] rounded-bl-lg"></div>
|
||||
<span className="absolute top-0 left-0 mt-2 mb-3 mx-3 bg-[#bb3523] text-white text-xs font-semibold uppercase px-2 py-1 rounded">
|
||||
{list?.categoryName || "Liputan Kegiatan"}
|
||||
</span>
|
||||
<Link
|
||||
href={
|
||||
Number(list?.fileTypeId) === 1
|
||||
? `${prefixPath}/image/detail/${list?.slug}`
|
||||
: Number(list?.fileTypeId) === 2
|
||||
? `${prefixPath}/video/detail/${list?.slug}`
|
||||
: Number(list?.fileTypeId) === 3
|
||||
? `${prefixPath}/document/detail/${list?.slug}`
|
||||
: `${prefixPath}/audio/detail/${list?.slug}`
|
||||
}
|
||||
>
|
||||
<h2 className="text-lg leading-tight">{list?.title}</h2>
|
||||
</Link>
|
||||
<p className="text-xs flex items-center gap-1 mt-2 opacity-80">
|
||||
{formatDateToIndonesian(new Date(list?.createdAt))}{" "}
|
||||
{list?.timezone || "WIB"} |{" "}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
className="inline-block"
|
||||
>
|
||||
<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>
|
||||
{list?.clickCount}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</SwiperSlide>
|
||||
))}
|
||||
<style jsx global>{`
|
||||
.swiper-pagination-bullet {
|
||||
background: white !important;
|
||||
|
|
@ -232,7 +409,12 @@ const HeroNewSatker = (props: { group?: string }) => {
|
|||
let data = response?.data?.data?.content;
|
||||
setHeroData(data);
|
||||
|
||||
if (data && props.group === "satker" && satkerName && String(satkerName)?.length > 1) {
|
||||
if (
|
||||
data &&
|
||||
props.group === "satker" &&
|
||||
satkerName &&
|
||||
String(satkerName)?.length > 1
|
||||
) {
|
||||
const resStatic = await listStaticBanner(satkerName, locale == "en");
|
||||
|
||||
for (let i = 0; i < resStatic?.data?.data?.length; i++) {
|
||||
|
|
@ -260,11 +442,18 @@ const HeroNewSatker = (props: { group?: string }) => {
|
|||
<animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite" />
|
||||
</svg>`;
|
||||
|
||||
const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
|
||||
const toBase64 = (str: string) =>
|
||||
typeof window === "undefined"
|
||||
? Buffer.from(str).toString("base64")
|
||||
: window.btoa(str);
|
||||
|
||||
return (
|
||||
<div className="flex items-start justify-center mx-auto w-auto">
|
||||
<div className="relative">{showModal && <HeroModal onClose={() => setShowModal(false)} group="satker" />}</div>
|
||||
<div className="relative">
|
||||
{showModal && (
|
||||
<HeroModal onClose={() => setShowModal(false)} group="satker" />
|
||||
)}
|
||||
</div>
|
||||
{isLoading ? (
|
||||
<div className="flex flex-col space-y-3 mx-auto w-full lg:w-2/3">
|
||||
<Skeleton className="h-[310px] lg:h-[420px]" />
|
||||
|
|
@ -280,7 +469,17 @@ const HeroNewSatker = (props: { group?: string }) => {
|
|||
{content?.map((list: any) => (
|
||||
<CarouselItem key={list?.id}>
|
||||
<div className="relative h-[310px] lg:h-[700px] mt-1">
|
||||
<Image priority={true} src={list?.smallThumbnailLink} alt="gambar-utama" width={1920} height={1080} placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} className="w-full h-[320px] lg:h-[700px] object-cover" />
|
||||
<Image
|
||||
priority={true}
|
||||
src={list?.smallThumbnailLink}
|
||||
alt="gambar-utama"
|
||||
width={1920}
|
||||
height={1080}
|
||||
placeholder={`data:image/svg+xml;base64,${toBase64(
|
||||
shimmer(700, 475)
|
||||
)}`}
|
||||
className="w-full h-[320px] lg:h-[700px] object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black bg-opacity-40" />
|
||||
|
||||
<Link
|
||||
|
|
@ -295,10 +494,15 @@ const HeroNewSatker = (props: { group?: string }) => {
|
|||
}
|
||||
>
|
||||
<div className="absolute bottom-20 left-32 w-[60%] lg:w-[45%] text-white px-4 pt-10 pb-4">
|
||||
<span className="absolute top-0 left-3 text-red-600 text-lg font-bold uppercase px-1 py-2 rounded">{list?.categoryName || "Liputan Kegiatan"}</span>
|
||||
<h2 className="text-xl font-bold leading-tight">{list?.title}</h2>
|
||||
<span className="absolute top-0 left-3 text-red-600 text-lg font-bold uppercase px-1 py-2 rounded">
|
||||
{list?.categoryName || "Liputan Kegiatan"}
|
||||
</span>
|
||||
<h2 className="text-xl font-bold leading-tight">
|
||||
{list?.title}
|
||||
</h2>
|
||||
<p className="text-base flex items-center gap-1 mt-2 opacity-80">
|
||||
{formatDateToIndonesian(new Date(list?.createdAt))} {list?.timezone || "WIB"} | 👁 {list?.clickCount}
|
||||
{formatDateToIndonesian(new Date(list?.createdAt))}{" "}
|
||||
{list?.timezone || "WIB"} | 👁 {list?.clickCount}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
|
|
@ -312,7 +516,17 @@ const HeroNewSatker = (props: { group?: string }) => {
|
|||
{heroData?.slice(0, 3).map((item: any) => (
|
||||
<li key={item?.id} className="flex gap-4 flex-row lg:w-full mx-2">
|
||||
<div className="flex-shrink-0 w-32 rounded-lg">
|
||||
<Image priority={true} placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={720} height={480} src={item?.smallThumbnailLink} alt={item?.title} className="w-full h-[100px] object-cover rounded-lg" />
|
||||
<Image
|
||||
priority={true}
|
||||
placeholder={`data:image/svg+xml;base64,${toBase64(
|
||||
shimmer(700, 475)
|
||||
)}`}
|
||||
width={720}
|
||||
height={480}
|
||||
src={item?.smallThumbnailLink}
|
||||
alt={item?.title}
|
||||
className="w-full h-[100px] object-cover rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-[280px] lg:w-[200px]">
|
||||
<Link
|
||||
|
|
@ -326,11 +540,21 @@ const HeroNewSatker = (props: { group?: string }) => {
|
|||
: `${locale}/audio/detail/${item?.slug}`
|
||||
}
|
||||
>
|
||||
<span className="py-1 rounded-lg flex text-red-600 font-bold uppercase w-fit">{item?.categoryName}</span>
|
||||
<h3 className="text-base text-white font-bold h-6 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{item?.title}</h3>
|
||||
<span className="py-1 rounded-lg flex text-red-600 font-bold uppercase w-fit">
|
||||
{item?.categoryName}
|
||||
</span>
|
||||
<h3 className="text-base text-white font-bold h-6 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">
|
||||
{item?.title}
|
||||
</h3>
|
||||
<p className="text-[10px] flex flex-row items-center gap-1 text-white mt-1">
|
||||
{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">
|
||||
{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"
|
||||
|
|
|
|||
|
|
@ -63,32 +63,22 @@ const HeroModal = ({
|
|||
poldaName,
|
||||
satkerName,
|
||||
}: HeroModalProps) => {
|
||||
const [heroData, setHeroData] = useState<any>();
|
||||
const [heroData, setHeroData] = useState<any[]>([]);
|
||||
const params = useParams();
|
||||
const locale = params?.locale;
|
||||
const swiperRef = useRef<SwiperClass | null>(null);
|
||||
const pathname = usePathname();
|
||||
const modalRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Remove the early return condition that was preventing modal from showing on polda/satker paths
|
||||
// if (pathname?.includes("/polda") || pathname?.includes("/satker")) {
|
||||
// return null;
|
||||
// }
|
||||
|
||||
// Fix prefixPath logic to handle all content types properly
|
||||
let prefixPath = "";
|
||||
if (group === "polda" && poldaName) {
|
||||
prefixPath = `/polda/${poldaName}`;
|
||||
} else if (group === "satker" && satkerName) {
|
||||
prefixPath = `/satker/${satkerName}`;
|
||||
}
|
||||
// For mabes group, prefixPath remains empty string
|
||||
|
||||
useEffect(() => {
|
||||
console.log("Show modal popup list");
|
||||
initFetch();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
document.body.classList.add("overflow-hidden");
|
||||
|
||||
return () => {
|
||||
|
|
@ -96,26 +86,58 @@ const HeroModal = ({
|
|||
};
|
||||
}, []);
|
||||
|
||||
// const initFetch = async () => {
|
||||
// const response = await listPopUp(
|
||||
// group === "mabes"
|
||||
// ? ""
|
||||
// : group === "polda" && poldaName
|
||||
// ? poldaName
|
||||
// : group === "satker" && satkerName
|
||||
// ? "satker-" + satkerName
|
||||
// : "",
|
||||
// locale == "en"
|
||||
// );
|
||||
// const interstitial = response?.data?.data || [];
|
||||
// setHeroData(interstitial);
|
||||
// };
|
||||
|
||||
const initFetch = async () => {
|
||||
const response = await listPopUp(
|
||||
const response = await listStaticBanner(
|
||||
group === "mabes"
|
||||
? ""
|
||||
: group === "polda" && poldaName && String(poldaName)?.length > 1
|
||||
: group === "polda" && poldaName
|
||||
? poldaName
|
||||
: group === "satker" && satkerName && String(satkerName)?.length > 1
|
||||
: group === "satker" && satkerName
|
||||
? "satker-" + satkerName
|
||||
: "",
|
||||
locale == "en"
|
||||
locale === "en"
|
||||
);
|
||||
|
||||
const interstitial = response?.data?.data || [];
|
||||
console.log("banner Modal", interstitial);
|
||||
setHeroData(interstitial);
|
||||
const banners = response?.data?.data || [];
|
||||
|
||||
const enrichedData = banners.map((item: any) => ({
|
||||
...item,
|
||||
fileTypeId: item?.fileType?.id ?? null,
|
||||
}));
|
||||
|
||||
setHeroData(enrichedData);
|
||||
};
|
||||
|
||||
const handleClickOutside = (event: React.MouseEvent<HTMLDivElement>) => {
|
||||
if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 flex items-center justify-center backdrop-brightness-50 z-50 ">
|
||||
<div className="relative dark:bg-gray-900 rounded-lg w-[90%] md:w-[600px] p-4 shadow-none">
|
||||
<div
|
||||
onClick={handleClickOutside}
|
||||
className="fixed inset-0 flex items-center justify-center backdrop-brightness-50 z-50"
|
||||
>
|
||||
<div
|
||||
ref={modalRef}
|
||||
className="relative dark:bg-gray-900 rounded-lg w-[90%] md:w-[600px] p-4 shadow-none"
|
||||
>
|
||||
{heroData?.length > 0 && (
|
||||
<>
|
||||
<button
|
||||
|
|
@ -139,7 +161,7 @@ const HeroModal = ({
|
|||
autoplay={{ delay: 3000 }}
|
||||
className="mySwiper w-full"
|
||||
>
|
||||
{heroData?.map((list: any, index: number) => (
|
||||
{heroData.map((list: any) => (
|
||||
<SwiperSlide key={list?.id}>
|
||||
<div className="relative h-[310px] lg:h-[420px]">
|
||||
<button
|
||||
|
|
@ -159,27 +181,24 @@ const HeroModal = ({
|
|||
)}`}
|
||||
className="w-full h-[310px] lg:h-[420px] rounded-lg object-cover"
|
||||
/>
|
||||
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-black/30 backdrop-brightness-50 text-white pb-4 px-4 pt-8 rounded-bl-2xl rounded-tr-2xl mx-3 mb-2">
|
||||
<div className="absolute top-0 left-0 bottom-0 w-2 bg-[#bb3523] rounded-bl-lg"></div>
|
||||
<span className="absolute top-0 left-0 mt-2 mb-3 mx-3 bg-[#bb3523] text-white text-xs font-semibold uppercase px-2 py-1 rounded">
|
||||
{list?.categoryName || "Liputan Kegiatan"}
|
||||
</span>
|
||||
|
||||
<Link
|
||||
href={
|
||||
Number(list?.fileTypeId) == 1
|
||||
Number(list?.fileTypeId) === 1
|
||||
? `${prefixPath}/image/detail/${list?.slug}`
|
||||
: Number(list?.fileTypeId) == 2
|
||||
: Number(list?.fileTypeId) === 2
|
||||
? `${prefixPath}/video/detail/${list?.slug}`
|
||||
: Number(list?.fileTypeId) == 3
|
||||
: Number(list?.fileTypeId) === 3
|
||||
? `${prefixPath}/document/detail/${list?.slug}`
|
||||
: `${prefixPath}/audio/detail/${list?.slug}`
|
||||
}
|
||||
>
|
||||
<h2 className="text-lg leading-tight">{list?.title}</h2>
|
||||
</Link>
|
||||
|
||||
<p className="text-xs flex items-center gap-1 mt-2 opacity-80">
|
||||
{formatDateToIndonesian(new Date(list?.createdAt))}{" "}
|
||||
{list?.timezone || "WIB"} |{" "}
|
||||
|
|
@ -386,7 +405,7 @@ const HeroNew = (props: { group?: string }) => {
|
|||
locale == "en"
|
||||
);
|
||||
|
||||
for (let i = resStatic?.data?.data?.length; i >= 0 ; i--) {
|
||||
for (let i = resStatic?.data?.data?.length; i >= 0; i--) {
|
||||
const media = resStatic?.data?.data[i];
|
||||
if (!media) continue;
|
||||
media.fileTypeId = media?.fileType?.id ?? null;
|
||||
|
|
@ -440,12 +459,11 @@ const HeroNew = (props: { group?: string }) => {
|
|||
</div>
|
||||
) : (
|
||||
<div className="relative w-full h-full">
|
||||
<Carousel className="relative w-full">
|
||||
{/* <Carousel className="relative w-full">
|
||||
<CarouselContent>
|
||||
{content?.map((list: any) => (
|
||||
<CarouselItem key={list?.id}>
|
||||
<div className="relative h-[310px] lg:h-[700px]">
|
||||
{/* Gambar */}
|
||||
<Image
|
||||
priority={true}
|
||||
src={list?.smallThumbnailLink}
|
||||
|
|
@ -454,10 +472,8 @@ const HeroNew = (props: { group?: string }) => {
|
|||
className="object-cover w-full h-full"
|
||||
/>
|
||||
|
||||
{/* Overlay hitam transparan */}
|
||||
<div className="absolute inset-0 bg-black/40 z-10" />
|
||||
|
||||
{/* Konten judul, dll */}
|
||||
<Link
|
||||
href={
|
||||
Number(list?.fileTypeId) == 1
|
||||
|
|
@ -480,7 +496,6 @@ const HeroNew = (props: { group?: string }) => {
|
|||
</p>
|
||||
</Link>
|
||||
|
||||
{/* Tombol navigasi di atas gambar */}
|
||||
<CarouselPrevious className="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" />
|
||||
</CarouselPrevious>
|
||||
|
|
@ -491,9 +506,71 @@ const HeroNew = (props: { group?: string }) => {
|
|||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
</Carousel>
|
||||
</Carousel> */}
|
||||
|
||||
<div className="hidden lg:flex flex-col gap-3 absolute bottom-4 right-4 w-[520px] bg-black/40 p-4 rounded-lg z-10">
|
||||
<div className="relative w-full">
|
||||
<Swiper
|
||||
modules={[Autoplay, Navigation]}
|
||||
autoplay={{ delay: 3000, disableOnInteraction: false }}
|
||||
navigation={{
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
}}
|
||||
loop
|
||||
className="w-full"
|
||||
>
|
||||
{content?.map((list: any) => (
|
||||
<SwiperSlide key={list?.id}>
|
||||
<div className="relative h-[310px] lg:h-[700px]">
|
||||
{/* Gambar */}
|
||||
<Image
|
||||
priority
|
||||
src={list?.smallThumbnailLink}
|
||||
alt="gambar"
|
||||
fill
|
||||
className="object-cover w-full h-full"
|
||||
/>
|
||||
|
||||
{/* Overlay hitam transparan */}
|
||||
<div className="absolute inset-0 bg-black/40 z-10" />
|
||||
|
||||
{/* Konten judul */}
|
||||
<Link
|
||||
href={
|
||||
Number(list?.fileTypeId) === 1
|
||||
? `${prefixPath}/image/detail/${list?.slug}`
|
||||
: Number(list?.fileTypeId) === 2
|
||||
? `${prefixPath}/video/detail/${list?.slug}`
|
||||
: Number(list?.fileTypeId) === 3
|
||||
? `${prefixPath}/document/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"
|
||||
>
|
||||
<span className="text-red-600 text-lg font-bold uppercase">
|
||||
{list?.categoryName}
|
||||
</span>
|
||||
<h2 className="text-xl font-bold">{list?.title}</h2>
|
||||
<p className="text-sm mt-2">
|
||||
{formatDateToIndonesian(new Date(list?.createdAt))}{" "}
|
||||
{list?.timezone || "WIB"} | 👁 {list?.clickCount}
|
||||
</p>
|
||||
</Link>
|
||||
|
||||
{/* 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">
|
||||
<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>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
</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">
|
||||
{newContent?.slice(0, 3).map((item: any) => (
|
||||
<li key={item?.id} className="flex gap-4 flex-row lg:w-full mx-2">
|
||||
<div className="flex-shrink-0 w-32 rounded-lg">
|
||||
|
|
|
|||
|
|
@ -386,7 +386,11 @@ const Navbar = () => {
|
|||
</div>
|
||||
|
||||
{/* Languange */}
|
||||
<div className={`${isHidden ? "hidden" : "custom-lg-button:flex"} relative text-left`}>
|
||||
<div
|
||||
className={`${
|
||||
isHidden ? "hidden" : "custom-lg-button:flex"
|
||||
} relative text-left`}
|
||||
>
|
||||
<LocalSwitcher />
|
||||
</div>
|
||||
|
||||
|
|
@ -532,7 +536,8 @@ const Navbar = () => {
|
|||
aria-selected="false"
|
||||
onClick={() => setIsMessageActive(false)}
|
||||
>
|
||||
{t("update", { defaultValue: "Update" })}({notificationsUpdate?.length})
|
||||
{t("update", { defaultValue: "Update" })}(
|
||||
{notificationsUpdate?.length})
|
||||
</a>
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
|
@ -665,12 +670,16 @@ const Navbar = () => {
|
|||
<DropdownMenuGroup>
|
||||
{[
|
||||
{
|
||||
name: t("profileSetting", { defaultValue: "Profile Setting" }),
|
||||
name: t("profileSetting", {
|
||||
defaultValue: "Profile Setting",
|
||||
}),
|
||||
icon: "heroicons:user",
|
||||
href: "/profile",
|
||||
},
|
||||
{
|
||||
name: t("contentManagement", { defaultValue: "Content Management" }),
|
||||
name: t("contentManagement", {
|
||||
defaultValue: "Content Management",
|
||||
}),
|
||||
icon: "stash:save-ribbon-duotone",
|
||||
href: "/content-management/galery",
|
||||
},
|
||||
|
|
@ -763,7 +772,8 @@ const Navbar = () => {
|
|||
aria-selected="false"
|
||||
onClick={() => setIsMessageActive(false)}
|
||||
>
|
||||
{t("update", { defaultValue: "Update" })}({notificationsUpdate?.length})
|
||||
{t("update", { defaultValue: "Update" })}(
|
||||
{notificationsUpdate?.length})
|
||||
</a>
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
|
@ -938,7 +948,7 @@ const Navbar = () => {
|
|||
<div className="hidden custom-lg-button:flex flex-row justify-center items-center gap-5">
|
||||
<Link
|
||||
href="/auth"
|
||||
className="w-full lg:w-max px-4 py-1 bg-[#bb3523] text-white font-semibold rounded-md hover:bg-red-700 text-center"
|
||||
className="w-full lg:w-max px-4 py-1 bg-[#bb3523] text-white font-semibold rounded-md hover:bg-white hover:text-[#bb3523] hover:border hover:border-[#bb3523] text-center"
|
||||
>
|
||||
{t("logIn", { defaultValue: "Log In" })}
|
||||
</Link>
|
||||
|
|
@ -953,7 +963,9 @@ const Navbar = () => {
|
|||
<p className="text-lg font-semibold text-center">
|
||||
{t("categoryReg", { defaultValue: "Category Reg" })}
|
||||
</p>
|
||||
<p className="text-base text-center">{t("selectOne", { defaultValue: "Select One" })}</p>
|
||||
<p className="text-base text-center">
|
||||
{t("selectOne", { defaultValue: "Select One" })}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
{role?.map((row: any) => (
|
||||
|
|
@ -1376,7 +1388,8 @@ const Navbar = () => {
|
|||
aria-selected="false"
|
||||
onClick={() => setIsMessageActive(false)}
|
||||
>
|
||||
{t("update", { defaultValue: "Update" })}({notificationsUpdate?.length})
|
||||
{t("update", { defaultValue: "Update" })}(
|
||||
{notificationsUpdate?.length})
|
||||
</a>
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
|
@ -1511,12 +1524,16 @@ const Navbar = () => {
|
|||
<DropdownMenuGroup>
|
||||
{[
|
||||
{
|
||||
name: t("profileSetting", { defaultValue: "Profile Setting" }),
|
||||
name: t("profileSetting", {
|
||||
defaultValue: "Profile Setting",
|
||||
}),
|
||||
icon: "heroicons:user",
|
||||
href: "/profile",
|
||||
},
|
||||
{
|
||||
name: t("contentManagement", { defaultValue: "Content Management" }),
|
||||
name: t("contentManagement", {
|
||||
defaultValue: "Content Management",
|
||||
}),
|
||||
icon: "stash:save-ribbon-duotone",
|
||||
href: "/content-management/galery",
|
||||
},
|
||||
|
|
@ -1612,7 +1629,8 @@ const Navbar = () => {
|
|||
aria-selected="false"
|
||||
onClick={() => setIsMessageActive(false)}
|
||||
>
|
||||
{t("update", { defaultValue: "Update" })}({notificationsUpdate?.length})
|
||||
{t("update", { defaultValue: "Update" })}(
|
||||
{notificationsUpdate?.length})
|
||||
</a>
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
|
@ -1793,7 +1811,7 @@ const Navbar = () => {
|
|||
<div className="flex justify-center items-center mx-3 gap-1 lg:gap-1 xl:gap-5">
|
||||
<Link
|
||||
href="/auth"
|
||||
className="w-[50%] px-4 py-1 bg-[#bb3523] text-white font-semibold rounded-md hover:bg-red-700 text-center"
|
||||
className="w-[50%] px-4 py-1 bg-[#bb3523] text-white font-semibold rounded-md hover:bg-white hover:text-[#bb3523] hover:border hover:border-[#bb352 text-center"
|
||||
>
|
||||
{t("logIn", { defaultValue: "Log In" })}
|
||||
</Link>
|
||||
|
|
|
|||
Loading…
Reference in New Issue