294 lines
8.6 KiB
TypeScript
294 lines
8.6 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";
|
|
|
|
export default function PolriApps() {
|
|
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 listApps = [
|
|
{
|
|
id: 1,
|
|
img: "/landing-polri-super-apps.png",
|
|
title: "Polri Super Apps",
|
|
path: "https://play.google.com/store/apps/details?id=superapps.polri.presisi.presisi&hl=en_US&gl=US",
|
|
},
|
|
{
|
|
id: 2,
|
|
img: "/landing-portal-humas.png",
|
|
title: "Portal Humas",
|
|
path: "https://portal.humas.polri.go.id/",
|
|
},
|
|
{
|
|
id: 3,
|
|
img: "/landing-mediahub-polri.png",
|
|
title: "Portal Humas",
|
|
path: "https://play.google.com/store/apps/details?id=com.mediahub.mediahub_mobile",
|
|
},
|
|
{
|
|
id: 4,
|
|
img: "/landing-polri-tv.png",
|
|
title: "Portal Humas",
|
|
path: "https://play.google.com/store/apps/details?id=com.polritv",
|
|
},
|
|
{
|
|
id: 5,
|
|
img: "/landing-inp.png",
|
|
title: "Portal Humas",
|
|
path: "https://inp.polri.go.id/",
|
|
},
|
|
{
|
|
id: 6,
|
|
img: "/landing-polisiku.png",
|
|
title: "Portal Humas",
|
|
path: "https://play.google.com/store/apps/details?id=id.co.qlue.polisiku&hl=id&gl=ID",
|
|
},
|
|
];
|
|
|
|
const listAppsAll = [
|
|
{
|
|
id: 1,
|
|
img: "/landing-polri-super-apps.png",
|
|
title: "Polri Super Apps",
|
|
path: "https://play.google.com/store/apps/details?id=superapps.polri.presisi.presisi&hl=en_US&gl=US",
|
|
},
|
|
{
|
|
id: 2,
|
|
img: "/landing-portal-humas.png",
|
|
title: "Portal Humas",
|
|
path: "https://portal.humas.polri.go.id/",
|
|
},
|
|
{
|
|
id: 3,
|
|
img: "/landing-mediahub-polri.png",
|
|
title: "Portal Humas",
|
|
path: "https://play.google.com/store/apps/details?id=com.mediahub.mediahub_mobile",
|
|
},
|
|
{
|
|
id: 4,
|
|
img: "/landing-polri-tv.png",
|
|
title: "Portal Humas",
|
|
path: "https://play.google.com/store/apps/details?id=com.polritv",
|
|
},
|
|
{
|
|
id: 5,
|
|
img: "/landing-inp.png",
|
|
title: "Portal Humas",
|
|
path: "https://inp.polri.go.id/",
|
|
},
|
|
{
|
|
id: 6,
|
|
img: "/landing-polisiku.png",
|
|
title: "Portal Humas",
|
|
path: "https://play.google.com/store/apps/details?id=id.co.qlue.polisiku&hl=id&gl=ID",
|
|
},
|
|
{
|
|
id: 7,
|
|
img: "/landing-e-rikkes.png",
|
|
title: "e-RIKKES",
|
|
path: "https://erikkes.id/",
|
|
},
|
|
{
|
|
id: 8,
|
|
img: "/landing-e-ppsi.png",
|
|
title: "e-PPSI",
|
|
path: "https://eppsi.id/",
|
|
},
|
|
{
|
|
id: 9,
|
|
img: "/landing-bos.png",
|
|
title: "BOS",
|
|
path: "https://bos.polri.go.id/login",
|
|
},
|
|
{
|
|
id: 10,
|
|
img: "/landing-signal.png",
|
|
title: "SIGNAL",
|
|
path: "https://play.google.com/store/apps/details?id=app.signal.id",
|
|
},
|
|
|
|
{
|
|
id: 11,
|
|
img: "/landing-skck.png",
|
|
title: "SKCK Online",
|
|
path: "https://skck.polri.go.id/",
|
|
},
|
|
{
|
|
id: 12,
|
|
img: "/landing-propam-presisi.png",
|
|
title: "Propam Presisi",
|
|
path: "https://play.google.com/store/apps/details?id=com.stk.pengaduanpropam",
|
|
},
|
|
{
|
|
id: 13,
|
|
img: "/landing-sdm-polri.png",
|
|
title: "SDM Polri",
|
|
path: "https://penerimaan.polri.go.id/",
|
|
},
|
|
{
|
|
id: 14,
|
|
img: "/landing-e-avis.png",
|
|
title: "e-AVIS",
|
|
path: "https://e-avis.korlantas.polri.go.id/",
|
|
},
|
|
{
|
|
id: 10,
|
|
img: "/landing-wbs.png",
|
|
title: "Whistle Blowing System",
|
|
path: "https://pengaduan-penerimaan.polri.go.id/",
|
|
},
|
|
|
|
{
|
|
id: 11,
|
|
img: "/landing-dumas-presisi.png",
|
|
title: "Dumas Presisi",
|
|
path: "https://dumaspresisi.polri.go.id/",
|
|
},
|
|
{
|
|
id: 12,
|
|
img: "/landing-sinar.png",
|
|
title: "Sinar",
|
|
path: "https://www.digitalkorlantas.id/sim/",
|
|
},
|
|
];
|
|
|
|
// 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 (
|
|
<div className="text-center rounded-md lg:rounded-lg h-auto lg:h-[338px] flex flex-col p-6 bg-gradient-to-b from-red-900 via-red-700 to-[#bb3523]">
|
|
<div className="text-xl text-white w-full justify-center flex">
|
|
<p className="border-b-3 border-white py-2 w-fit"> {t("aplikasi")}</p>
|
|
</div>
|
|
<div className="flex items-center justify-around py-10">
|
|
{/* <div>
|
|
<ChevronLeftWhite color="orange" />
|
|
</div> */}
|
|
<div className="gap-2 md:gap-4 lg:gap-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6">
|
|
{listApps.map((item: any, index: any) => (
|
|
<Link
|
|
href={`/news/all?polda=${changeNameToSlug(item.title)}`}
|
|
key={item.path}
|
|
target="_blank"
|
|
>
|
|
<div
|
|
key={item.id}
|
|
className="w-[157px] h-[141px] flex flex-col items-center justify-evenly"
|
|
>
|
|
<Image radius="lg" className="h-[59px]" src={item.img} />
|
|
<p className="text-xs font-bold text-white">{item.title}</p>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
{/* <div>
|
|
<ChevronRightWhite color="orange" />
|
|
</div> */}
|
|
</div>
|
|
<div className="flex justify-center w-full items-center">
|
|
<Button
|
|
onPress={onOpen}
|
|
className="border-red-700 text-white w-fit"
|
|
size="sm"
|
|
variant="bordered"
|
|
>
|
|
{t("lebihBanyak")}
|
|
</Button>
|
|
</div>
|
|
<Modal
|
|
isOpen={isOpen}
|
|
onOpenChange={onOpenChange}
|
|
size="5xl"
|
|
scrollBehavior={scrollBehavior}
|
|
placement={modalPlacement}
|
|
className="bg-white text-black"
|
|
>
|
|
<ModalContent>
|
|
{(onClose) => (
|
|
<>
|
|
<ModalHeader className="flex flex-col text-black justify-center 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("aplikasi")}
|
|
</p>
|
|
</div>
|
|
</ModalHeader>
|
|
<ModalBody className="flex flex-row flex-wrap justify-center text-center">
|
|
{listAppsAll.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?polda=${changeNameToSlug(item.title)}`}
|
|
target="_blank"
|
|
>
|
|
<div className="flex flex-col items-center ">
|
|
<Image
|
|
radius="lg"
|
|
className="h-[59px]"
|
|
src={item.img}
|
|
/>
|
|
<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>
|
|
</div>
|
|
);
|
|
}
|