366 lines
9.0 KiB
TypeScript
366 lines
9.0 KiB
TypeScript
"use client";
|
|
import { Button } from "@heroui/button";
|
|
import {
|
|
Image,
|
|
Modal,
|
|
ModalBody,
|
|
ModalContent,
|
|
ModalFooter,
|
|
ModalHeader,
|
|
ModalProps,
|
|
useDisclosure,
|
|
} from "@heroui/react";
|
|
import { ChevronLeftWhite, ChevronRightWhite } from "../icons";
|
|
import React, { useEffect, useState } from "react";
|
|
import Link from "next/link";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
const listPoldaAll = [
|
|
{
|
|
id: 1,
|
|
img: "/assets/polda/polda-metro-jaya.svg",
|
|
title: "Polda Metro Jaya",
|
|
path: "polda-metro-jaya",
|
|
},
|
|
{
|
|
id: 2,
|
|
img: "/assets/polda/polda-jawa-barat.svg",
|
|
title: "Polda Jawa Barat",
|
|
path: "polda-jabar",
|
|
},
|
|
{
|
|
id: 3,
|
|
img: "/assets/polda/polda-banten.svg",
|
|
title: "Polda Banten",
|
|
path: "polda-banten",
|
|
},
|
|
{
|
|
id: 4,
|
|
img: "/assets/polda/polda-jateng.svg",
|
|
title: "Polda Jawa Tengah",
|
|
path: "polda-jateng",
|
|
},
|
|
{
|
|
id: 5,
|
|
img: "/assets/polda/polda-diy.svg",
|
|
title: "Polda D.I Yogyakarta",
|
|
path: "polda-diy",
|
|
},
|
|
{
|
|
id: 6,
|
|
img: "/assets/polda/polda-jatim.svg",
|
|
title: "Polda Jawa Timur",
|
|
path: "polda-jatim",
|
|
},
|
|
{
|
|
id: 7,
|
|
img: "/assets/polda/polda-aceh.svg",
|
|
title: "Polda Aceh",
|
|
path: "polda-aceh",
|
|
},
|
|
{
|
|
id: 8,
|
|
img: "/assets/polda/polda-sumut.svg",
|
|
title: "Polda Sumatra Utara",
|
|
path: "polda-sumut",
|
|
},
|
|
{
|
|
id: 9,
|
|
img: "/assets/polda/polda-sumbar.svg",
|
|
title: "Polda Sumatra Barat",
|
|
path: "polda-sumbar",
|
|
},
|
|
{
|
|
id: 10,
|
|
img: "/assets/polda/polda-riau.svg",
|
|
title: "Polda Riau",
|
|
path: "polda-riau",
|
|
},
|
|
{
|
|
id: 11,
|
|
img: "/assets/polda/polda-kepri.svg",
|
|
title: "Polda Kep.Riau",
|
|
path: "polda-kepri",
|
|
},
|
|
{
|
|
id: 12,
|
|
img: "/assets/polda/polda-jambi.svg",
|
|
title: "Polda Jambi",
|
|
path: "polda-jambi",
|
|
},
|
|
{
|
|
id: 13,
|
|
img: "/assets/polda/polda-jambi.svg",
|
|
title: "Polda Jambi",
|
|
path: "polda-jambi",
|
|
},
|
|
{
|
|
id: 14,
|
|
img: "/assets/polda/polda-sumsel.svg",
|
|
title: "Polda Sumatra Selatan",
|
|
path: "polda-sumsel",
|
|
},
|
|
{
|
|
id: 15,
|
|
img: "/assets/polda/polda-sumsel.svg",
|
|
title: "Polda Kep.Bangka Belitung",
|
|
path: "polda-babel",
|
|
},
|
|
{
|
|
id: 16,
|
|
img: "/assets/polda/polda-bengkulu.svg",
|
|
title: "Polda Bengkulu",
|
|
path: "polda-bengkulu",
|
|
},
|
|
{
|
|
id: 17,
|
|
img: "/assets/polda/polda-lampung.svg",
|
|
title: "Polda Lampung",
|
|
path: "polda-lampung",
|
|
},
|
|
{
|
|
id: 18,
|
|
img: "/assets/polda/polda-ntb.svg",
|
|
title: "Polda Nusa Tenggara Barat",
|
|
path: "polda-ntb",
|
|
},
|
|
{
|
|
id: 19,
|
|
img: "/assets/polda/polda-ntb.svg",
|
|
title: "Polda Nusa Tenggara Barat",
|
|
path: "polda-ntb",
|
|
},
|
|
{
|
|
id: 20,
|
|
img: "/assets/polda/polda-ntt.svg",
|
|
title: "Polda Nusa Tenggara Timur",
|
|
path: "polda-ntt",
|
|
},
|
|
{
|
|
id: 21,
|
|
img: "/assets/polda/polda-bali.svg",
|
|
title: "Polda Bali",
|
|
path: "polda-bali",
|
|
},
|
|
{
|
|
id: 22,
|
|
img: "/assets/polda/polda-kalbar.svg",
|
|
title: "Polda Kalimantan Barat",
|
|
path: "polda-kalbar",
|
|
},
|
|
{
|
|
id: 23,
|
|
img: "/assets/polda/polda-kalteng.svg",
|
|
title: "Polda Kalimantan Tengah",
|
|
path: "polda-kalteng",
|
|
},
|
|
{
|
|
id: 24,
|
|
img: "/assets/polda/polda-kalsel.svg",
|
|
title: "Polda Kalimantan Selatan",
|
|
path: "polda-kalsel",
|
|
},
|
|
{
|
|
id: 25,
|
|
img: "/assets/polda/polda-kaltim.svg",
|
|
title: "Polda Kalimantan Timur",
|
|
path: "polda-kaltim",
|
|
},
|
|
{
|
|
id: 26,
|
|
img: "/assets/polda/polda-kalut.svg",
|
|
title: "Polda Kalimantan Utara",
|
|
path: "polda-kaltara",
|
|
},
|
|
{
|
|
id: 27,
|
|
img: "/assets/polda/polda-sulteng.svg",
|
|
title: "Polda Sulawesi Tengah",
|
|
path: "polda-sulteng",
|
|
},
|
|
{
|
|
id: 28,
|
|
img: "/assets/polda/polda-sulawesi-utara.svg",
|
|
title: "Polda Sulawesi Utara",
|
|
path: "polda-sulut",
|
|
},
|
|
{
|
|
id: 29,
|
|
img: "/assets/polda/polda-gorontalo.svg",
|
|
title: "Polda Gorontalo",
|
|
path: "polda-gorontalo",
|
|
},
|
|
{
|
|
id: 30,
|
|
img: "/assets/polda/polda-sulbar.svg",
|
|
title: "Polda Sulawesi Barat",
|
|
path: "polda-sulbar",
|
|
},
|
|
{
|
|
id: 31,
|
|
img: "/assets/polda/polda-sulsel.svg",
|
|
title: "Polda Sulawesi Selatan",
|
|
path: "polda-sulsel",
|
|
},
|
|
{
|
|
id: 32,
|
|
img: "/assets/polda/polda-sultenggara.svg",
|
|
title: "Polda Sulawesi Tenggara",
|
|
path: "polda-sultra",
|
|
},
|
|
{
|
|
id: 33,
|
|
img: "/assets/polda/polda-malut.svg",
|
|
title: "Polda Maluku Utara",
|
|
path: "polda-maluku-utara",
|
|
},
|
|
{
|
|
id: 34,
|
|
img: "/assets/polda/polda-maluku.svg",
|
|
title: "Polda Maluku",
|
|
path: "polda-maluku",
|
|
},
|
|
{
|
|
id: 35,
|
|
img: "/assets/polda/polda-papuabarat.svg",
|
|
title: "Polda Papua Barat",
|
|
path: "polda-papua-barat",
|
|
},
|
|
{
|
|
id: 36,
|
|
img: "/assets/polda/polda-papua.svg",
|
|
title: "Polda Papua",
|
|
path: "polda-papua",
|
|
},
|
|
];
|
|
|
|
export default function RegionalNews(props: {
|
|
opened: boolean;
|
|
modalStatus: (status: boolean) => void;
|
|
}) {
|
|
const { isOpen, onOpen, onOpenChange } = useDisclosure();
|
|
const [scrollBehavior, setScrollBehavior] =
|
|
React.useState<ModalProps["scrollBehavior"]>("inside");
|
|
const [modalPlacement, setModalPlacement] = React.useState<any>("auto");
|
|
const t = useTranslations("Landing");
|
|
|
|
useEffect(() => {
|
|
if (props.opened) {
|
|
onOpen();
|
|
}
|
|
}, [props.opened]);
|
|
|
|
// useEffect(() => {
|
|
// function updateLimitedData() {
|
|
// if (window.matchMedia("(max-width: 767px)").matches) {
|
|
// setLimitedData(list.slice(0, 2));
|
|
// } else if (window.matchMedia("(min-width: 768px) and (max-width: 1023px)").matches) {
|
|
// setLimitedData(list.slice(0, 3));
|
|
// } else {
|
|
// setLimitedData(list.slice(0, 5));
|
|
// }
|
|
// }
|
|
|
|
// updateLimitedData();
|
|
// window.addEventListener('resize', updateLimitedData);
|
|
// return () => {
|
|
// window.removeEventListener('resize', updateLimitedData);
|
|
// };
|
|
// }, [list]);
|
|
|
|
const changeNameToSlug = (name: string) => {
|
|
const cleaned = name.replace("Polda ", "").trim().toLowerCase();
|
|
const slug = cleaned.replace(/\s+/g, "-");
|
|
return slug;
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{/* <Button
|
|
onPress={onOpen}
|
|
className="border-red-700 text-white w-fit"
|
|
size="sm"
|
|
variant="bordered"
|
|
>
|
|
{t("lebihBanyak")}
|
|
</Button> */}
|
|
{/* <a
|
|
onClick={onOpen}
|
|
className="group shadow-lg rounded-lg w-[200px] h-[200px] flex flex-col justify-center items-center hover:border-3 hover:border-red-600 cursor-pointer mx-auto transition duration-300 ease-in-out"
|
|
>
|
|
<Image
|
|
src="/indonesia-map.png"
|
|
width={480}
|
|
height={480}
|
|
alt="indonesia"
|
|
className="w-[100px] group-hover:scale-125 transition duration-300 ease-in-out"
|
|
/>
|
|
<p className="font-bold transform group-hover:translate-y-2 transition duration-300 ease-in-out">
|
|
Polda Jajaran
|
|
</p>
|
|
<p className="text-xs text-primary underline transform group-hover:translate-y-2 transition duration-300 ease-in-out">
|
|
Lihat Selengkapnya
|
|
</p>
|
|
</a> */}
|
|
<Modal
|
|
isOpen={isOpen}
|
|
onOpenChange={() => {
|
|
props.modalStatus(!props.opened);
|
|
onOpenChange();
|
|
}}
|
|
size="5xl"
|
|
scrollBehavior={scrollBehavior}
|
|
placement="center"
|
|
className="bg-white"
|
|
>
|
|
<ModalContent>
|
|
{(onClose) => (
|
|
<>
|
|
<ModalHeader className="flex flex-col text-black items-center min-h mb- text-3xl font-semibold">
|
|
<div className="text-xl text-black w-full justify-center flex">
|
|
<p className="border-b-3 border-[#C3170F] py-2 w-fit">
|
|
{" "}
|
|
{/* {t("beritaWilayah")} */}
|
|
Polda Jajaran
|
|
</p>
|
|
</div>
|
|
</ModalHeader>
|
|
<ModalBody className="flex flex-row flex-wrap justify-center text-center">
|
|
{listPoldaAll.map((item: any, index: any) => (
|
|
<div
|
|
key={index.id}
|
|
className="w-[140px] h-[115px] flex flex-col items-center justify-center rounded-lg shadow-sm"
|
|
>
|
|
<Link href={`/news/polda/${item.path}`}>
|
|
<div className="flex flex-col items-center ">
|
|
<Image
|
|
radius="lg"
|
|
className="h-[59px]"
|
|
src={item.img}
|
|
alt="polda"
|
|
/>
|
|
<p className="text-xs font-bold text-black">
|
|
{item.title}
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
))}
|
|
</ModalBody>
|
|
<ModalFooter>
|
|
<Button
|
|
variant="light"
|
|
onPress={onClose}
|
|
className="text-danger"
|
|
>
|
|
{t("tutup")}
|
|
</Button>
|
|
</ModalFooter>
|
|
</>
|
|
)}
|
|
</ModalContent>
|
|
</Modal>
|
|
</>
|
|
);
|
|
}
|