291 lines
7.3 KiB
TypeScript
291 lines
7.3 KiB
TypeScript
"use client";
|
|
import {
|
|
BreadcrumbItem,
|
|
Breadcrumbs,
|
|
Button,
|
|
Image,
|
|
Input,
|
|
} from "@nextui-org/react";
|
|
import Link from "next/link";
|
|
import PPIDSidebar from "./PPIDSidebar";
|
|
import { SearchIcon } from "@/components/icons";
|
|
|
|
export default function PPIDPolda() {
|
|
const listPoldaAll = [
|
|
{
|
|
id: 1,
|
|
img: "/assets/polda/polda-metro-jaya.svg",
|
|
title: "Polda Metro Jaya",
|
|
path: "polda/polda-metro-jaya",
|
|
},
|
|
{
|
|
id: 2,
|
|
img: "/assets/polda/polda-jawa-barat.svg",
|
|
title: "Polda Jawa Barat",
|
|
path: "polda/polda-jawa-barat",
|
|
},
|
|
{
|
|
id: 3,
|
|
img: "/assets/polda/polda-banten.svg",
|
|
title: "Polda Banten",
|
|
path: "polda/polda-banten",
|
|
},
|
|
{
|
|
id: 4,
|
|
img: "/assets/polda/polda-jateng.svg",
|
|
title: "Polda Jawa Tengah",
|
|
path: "polda/polda-jateng",
|
|
},
|
|
{
|
|
id: 5,
|
|
img: "/assets/polda/polda-diy.svg",
|
|
title: "Polda D.I Yogyakarta",
|
|
path: "polda/polda-diy",
|
|
},
|
|
{
|
|
id: 6,
|
|
img: "/assets/polda/polda-jatim.svg",
|
|
title: "Polda Jawa Timur",
|
|
path: "polda/polda-jatim",
|
|
},
|
|
{
|
|
id: 7,
|
|
img: "/assets/polda/polda-aceh.svg",
|
|
title: "Polda Aceh",
|
|
path: "polda/polda-aceh",
|
|
},
|
|
{
|
|
id: 8,
|
|
img: "/assets/polda/polda-sumut.svg",
|
|
title: "Polda Sumatra Utara",
|
|
path: "polda/polda-sumut",
|
|
},
|
|
{
|
|
id: 9,
|
|
img: "/assets/polda/polda-sumbar.svg",
|
|
title: "Polda Sumatra Barat",
|
|
path: "polda/polda-sumbar",
|
|
},
|
|
{
|
|
id: 10,
|
|
img: "/assets/polda/polda-riau.svg",
|
|
title: "Polda Riau",
|
|
path: "polda/polda-riau",
|
|
},
|
|
{
|
|
id: 11,
|
|
img: "/assets/polda/polda-kepri.svg",
|
|
title: "Polda Kep.Riau",
|
|
path: "polda/polda-kepri",
|
|
},
|
|
{
|
|
id: 12,
|
|
img: "/assets/polda/polda-jambi.svg",
|
|
title: "Polda Jambi",
|
|
path: "polda/polda-jambi",
|
|
},
|
|
{
|
|
id: 13,
|
|
img: "/assets/polda/polda-sumsel.svg",
|
|
title: "Polda Sumatra Selatan",
|
|
path: "polda/polda-sumsel",
|
|
},
|
|
{
|
|
id: 14,
|
|
img: "/assets/polda/polda-babel.svg",
|
|
title: "Polda Kep.Bangka Belitung",
|
|
path: "polda/polda-babel",
|
|
},
|
|
{
|
|
id: 15,
|
|
img: "/assets/polda/polda-bengkulu.svg",
|
|
title: "Polda Bengkulu",
|
|
path: "polda/polda-bengkulu",
|
|
},
|
|
{
|
|
id: 16,
|
|
img: "/assets/polda/polda-lampung.svg",
|
|
title: "Polda Lampung",
|
|
path: "polda/polda-lampung",
|
|
},
|
|
{
|
|
id: 17,
|
|
img: "/assets/polda/polda-ntb.svg",
|
|
title: "Polda Nusa Tenggara Barat",
|
|
path: "polda/polda-ntb",
|
|
},
|
|
{
|
|
id: 18,
|
|
img: "/assets/polda/polda-ntt.svg",
|
|
title: "Polda Nusa Tenggara Timur",
|
|
path: "polda/polda-ntt",
|
|
},
|
|
{
|
|
id: 19,
|
|
img: "/assets/polda/polda-bali.svg",
|
|
title: "Polda Bali",
|
|
path: "polda/polda-bali",
|
|
},
|
|
{
|
|
id: 20,
|
|
img: "/assets/polda/polda-kalbar.svg",
|
|
title: "Polda Kalimantan Barat",
|
|
path: "polda/polda-kalbar",
|
|
},
|
|
{
|
|
id: 21,
|
|
img: "/assets/polda/polda-kalteng.svg",
|
|
title: "Polda Kalimantan Tengah",
|
|
path: "polda/polda-kalteng",
|
|
},
|
|
{
|
|
id: 22,
|
|
img: "/assets/polda/polda-kalsel.svg",
|
|
title: "Polda Kalimantan Selatan",
|
|
path: "polda/polda-kalsel",
|
|
},
|
|
{
|
|
id: 23,
|
|
img: "/assets/polda/polda-kaltim.svg",
|
|
title: "Polda Kalimantan Timur",
|
|
path: "polda/polda-kaltim",
|
|
},
|
|
{
|
|
id: 24,
|
|
img: "/assets/polda/polda-kalut.svg",
|
|
title: "Polda Kalimantan Utara",
|
|
path: "polda/polda-kalut",
|
|
},
|
|
{
|
|
id: 25,
|
|
img: "/assets/polda/polda-sulteng.svg",
|
|
title: "Polda Sulawesi Tengah",
|
|
path: "polda/polda-sulteng",
|
|
},
|
|
{
|
|
id: 26,
|
|
img: "/assets/polda/polda-sulawesi-utara.svg",
|
|
title: "Polda Sulawesi Utara",
|
|
path: "polda/polda-sulawesi-utara",
|
|
},
|
|
{
|
|
id: 27,
|
|
img: "/assets/polda/polda-gorontalo.svg",
|
|
title: "Polda Gorontalo",
|
|
path: "polda/polda-gorontalo",
|
|
},
|
|
{
|
|
id: 28,
|
|
img: "/assets/polda/polda-sulbar.svg",
|
|
title: "Polda Sulawesi Barat",
|
|
path: "polda/polda-sulbar",
|
|
},
|
|
{
|
|
id: 29,
|
|
img: "/assets/polda/polda-sulsel.svg",
|
|
title: "Polda Sulawesi Selatan",
|
|
path: "polda/polda-sulsel",
|
|
},
|
|
{
|
|
id: 30,
|
|
img: "/assets/polda/polda-sultenggara.svg",
|
|
title: "Polda Sulawesi Tenggara",
|
|
path: "polda/polda-sultenggara",
|
|
},
|
|
{
|
|
id: 31,
|
|
img: "/assets/polda/polda-malut.svg",
|
|
title: "Polda Maluku Utara",
|
|
path: "polda/polda-malut",
|
|
},
|
|
{
|
|
id: 32,
|
|
img: "/assets/polda/polda-maluku.svg",
|
|
title: "Polda Maluku",
|
|
path: "polda/polda-maluku",
|
|
},
|
|
{
|
|
id: 33,
|
|
img: "/assets/polda/polda-papuabarat.svg",
|
|
title: "Polda Papua Barat",
|
|
path: "polda/polda-papuabarat",
|
|
},
|
|
{
|
|
id: 34,
|
|
img: "/assets/polda/polda-papua.svg",
|
|
title: "Polda Papua",
|
|
path: "polda/polda-papua",
|
|
},
|
|
];
|
|
const searchInput = (
|
|
<Input
|
|
aria-label="Search"
|
|
className="w-full"
|
|
classNames={{
|
|
inputWrapper: "bg-white hover:!bg-gray-100",
|
|
input: "text-sm",
|
|
innerWrapper: "text-red-500",
|
|
}}
|
|
labelPlacement="outside"
|
|
placeholder="Search..."
|
|
startContent={
|
|
<SearchIcon className="text-base text-default-400 pointer-events-none flex-shrink-0" />
|
|
}
|
|
endContent={
|
|
<Button size="sm" className="bg-[#DD8306] font-semibold">
|
|
Cari
|
|
</Button>
|
|
}
|
|
type="search"
|
|
/>
|
|
);
|
|
|
|
const filters = [
|
|
{ label: "Title", value: "title" },
|
|
{ label: "Date", value: "date" },
|
|
{ label: "Created At", value: "createdAt" },
|
|
];
|
|
return (
|
|
<div className="md:flex ">
|
|
<div className="w-auto bg-[#E2E2E2] md:w-2/3 lg:w-[75%] px-2 text-black">
|
|
<div className="p-1 md:p-5 lg:p-8">
|
|
<div className="font-bold text-xl">E-PPID POLDA</div>
|
|
<div className="pt-2 pb-7">
|
|
<Breadcrumbs color="primary">
|
|
<BreadcrumbItem>
|
|
<Link href="/portal-ppid">Beranda</Link>
|
|
</BreadcrumbItem>
|
|
<BreadcrumbItem>E-PPID Polda</BreadcrumbItem>
|
|
</Breadcrumbs>
|
|
</div>
|
|
<div className="pt-4 space-y- border border-[#DD8306] rounded-lg bg-[#FFFFFF]">
|
|
<div className="text-center text-xl font-semibold underline underline-offset-8 decoration-red-600">
|
|
E-PPID POLDA
|
|
</div>
|
|
<div className="flex flex-wrap items-center justify-center pt-8 gap-4">
|
|
{listPoldaAll.map((polda) => (
|
|
<div
|
|
className="flex justify-center text-center w-[140px] h-[125px] items-center pt-2 "
|
|
key={polda.id}
|
|
>
|
|
<Link
|
|
href={polda.path}
|
|
className="flex flex-col items-center text-sm font-medium gap-1"
|
|
>
|
|
<Image height={59} src={polda.img} alt="logo" />
|
|
<p>{polda.title}</p>
|
|
</Link>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div></div>
|
|
</div>
|
|
<div className="w-auto md:w-1/3 lg:w-[25%]">
|
|
<PPIDSidebar />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|