89 lines
3.9 KiB
TypeScript
89 lines
3.9 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useState } from "react";
|
|
import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
|
|
import Image from "next/image";
|
|
import Coverage from "./coverage";
|
|
import Division from "./division";
|
|
|
|
const AreaCoverageWorkUnits = () => {
|
|
const [openPolda, setOpenPolda] = useState(false);
|
|
const [openSatker, setOpenSatker] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (openPolda || openSatker) {
|
|
document.body.classList.add("overflow-hidden");
|
|
} else {
|
|
document.body.classList.remove("overflow-hidden");
|
|
}
|
|
|
|
return () => {
|
|
document.body.classList.remove("overflow-hidden");
|
|
};
|
|
}, [openPolda, openSatker]);
|
|
return (
|
|
<div className="mx-auto px-4 lg:px-0 py-6">
|
|
<h2 className="text-start text-lg md:text-xl font-bold text-[#bb3523] border-b-2 border-[#bb3523] mb-4 uppercase">
|
|
Liputan <span className="text-[#bb3523]">Wilayah</span> & <span className="text-[#bb3523]">Satker</span>
|
|
</h2>
|
|
<div className="flex flex-col justify-center lg:flex-row gap-8 ">
|
|
{/* POLDA */}
|
|
<Dialog open={openPolda} onOpenChange={setOpenPolda}>
|
|
<DialogTrigger asChild>
|
|
<button onClick={() => setOpenPolda(true)} className="flex flex-col gap-2 justify-center items-center shadow-lg group rounded-xl py-5 w-full border-2 border-transparent hover:border-[#bb3523] transition-all duration-300">
|
|
<Image width={1920} height={1080} alt="indo" src="/assets/indo.png" className="h-32 w-32 group-hover:scale-110 group-hover:border-[#bb3523] " />
|
|
<p className="text-base font-bold">Polda Jajaran</p>
|
|
</button>
|
|
</DialogTrigger>
|
|
<DialogContent size="md" className="max-h-[90vh] overflow-hidden flex flex-col" data-lenis-prevent>
|
|
<DialogHeader className="flex flex-col justify-center">
|
|
<DialogTitle>
|
|
<p className="text-center">Polda Jajaran</p>
|
|
</DialogTitle>
|
|
<DialogTitle>
|
|
<div className="h-1 w-[150px] bg-[#bb3523] mx-auto mb-6 rounded"></div>
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="overflow-y-auto px-1 flex-1">
|
|
<Coverage />
|
|
</div>
|
|
<div className="text-right mt-4">
|
|
<DialogClose asChild>
|
|
<button className="text-[#bb3523] font-bold">Tutup</button>
|
|
</DialogClose>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* SATKER */}
|
|
<Dialog open={openSatker} onOpenChange={setOpenSatker}>
|
|
<DialogTrigger asChild>
|
|
<button className="flex flex-col gap-2 justify-center items-center shadow-lg group rounded-xl py-5 w-full border-2 border-transparent hover:border-[#bb3523] transition-all duration-300">
|
|
<Image width={1920} height={1080} alt="polri" src="/assets/logo-polri.png" className="h-32 w-32 group-hover:scale-110 group-hover:border-[#bb3523] transition-transform duration-300" />
|
|
<p className="text-base font-bold">Satuan Kerja Polri</p>
|
|
</button>
|
|
</DialogTrigger>
|
|
<DialogContent size="md" data-lenis-prevent>
|
|
<DialogHeader className="flex flex-col justify-center">
|
|
<DialogTitle>
|
|
<p className="text-center">Satuan Kerja Polri</p>
|
|
</DialogTitle>
|
|
<DialogTitle>
|
|
<div className="h-1 w-[150px] bg-[#bb3523] mx-auto mb-6 rounded"></div>
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
<Division />
|
|
<div className="text-right mt-4">
|
|
<DialogClose asChild>
|
|
<button className="text-[#bb3523] font-bold">Tutup</button>
|
|
</DialogClose>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AreaCoverageWorkUnits;
|