feat: polda satker section
This commit is contained in:
Rama Priyanto
parent
9730375aeb
commit
5eaa8543f8
|
|
@ -1,6 +1,10 @@
|
||||||
"use client";
|
"use client";
|
||||||
import AddsCarousel from "./adds-carousel";
|
import AddsCarousel from "./adds-carousel";
|
||||||
|
import CategorySatker from "./CategorySatker";
|
||||||
|
import DigitalServices from "./digital-services";
|
||||||
import MedolUpdate from "./MedolUpdate";
|
import MedolUpdate from "./MedolUpdate";
|
||||||
|
import PolriApps from "./PolriApps";
|
||||||
|
import RegionalNews from "./RegionalNews";
|
||||||
import SocialMediaNew from "./social-media";
|
import SocialMediaNew from "./social-media";
|
||||||
|
|
||||||
export default function BodyLayout() {
|
export default function BodyLayout() {
|
||||||
|
|
@ -20,6 +24,7 @@ export default function BodyLayout() {
|
||||||
</div> */}
|
</div> */}
|
||||||
<div className="w-full space-y-5">
|
<div className="w-full space-y-5">
|
||||||
<AddsCarousel />
|
<AddsCarousel />
|
||||||
|
<DigitalServices />
|
||||||
<MedolUpdate />
|
<MedolUpdate />
|
||||||
<SocialMediaNew />
|
<SocialMediaNew />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -11,85 +11,49 @@ import {
|
||||||
useDisclosure,
|
useDisclosure,
|
||||||
} from "@heroui/react";
|
} from "@heroui/react";
|
||||||
import { ChevronLeftWhite, ChevronRightWhite } from "../icons";
|
import { ChevronLeftWhite, ChevronRightWhite } from "../icons";
|
||||||
import React from "react";
|
import React, { useEffect } from "react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { useTranslations } from "next-intl";
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
export default function CategorySatker() {
|
export default function CategorySatker(props: {
|
||||||
|
opened: boolean;
|
||||||
|
modalStatus: (status: boolean) => void;
|
||||||
|
}) {
|
||||||
const { isOpen, onOpen, onOpenChange } = useDisclosure();
|
const { isOpen, onOpen, onOpenChange } = useDisclosure();
|
||||||
const [scrollBehavior, setScrollBehavior] =
|
const [scrollBehavior, setScrollBehavior] =
|
||||||
React.useState<ModalProps["scrollBehavior"]>("inside");
|
React.useState<ModalProps["scrollBehavior"]>("inside");
|
||||||
const [modalPlacement, setModalPlacement] = React.useState<any>("auto");
|
const [modalPlacement, setModalPlacement] = React.useState<any>("auto");
|
||||||
const t = useTranslations("Landing");
|
const t = useTranslations("Landing");
|
||||||
|
|
||||||
const list = [
|
useEffect(() => {
|
||||||
{
|
if (props.opened) {
|
||||||
id: 6,
|
onOpen();
|
||||||
img: "/assets/satker2/yanma-icon.png",
|
}
|
||||||
title: "Yanma",
|
}, [props.opened]);
|
||||||
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 = [
|
const SatkerAll = [
|
||||||
{
|
{
|
||||||
id: 36,
|
id: 36,
|
||||||
img: "/assets/satker2/yanma.png",
|
img: "/assets/satker2/yanma.png",
|
||||||
title: "Yanma",
|
title: "YANMA",
|
||||||
path: "/news/yanma",
|
path: "/news/yanma",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
img: "/assets/satker2/siber.svg",
|
img: "/assets/satker2/siber.svg",
|
||||||
title: "Siber",
|
title: "SIBER",
|
||||||
path: "/news/siber",
|
path: "/news/siber",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 2,
|
id: 2,
|
||||||
img: "/assets/satker2/divkum.svg",
|
img: "/assets/satker2/divkum.svg",
|
||||||
title: "Divkum",
|
title: "DIVKUM",
|
||||||
path: "/news/divkum",
|
path: "/news/divkum",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 3,
|
id: 3,
|
||||||
img: "/assets/satker2/puskeu.svg",
|
img: "/assets/satker2/puskeu.svg",
|
||||||
title: "Puskeu",
|
title: "PUSKEU",
|
||||||
path: "/news/puskeu",
|
path: "/news/puskeu",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -101,7 +65,7 @@ export default function CategorySatker() {
|
||||||
{
|
{
|
||||||
id: 5,
|
id: 5,
|
||||||
img: "/assets/satker2/itwasum.svg",
|
img: "/assets/satker2/itwasum.svg",
|
||||||
title: "Itwasum",
|
title: "ITWASUM",
|
||||||
path: "/news/itwasum",
|
path: "/news/itwasum",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -167,7 +131,7 @@ export default function CategorySatker() {
|
||||||
{
|
{
|
||||||
id: 16,
|
id: 16,
|
||||||
img: "/assets/satker2/baharkam.svg",
|
img: "/assets/satker2/baharkam.svg",
|
||||||
title: "baharkam",
|
title: "BAHARKAM",
|
||||||
path: "/news/baharkam",
|
path: "/news/baharkam",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -322,94 +286,67 @@ export default function CategorySatker() {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="text-center bg-gradient-to-b from-red-900 via-red-700 to-[#bb3523] 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">
|
{/* <Button
|
||||||
<p className="border-b-3 border-white 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/satker/${changeNameToSlug(item.title)}`}
|
|
||||||
key={item.path}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
key={index}
|
|
||||||
className="w-[157px] h-[140px] flex flex-col items-center justify-evenly "
|
|
||||||
>
|
|
||||||
<img src={item.img} className="h-[60px]" />
|
|
||||||
<p className="text-xs font-bold text-white">{item.title}</p>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Button
|
|
||||||
onPress={onOpen}
|
onPress={onOpen}
|
||||||
className="border-red-700 text-white w-fit"
|
className="border-red-700 text-white w-fit"
|
||||||
size="sm"
|
size="sm"
|
||||||
variant="bordered"
|
variant="bordered"
|
||||||
>
|
>
|
||||||
{t("lebihBanyak")}
|
{t("lebihBanyak")}
|
||||||
</Button>
|
</Button> */}
|
||||||
<Modal
|
<Modal
|
||||||
isOpen={isOpen}
|
isOpen={isOpen}
|
||||||
onOpenChange={onOpenChange}
|
onOpenChange={() => {
|
||||||
size="full"
|
props.modalStatus(!props.opened);
|
||||||
scrollBehavior={scrollBehavior}
|
onOpenChange();
|
||||||
placement={modalPlacement}
|
}}
|
||||||
classNames={{
|
size="5xl"
|
||||||
wrapper: "bg-white",
|
scrollBehavior={scrollBehavior}
|
||||||
base: "bg-white min-h-full",
|
placement={modalPlacement}
|
||||||
}}
|
className="bg-white"
|
||||||
>
|
>
|
||||||
<ModalContent>
|
<ModalContent>
|
||||||
{(onClose) => (
|
{(onClose) => (
|
||||||
<>
|
<>
|
||||||
<ModalHeader className="flex flex-col text-black items-center min-h text-3xl font-semibold">
|
<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">
|
<div className="text-xl text-black w-full justify-center flex">
|
||||||
<p className="border-b-3 border-[#C3170F] py-2 w-fit">
|
<p className="border-b-3 border-[#C3170F] py-2 w-fit">
|
||||||
{t("kategoriSatker")}
|
{/* {t("kategoriSatker")} */}
|
||||||
|
Satuan Kerja Polri
|
||||||
|
</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/satker/${changeNameToSlug(item.title)}`}>
|
||||||
|
{" "}
|
||||||
|
<img className="h-[59px] w-[50px]" src={item.img} />
|
||||||
|
</Link>
|
||||||
|
<p className="text-xs font-bold text-black pt-2">
|
||||||
|
{item.title}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</ModalHeader>
|
))}
|
||||||
<ModalBody className="flex flex-row flex-wrap justify-center text-center">
|
</ModalBody>
|
||||||
{SatkerAll.map((item: any, index: any) => (
|
<ModalFooter>
|
||||||
<div
|
<Button
|
||||||
key={index.id}
|
variant="light"
|
||||||
className="w-[140px] h-[115px] flex flex-col items-center justify-center rounded-lg shadow-sm"
|
onPress={onClose}
|
||||||
>
|
className="text-danger"
|
||||||
<Link
|
>
|
||||||
href={`/news/satker/${changeNameToSlug(item.title)}`}
|
{" "}
|
||||||
>
|
{t("tutup")}
|
||||||
{" "}
|
</Button>
|
||||||
<img className="h-[59px] w-[50px]" src={item.img} />
|
</ModalFooter>
|
||||||
</Link>
|
</>
|
||||||
<p className="text-xs font-bold text-black pt-2">
|
)}
|
||||||
{item.title}
|
</ModalContent>
|
||||||
</p>
|
</Modal>
|
||||||
</div>
|
</>
|
||||||
))}
|
|
||||||
</ModalBody>
|
|
||||||
<ModalFooter>
|
|
||||||
<Button
|
|
||||||
variant="light"
|
|
||||||
onPress={onClose}
|
|
||||||
className="text-danger"
|
|
||||||
>
|
|
||||||
{" "}
|
|
||||||
{t("tutup")}
|
|
||||||
</Button>
|
|
||||||
</ModalFooter>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</ModalContent>
|
|
||||||
</Modal>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -15,158 +15,128 @@ import React, { useEffect, useState } from "react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { useTranslations } from "next-intl";
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
export default function PolriApps() {
|
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/",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function PolriApps(props: {
|
||||||
|
opened: boolean;
|
||||||
|
modalStatus: (status: boolean) => void;
|
||||||
|
}) {
|
||||||
const { isOpen, onOpen, onOpenChange } = useDisclosure();
|
const { isOpen, onOpen, onOpenChange } = useDisclosure();
|
||||||
const [scrollBehavior, setScrollBehavior] =
|
const [scrollBehavior, setScrollBehavior] =
|
||||||
React.useState<ModalProps["scrollBehavior"]>("inside");
|
React.useState<ModalProps["scrollBehavior"]>("inside");
|
||||||
const [modalPlacement, setModalPlacement] = React.useState<any>("auto");
|
const [modalPlacement, setModalPlacement] = React.useState<any>("auto");
|
||||||
const t = useTranslations("Landing");
|
const t = useTranslations("Landing");
|
||||||
|
|
||||||
const listApps = [
|
useEffect(() => {
|
||||||
{
|
if (props.opened) {
|
||||||
id: 1,
|
onOpen();
|
||||||
img: "/landing-polri-super-apps.png",
|
}
|
||||||
title: "Polri Super Apps",
|
}, [props.opened]);
|
||||||
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(() => {
|
// useEffect(() => {
|
||||||
// function updateLimitedData() {
|
// function updateLimitedData() {
|
||||||
|
|
@ -193,36 +163,8 @@ export default function PolriApps() {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
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">
|
{/* <div className="flex justify-center w-full items-center">
|
||||||
<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
|
<Button
|
||||||
onPress={onOpen}
|
onPress={onOpen}
|
||||||
className="border-red-700 text-white w-fit"
|
className="border-red-700 text-white w-fit"
|
||||||
|
|
@ -231,14 +173,17 @@ export default function PolriApps() {
|
||||||
>
|
>
|
||||||
{t("lebihBanyak")}
|
{t("lebihBanyak")}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div> */}
|
||||||
<Modal
|
<Modal
|
||||||
isOpen={isOpen}
|
isOpen={isOpen}
|
||||||
onOpenChange={onOpenChange}
|
onOpenChange={() => {
|
||||||
|
props.modalStatus(!props.opened);
|
||||||
|
onOpenChange();
|
||||||
|
}}
|
||||||
size="5xl"
|
size="5xl"
|
||||||
scrollBehavior={scrollBehavior}
|
scrollBehavior={scrollBehavior}
|
||||||
placement={modalPlacement}
|
placement={modalPlacement}
|
||||||
className="bg-white text-black"
|
className="bg-white"
|
||||||
>
|
>
|
||||||
<ModalContent>
|
<ModalContent>
|
||||||
{(onClose) => (
|
{(onClose) => (
|
||||||
|
|
@ -266,6 +211,7 @@ export default function PolriApps() {
|
||||||
radius="lg"
|
radius="lg"
|
||||||
className="h-[59px]"
|
className="h-[59px]"
|
||||||
src={item.img}
|
src={item.img}
|
||||||
|
alt="apps"
|
||||||
/>
|
/>
|
||||||
<p className="text-xs font-bold text-black">
|
<p className="text-xs font-bold text-black">
|
||||||
{item.title}
|
{item.title}
|
||||||
|
|
@ -288,6 +234,6 @@ export default function PolriApps() {
|
||||||
)}
|
)}
|
||||||
</ModalContent>
|
</ModalContent>
|
||||||
</Modal>
|
</Modal>
|
||||||
</div>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -15,270 +15,240 @@ import React, { useEffect, useState } from "react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { useTranslations } from "next-intl";
|
import { useTranslations } from "next-intl";
|
||||||
|
|
||||||
export default function RegionalNews() {
|
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 { isOpen, onOpen, onOpenChange } = useDisclosure();
|
||||||
const [scrollBehavior, setScrollBehavior] =
|
const [scrollBehavior, setScrollBehavior] =
|
||||||
React.useState<ModalProps["scrollBehavior"]>("inside");
|
React.useState<ModalProps["scrollBehavior"]>("inside");
|
||||||
const [modalPlacement, setModalPlacement] = React.useState<any>("auto");
|
const [modalPlacement, setModalPlacement] = React.useState<any>("auto");
|
||||||
const t = useTranslations("Landing");
|
const t = useTranslations("Landing");
|
||||||
|
|
||||||
const listPolda = [
|
useEffect(() => {
|
||||||
{
|
if (props.opened) {
|
||||||
id: 1,
|
onOpen();
|
||||||
img: "/temp/poldametro.svg",
|
}
|
||||||
title: "Polda Metro Jaya",
|
}, [props.opened]);
|
||||||
path: "polda-metro-jaya",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
img: "/temp/polda-sumut.svg",
|
|
||||||
title: "Polda Sumatra Utara",
|
|
||||||
path: "polda-sumut",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
img: "/temp/polda-banten.svg",
|
|
||||||
title: "Polda Banten",
|
|
||||||
path: "polda-banten",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
img: "/temp/polda-jateng.svg",
|
|
||||||
title: "Polda Jawa Tengah",
|
|
||||||
path: "polda-jateng",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 5,
|
|
||||||
img: "/temp/polda-jatim.svg",
|
|
||||||
title: "Polda Jawa Timur",
|
|
||||||
path: "polda-jatim",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 6,
|
|
||||||
img: "/assets/polda/polda-jawa-barat.svg",
|
|
||||||
title: "Polda Jawa Barat",
|
|
||||||
path: "polda-jabar",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
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",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
// useEffect(() => {
|
// useEffect(() => {
|
||||||
// function updateLimitedData() {
|
// function updateLimitedData() {
|
||||||
|
|
@ -305,56 +275,43 @@ export default function RegionalNews() {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
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">
|
{/* <Button
|
||||||
<p className="border-b-3 border-white py-2 w-fit">
|
onPress={onOpen}
|
||||||
{" "}
|
className="border-red-700 text-white w-fit"
|
||||||
{t("beritaWilayah")}
|
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>
|
||||||
</div>
|
<p className="text-xs text-primary underline transform group-hover:translate-y-2 transition duration-300 ease-in-out">
|
||||||
<div className="flex items-center justify-around py-10">
|
Lihat Selengkapnya
|
||||||
{/* <div>
|
</p>
|
||||||
<ChevronLeftWhite color="orange" />
|
</a> */}
|
||||||
</div> */}
|
|
||||||
<div className="gap-2 md:gap-4 lg:gap-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6">
|
|
||||||
{listPolda.map((item: any, index: any) => (
|
|
||||||
<Link href={`/news/polda/${item.path}`} key={item.path}>
|
|
||||||
<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
|
<Modal
|
||||||
isOpen={isOpen}
|
isOpen={isOpen}
|
||||||
onOpenChange={onOpenChange}
|
onOpenChange={() => {
|
||||||
size="full"
|
props.modalStatus(!props.opened);
|
||||||
|
onOpenChange();
|
||||||
|
}}
|
||||||
|
size="5xl"
|
||||||
scrollBehavior={scrollBehavior}
|
scrollBehavior={scrollBehavior}
|
||||||
placement={modalPlacement}
|
placement={modalPlacement}
|
||||||
classNames={{
|
className="bg-white"
|
||||||
wrapper: "bg-white",
|
|
||||||
base: "bg-white min-h-full",
|
|
||||||
// body: "w-full bg-white",
|
|
||||||
// footer: "bg-white"
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<ModalContent>
|
<ModalContent>
|
||||||
{(onClose) => (
|
{(onClose) => (
|
||||||
|
|
@ -363,7 +320,8 @@ export default function RegionalNews() {
|
||||||
<div className="text-xl text-black w-full justify-center flex">
|
<div className="text-xl text-black w-full justify-center flex">
|
||||||
<p className="border-b-3 border-[#C3170F] py-2 w-fit">
|
<p className="border-b-3 border-[#C3170F] py-2 w-fit">
|
||||||
{" "}
|
{" "}
|
||||||
{t("beritaWilayah")}
|
{/* {t("beritaWilayah")} */}
|
||||||
|
Polda Jajaran
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</ModalHeader>
|
</ModalHeader>
|
||||||
|
|
@ -379,6 +337,7 @@ export default function RegionalNews() {
|
||||||
radius="lg"
|
radius="lg"
|
||||||
className="h-[59px]"
|
className="h-[59px]"
|
||||||
src={item.img}
|
src={item.img}
|
||||||
|
alt="polda"
|
||||||
/>
|
/>
|
||||||
<p className="text-xs font-bold text-black">
|
<p className="text-xs font-bold text-black">
|
||||||
{item.title}
|
{item.title}
|
||||||
|
|
@ -401,6 +360,6 @@ export default function RegionalNews() {
|
||||||
)}
|
)}
|
||||||
</ModalContent>
|
</ModalContent>
|
||||||
</Modal>
|
</Modal>
|
||||||
</div>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,126 @@
|
||||||
|
"use client";
|
||||||
|
import Image from "next/image";
|
||||||
|
import RegionalNews from "./RegionalNews";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import CategorySatker from "./CategorySatker";
|
||||||
|
import PolriApps from "./PolriApps";
|
||||||
|
|
||||||
|
export default function DigitalServices() {
|
||||||
|
const [isPoldaOpen, setIsPoldaOpen] = useState(false);
|
||||||
|
const [isSatkerOpen, setIsSatkerOpen] = useState(false);
|
||||||
|
const [isAppsOpen, setIsAppsOpen] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="border-1 rounded-xl py-2 w-[90%] lg:w-[75%] mx-auto bg-white text-black">
|
||||||
|
<div className="text-xl font-semibold w-full ">
|
||||||
|
<p className="border-b-2 border-red-600 w-fit mx-auto">
|
||||||
|
Polda Satker dan Layanan Digital
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-5 p-4 justify-center">
|
||||||
|
<a
|
||||||
|
onClick={() => setIsPoldaOpen(true)}
|
||||||
|
className="group shadow-lg rounded-lg w-full 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>
|
||||||
|
<a
|
||||||
|
onClick={() => setIsSatkerOpen(true)}
|
||||||
|
className="group shadow-lg rounded-lg w-full 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="/satker.png"
|
||||||
|
width={480}
|
||||||
|
height={480}
|
||||||
|
alt="satker"
|
||||||
|
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">
|
||||||
|
Satuan Kerja Polri
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-primary underline transform group-hover:translate-y-2 transition duration-300 ease-in-out">
|
||||||
|
Lihat Selengkapnya
|
||||||
|
</p>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
onClick={() => setIsAppsOpen(true)}
|
||||||
|
className="group shadow-lg rounded-lg w-full 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="/presisi.png"
|
||||||
|
width={480}
|
||||||
|
height={480}
|
||||||
|
alt="presisi"
|
||||||
|
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">
|
||||||
|
Aplikasi Polri
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-primary underline transform group-hover:translate-y-2 transition duration-300 ease-in-out">
|
||||||
|
Lihat Selengkapnya
|
||||||
|
</p>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
onClick={() => setIsAppsOpen(true)}
|
||||||
|
className="group shadow-lg rounded-lg w-full 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="/kritik-saran.png"
|
||||||
|
width={480}
|
||||||
|
height={480}
|
||||||
|
alt="kritik-saran"
|
||||||
|
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">
|
||||||
|
Kritik dan Saran
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-primary underline transform group-hover:translate-y-2 transition duration-300 ease-in-out">
|
||||||
|
Lihat Selengkapnya
|
||||||
|
</p>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
onClick={() => setIsAppsOpen(true)}
|
||||||
|
className="group shadow-lg rounded-lg w-full 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="/survey.png"
|
||||||
|
width={480}
|
||||||
|
height={480}
|
||||||
|
alt="survey"
|
||||||
|
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">
|
||||||
|
Survey
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-primary underline transform group-hover:translate-y-2 transition duration-300 ease-in-out">
|
||||||
|
Lihat Selengkapnya
|
||||||
|
</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<RegionalNews
|
||||||
|
opened={isPoldaOpen}
|
||||||
|
modalStatus={(status) => setIsPoldaOpen(status)}
|
||||||
|
/>
|
||||||
|
<CategorySatker
|
||||||
|
opened={isSatkerOpen}
|
||||||
|
modalStatus={(status) => setIsSatkerOpen(status)}
|
||||||
|
/>
|
||||||
|
<PolriApps
|
||||||
|
opened={isAppsOpen}
|
||||||
|
modalStatus={(status) => setIsAppsOpen(status)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
Loading…
Reference in New Issue