430 lines
10 KiB
TypeScript
430 lines
10 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 from "react";
|
|
import Link from "next/link";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
export default function CategorySatker() {
|
|
const { isOpen, onOpen, onOpenChange } = useDisclosure();
|
|
const [scrollBehavior, setScrollBehavior] =
|
|
React.useState<ModalProps["scrollBehavior"]>("inside");
|
|
const [modalPlacement, setModalPlacement] = React.useState<any>("auto");
|
|
const t = useTranslations("Landing");
|
|
|
|
const list = [
|
|
{
|
|
id: 6,
|
|
img: "/assets/satker2/yanma.png",
|
|
title: "Yanma",
|
|
path: "/news/yanma",
|
|
},
|
|
{
|
|
id: 1,
|
|
img: "/assets/satker2/siber.svg",
|
|
title: "Siber",
|
|
path: "/news/siber",
|
|
},
|
|
{
|
|
id: 2,
|
|
img: "/assets/satker2/divkum.svg",
|
|
title: "Divkum",
|
|
path: "/news/divkum",
|
|
},
|
|
{
|
|
id: 3,
|
|
img: "/assets/satker2/puskeu.svg",
|
|
title: "Puskeu",
|
|
path: "/news/puskeu",
|
|
},
|
|
{
|
|
id: 4,
|
|
img: "/assets/satker2/ssdm.svg",
|
|
title: "SSDM",
|
|
path: "/news/ssdm",
|
|
},
|
|
{
|
|
id: 5,
|
|
img: "/assets/satker2/itwasum.svg",
|
|
title: "Itwasum",
|
|
path: "/news/itwasum",
|
|
},
|
|
// {
|
|
// id: 6,
|
|
// img: "/assets/satker2/stik-ptik.svg",
|
|
// title: "STIK-PTIK",
|
|
// path: "/news/stik-ptik",
|
|
// },
|
|
];
|
|
|
|
const SatkerAll = [
|
|
{
|
|
id: 36,
|
|
img: "/assets/satker2/yanma.png",
|
|
title: "Yanma",
|
|
path: "/news/yanma",
|
|
},
|
|
{
|
|
id: 1,
|
|
img: "/assets/satker2/siber.svg",
|
|
title: "Siber",
|
|
path: "/news/siber",
|
|
},
|
|
{
|
|
id: 2,
|
|
img: "/assets/satker2/divkum.svg",
|
|
title: "Divkum",
|
|
path: "/news/divkum",
|
|
},
|
|
{
|
|
id: 3,
|
|
img: "/assets/satker2/puskeu.svg",
|
|
title: "Puskeu",
|
|
path: "/news/puskeu",
|
|
},
|
|
{
|
|
id: 4,
|
|
img: "/assets/satker2/ssdm.svg",
|
|
title: "SSDM",
|
|
path: "/news/ssdm",
|
|
},
|
|
{
|
|
id: 5,
|
|
img: "/assets/satker2/itwasum.svg",
|
|
title: "Itwasum",
|
|
path: "/news/itwasum",
|
|
},
|
|
{
|
|
id: 6,
|
|
img: "/assets/satker2/stik-ptik.svg",
|
|
title: "STIK-PTIK",
|
|
path: "/news/stik-ptik",
|
|
},
|
|
{
|
|
id: 7,
|
|
img: "/assets/satker2/brimob.svg",
|
|
title: "BRIMOB",
|
|
path: "/news/brimob",
|
|
},
|
|
{
|
|
id: 8,
|
|
img: "/assets/satker2/humas.svg",
|
|
title: "DIV HUMAS",
|
|
path: "/news/humas",
|
|
},
|
|
{
|
|
id: 9,
|
|
img: "/assets/satker2/puslitbang.svg",
|
|
title: "PUSLITBANG",
|
|
path: "/news/puslitbang",
|
|
},
|
|
{
|
|
id: 10,
|
|
img: "/assets/satker2/binmas.svg",
|
|
title: "BINMAS",
|
|
path: "/news/binmas",
|
|
},
|
|
{
|
|
id: 11,
|
|
img: "/assets/satker2/divtik.svg",
|
|
title: "DIV TIK",
|
|
path: "/news/divtik",
|
|
},
|
|
{
|
|
id: 12,
|
|
img: "/assets/satker2/spripim.svg",
|
|
title: "SPRIPIM",
|
|
path: "/news/spripim",
|
|
},
|
|
{
|
|
id: 13,
|
|
img: "/assets/satker2/propam.svg",
|
|
title: "DIV PROPAM",
|
|
path: "/news/propam",
|
|
},
|
|
{
|
|
id: 14,
|
|
img: "/assets/satker2/sabbaharkam.svg",
|
|
title: "KORPS SABHARA BAHARKAM",
|
|
path: "/news/sabhara-baharkam",
|
|
},
|
|
{
|
|
id: 15,
|
|
img: "/assets/satker2/pusdokes.svg",
|
|
title: "PUSDOKKES",
|
|
path: "/news/pusdokkes",
|
|
},
|
|
{
|
|
id: 16,
|
|
img: "/assets/satker2/baharkam.svg",
|
|
title: "baharkam",
|
|
path: "/news/baharkam",
|
|
},
|
|
{
|
|
id: 17,
|
|
img: "/assets/satker2/polairud.svg",
|
|
title: "POLAIURD",
|
|
path: "/news/polairud",
|
|
},
|
|
{
|
|
id: 18,
|
|
img: "/assets/satker2/polair.svg",
|
|
title: "POLAIR",
|
|
path: "/news/polair",
|
|
},
|
|
{
|
|
id: 19,
|
|
img: "/assets/satker2/poludara.svg",
|
|
title: "POLUDARA",
|
|
path: "/news/poludara",
|
|
},
|
|
{
|
|
id: 20,
|
|
img: "/assets/satker2/lemdiklat.svg",
|
|
title: "LEMDIKLAT",
|
|
path: "/news/lemdiklat",
|
|
},
|
|
{
|
|
id: 21,
|
|
img: "/assets/satker2/akpol.svg",
|
|
title: "AKPOL",
|
|
path: "/news/akpol",
|
|
},
|
|
{
|
|
id: 22,
|
|
img: "/assets/satker2/korlantas.svg",
|
|
title: "KORLANTAS",
|
|
path: "/news/korlantas",
|
|
},
|
|
{
|
|
id: 21,
|
|
img: "/assets/satker2/pusinafis.svg",
|
|
title: "PUSINAFIS",
|
|
path: "/news/pusinafis",
|
|
},
|
|
{
|
|
id: 22,
|
|
img: "/assets/satker2/pusjarah.svg",
|
|
title: "PUSJARAH",
|
|
path: "/news/pusjarah",
|
|
},
|
|
{
|
|
id: 23,
|
|
img: "/assets/satker2/pusiknas.svg",
|
|
title: "PUSIKNAS",
|
|
path: "/news/pusiknas",
|
|
},
|
|
{
|
|
id: 24,
|
|
img: "/assets/satker2/slog.svg",
|
|
title: "SLOG",
|
|
path: "/news/slog",
|
|
},
|
|
{
|
|
id: 25,
|
|
img: "/assets/satker2/baintelkam.svg",
|
|
title: "BAINTELKAM",
|
|
path: "/news/baintelkam",
|
|
},
|
|
{
|
|
id: 26,
|
|
img: "/assets/satker2/bareskrim.svg",
|
|
title: "BARESKRIM",
|
|
path: "/news/bareskrim",
|
|
},
|
|
{
|
|
id: 27,
|
|
img: "/assets/satker2/hubinter.svg",
|
|
title: "DIVHUBINTER",
|
|
path: "/news/divhubinter",
|
|
},
|
|
{
|
|
id: 28,
|
|
img: "/assets/satker2/setum.svg",
|
|
title: "SETUM",
|
|
path: "/news/setum",
|
|
},
|
|
{
|
|
id: 29,
|
|
img: "/assets/satker2/puslabfor.svg",
|
|
title: "PUSLABFOR",
|
|
path: "/news/puslabfor",
|
|
},
|
|
{
|
|
id: 30,
|
|
img: "/assets/satker2/densus88.svg",
|
|
title: "DENSUS 88",
|
|
path: "/news/densus88",
|
|
},
|
|
{
|
|
id: 31,
|
|
img: "/assets/satker2/sahlikapolri.svg",
|
|
title: "SAHLI KAPOLRI",
|
|
path: "/news/sahli-kapolri",
|
|
},
|
|
{
|
|
id: 32,
|
|
img: "/assets/satker2/sops.svg",
|
|
title: "SOPS",
|
|
path: "/news/sops",
|
|
},
|
|
{
|
|
id: 33,
|
|
img: "/assets/satker2/srena.svg",
|
|
title: "SRENA",
|
|
path: "/news/srena",
|
|
},
|
|
{
|
|
id: 34,
|
|
img: "/assets/satker2/sespim.svg",
|
|
title: "SESPIM POLRI",
|
|
path: "/news/sespim-polri",
|
|
},
|
|
{
|
|
id: 35,
|
|
img: "/assets/satker2/setupa.svg",
|
|
title: "SETUPA POLRI",
|
|
path: "/news/setupa-polri",
|
|
},
|
|
];
|
|
|
|
// 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.trim().toLowerCase();
|
|
return cleaned.replace(/\s+/g, "-");
|
|
};
|
|
|
|
return (
|
|
<div className="text-center bg-[#DD8306] rounded-md h-auto lg:h-[338px] space-y-0 py-4 md:space-y-7 flex flex-col justify-center">
|
|
<div className="text-xl text-white w-full justify-center flex">
|
|
<p className="border-b-3 border-[#C3170F] py-2 w-fit">
|
|
{" "}
|
|
{t("kategoriSatker")}
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center justify-around">
|
|
<div className="gap-2 md:gap-4 lg:gap-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6">
|
|
{list.map((item: any, index: any) => (
|
|
<Link
|
|
href={`/news/all?satker=${changeNameToSlug(item.title)}`}
|
|
key={item.path}
|
|
>
|
|
<div
|
|
key={index}
|
|
className="w-[157px] h-[140px] flex flex-col items-center justify-evenly "
|
|
>
|
|
<Image
|
|
radius="lg"
|
|
src={item.img}
|
|
className="w-10 h-10"
|
|
height={480}
|
|
width={480}
|
|
/>
|
|
<p className="text-xs font-bold text-white">{item.title}</p>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<Button
|
|
onPress={onOpen}
|
|
className="border-red-700 text-white w-fit"
|
|
size="sm"
|
|
variant="bordered"
|
|
>
|
|
{t("lebihBanyak")}
|
|
</Button>
|
|
<Modal
|
|
isOpen={isOpen}
|
|
onOpenChange={onOpenChange}
|
|
size="full"
|
|
scrollBehavior={scrollBehavior}
|
|
placement={modalPlacement}
|
|
classNames={{
|
|
wrapper: "bg-white",
|
|
base: "bg-white min-h-full",
|
|
}}
|
|
>
|
|
<ModalContent>
|
|
{(onClose) => (
|
|
<>
|
|
<ModalHeader className="flex flex-col text-black items-center min-h 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("kategoriSatker")}
|
|
</p>
|
|
</div>
|
|
</ModalHeader>
|
|
<ModalBody className="flex flex-row flex-wrap justify-center text-center">
|
|
{SatkerAll.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/all?satker=${changeNameToSlug(
|
|
item.title
|
|
)}`}
|
|
>
|
|
{" "}
|
|
<Image
|
|
height={480}
|
|
width={480}
|
|
radius="lg"
|
|
className="h-[59px] w-[50px]"
|
|
src={item.img}
|
|
/>
|
|
</Link>
|
|
<p className="text-xs font-bold text-black pt-2">
|
|
{item.title}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</ModalBody>
|
|
<ModalFooter>
|
|
<Button
|
|
variant="light"
|
|
onPress={onClose}
|
|
className="text-danger"
|
|
>
|
|
{" "}
|
|
{t("tutup")}
|
|
</Button>
|
|
</ModalFooter>
|
|
</>
|
|
)}
|
|
</ModalContent>
|
|
</Modal>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|