69 lines
3.1 KiB
TypeScript
69 lines
3.1 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import React from "react";
|
||
|
|
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
|
||
|
|
import Image from "next/image";
|
||
|
|
import Coverage from "./coverage";
|
||
|
|
|
||
|
|
const AreaCoverageWorkUnits = () => {
|
||
|
|
return (
|
||
|
|
<div className="mx-auto px-4 lg:px-12 py-6">
|
||
|
|
<h2 className="text-center text-2xl font-bold text-gray-800 dark:text-white mb-4">
|
||
|
|
Liputan <span className="text-[#bb3523]">Wilayah</span> & <span className="text-[#bb3523]">Satker</span>
|
||
|
|
</h2>
|
||
|
|
<div className="h-1 w-[250px] bg-[#bb3523] mx-auto mb-6 rounded"></div>
|
||
|
|
<div className="flex flex-col justify-center lg:flex-row gap-8">
|
||
|
|
{/* POLDA */}
|
||
|
|
<Dialog>
|
||
|
|
<DialogTrigger className="flex flex-col gap-2 justify-center items-center shadow-lg group rounded-xl py-5 px-24 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] transition-transform duration-300" />
|
||
|
|
<p className="text-base font-bold">Polda Jajaran</p>
|
||
|
|
</DialogTrigger>
|
||
|
|
<DialogContent size="lg">
|
||
|
|
<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>
|
||
|
|
<Coverage />
|
||
|
|
<div className="text-right mt-4">
|
||
|
|
<DialogClose asChild>
|
||
|
|
<button className="text-[#bb3523] font-bold">Tutup</button>
|
||
|
|
</DialogClose>
|
||
|
|
</div>
|
||
|
|
</DialogContent>
|
||
|
|
</Dialog>
|
||
|
|
|
||
|
|
{/* SATKER */}
|
||
|
|
<Dialog>
|
||
|
|
<DialogTrigger className="flex flex-col gap-2 justify-center items-center shadow-lg group rounded-xl py-5 px-24 border-2 border-transparent hover:border-[#bb3523] transition-all duration-300">
|
||
|
|
<Image width={1920} height={1080} alt="indo" 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">Polda Jajaran</p>
|
||
|
|
</DialogTrigger>
|
||
|
|
<DialogContent size="lg">
|
||
|
|
<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>
|
||
|
|
<Coverage />
|
||
|
|
<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;
|