242 lines
6.5 KiB
TypeScript
242 lines
6.5 KiB
TypeScript
import React, { useState } from "react";
|
|
import { Button } from "../ui/button";
|
|
import { Reveal } from "./Reveal";
|
|
import { Icon } from "@iconify/react/dist/iconify.js";
|
|
import { Link } from "@/i18n/routing";
|
|
import { useTranslations } from "next-intl";
|
|
import { usePathname } from "next/navigation";
|
|
import Image from "next/image";
|
|
|
|
const regions = [
|
|
{
|
|
name: "Polda Metro Jaya",
|
|
slug: "metro-jaya",
|
|
logo: "/logo/polda/polda-metro.png",
|
|
},
|
|
{
|
|
name: "Polda Jawa Barat",
|
|
slug: "jawa-barat",
|
|
logo: "/logo/polda/polda-jawabarat.png",
|
|
},
|
|
{
|
|
name: "Polda Banten",
|
|
slug: "banten",
|
|
logo: "/logo/polda/polda-banten.png",
|
|
},
|
|
{
|
|
name: "Polda Jawa Tengah",
|
|
slug: "jawa-tengah",
|
|
logo: "/logo/polda/polda-jawatengah.png",
|
|
},
|
|
{
|
|
name: "Polda D.I Yogyakarta",
|
|
slug: "di-yogyakarta",
|
|
logo: "/logo/polda/polda-jogja.png",
|
|
},
|
|
{
|
|
name: "Polda Jawa Timur",
|
|
slug: "jawa-timur",
|
|
logo: "/logo/polda/polda-jawatimur.png",
|
|
},
|
|
{ name: "Polda Aceh", slug: "aceh", logo: "/logo/polda/polda-aceh.png" },
|
|
{
|
|
name: "Polda Sumatera Utara",
|
|
slug: "sumatera-utara",
|
|
logo: "/logo/polda/polda-sumut.png",
|
|
},
|
|
{
|
|
name: "Polda Sumatera Barat",
|
|
slug: "sumatera-barat",
|
|
logo: "/logo/polda/polda-sumatera-barat.png",
|
|
},
|
|
{ name: "Polda Riau", slug: "riau", logo: "/logo/polda/polda-riau.png" },
|
|
{
|
|
name: "Polda Kep. Riau",
|
|
slug: "kepulauan-riau",
|
|
logo: "/logo/polda/polda-kepri.png",
|
|
},
|
|
{ name: "Polda Jambi", slug: "jambi", logo: "/logo/polda/polda-jambi.png" },
|
|
{
|
|
name: "Polda Sumatera Selatan",
|
|
slug: "sumatera-selatan",
|
|
logo: "/logo/polda/polda-sumsel.png",
|
|
},
|
|
{
|
|
name: "Polda Kep. Bangka Belitung",
|
|
slug: "bangka-belitung",
|
|
logo: "/logo/polda/polda-bangkabelitung.png",
|
|
},
|
|
{
|
|
name: "Polda Bengkulu",
|
|
slug: "bengkulu",
|
|
logo: "/logo/polda/polda-bengkulu.png",
|
|
},
|
|
{
|
|
name: "Polda Lampung",
|
|
slug: "lampung",
|
|
logo: "/logo/polda/polda-lampung.png",
|
|
},
|
|
{
|
|
name: "Polda Nusa Tenggara Barat",
|
|
slug: "ntb",
|
|
logo: "/logo/polda/polda-ntb.png",
|
|
},
|
|
{
|
|
name: "Polda Nusa Tenggara Timur",
|
|
slug: "ntt",
|
|
logo: "/logo/polda/polda-ntt.png",
|
|
},
|
|
{ name: "Polda Bali", slug: "bali", logo: "/logo/polda/polda-bali.png" },
|
|
{
|
|
name: "Polda Kalimantan Barat",
|
|
slug: "kalimantan-barat",
|
|
logo: "/logo/polda/polda-kalbar.png",
|
|
},
|
|
{
|
|
name: "Polda Kalimantan Tengah",
|
|
slug: "kalimantan-tengah",
|
|
logo: "/logo/polda/polda-kalteng.png",
|
|
},
|
|
{
|
|
name: "Polda Kalimantan Selatan",
|
|
slug: "kalimantan-selatan",
|
|
logo: "/logo/polda/polda-kalsel.png",
|
|
},
|
|
{
|
|
name: "Polda Kalimantan Timur",
|
|
slug: "kalimantan-timur",
|
|
logo: "/logo/polda/polda-kaltim.png",
|
|
},
|
|
{
|
|
name: "Polda Kalimantan Utara",
|
|
slug: "kaltara",
|
|
logo: "/logo/polda/polda-kaltara.png",
|
|
},
|
|
{
|
|
name: "Polda Sulawesi Tengah",
|
|
slug: "sulawesi-tengah",
|
|
logo: "/logo/polda/polda-sulawesi-tengah.png",
|
|
},
|
|
{
|
|
name: "Polda Sulawesi Utara",
|
|
slug: "sulawesi-utara",
|
|
logo: "/logo/polda/polda-sulawesi-utara.png",
|
|
},
|
|
{
|
|
name: "Polda Gorontalo",
|
|
slug: "gorontalo",
|
|
logo: "/logo/polda/polda-gorontalo.png",
|
|
},
|
|
{
|
|
name: "Polda Sulawesi Barat",
|
|
slug: "sulawesi-barat",
|
|
logo: "/logo/polda/polda-sulbar.png",
|
|
},
|
|
{
|
|
name: "Polda Sulawesi Selatan",
|
|
slug: "sulawesi-selatan",
|
|
logo: "/logo/polda/polda-sulsel.png",
|
|
},
|
|
{
|
|
name: "Polda Sulawesi Tenggara",
|
|
slug: "sulawesi-tenggara",
|
|
logo: "/logo/polda/polda-sulawesi-tenggara.png",
|
|
},
|
|
{
|
|
name: "Polda Maluku Utara",
|
|
slug: "maluku-utara",
|
|
logo: "/logo/polda/polda-maluku-utara.png",
|
|
},
|
|
{
|
|
name: "Polda Maluku",
|
|
slug: "maluku",
|
|
logo: "/logo/polda/polda-maluku.png",
|
|
},
|
|
{
|
|
name: "Polda Papua Barat",
|
|
slug: "papua-barat",
|
|
logo: "/logo/polda/polda-papua-barat.png",
|
|
},
|
|
{ name: "Polda Papua", slug: "papua", logo: "/logo/polda/polda-papua.png" },
|
|
{
|
|
name: "Satuan Kerja POLRI",
|
|
slug: "satker-polri",
|
|
logo: "/logo/satker/SATUAN-KERJA-POLRI.png",
|
|
},
|
|
{
|
|
name: "Internasional",
|
|
slug: "internasional",
|
|
logo: "/assets/polda/internasional.png",
|
|
},
|
|
];
|
|
|
|
const Coverage: React.FC = () => {
|
|
const [seeAllValue, setSeeAllValue] = useState(false);
|
|
const [searchTerm, setSearchTerm] = useState("");
|
|
const [filteredList, setFilteredList] = useState<typeof regions | undefined>(
|
|
regions
|
|
);
|
|
const pathname = usePathname();
|
|
const t = useTranslations("LandingPage");
|
|
|
|
const handleSearch = () => {
|
|
const value = searchTerm.toLowerCase();
|
|
|
|
const filtered = regions.filter((polda) =>
|
|
polda.name.toLowerCase().includes(value)
|
|
);
|
|
setFilteredList(filtered);
|
|
};
|
|
|
|
const shimmer = (w: number, h: number) => `
|
|
<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
<defs>
|
|
<linearGradient id="g">
|
|
<stop stop-color="#bcbcbd" offset="20%" />
|
|
<stop stop-color="#f9fafb" offset="50%" />
|
|
<stop stop-color="#bcbcbd" offset="70%" />
|
|
</linearGradient>
|
|
</defs>
|
|
<rect width="${w}" height="${h}" fill="#bcbcbd" />
|
|
<rect id="r" width="${w}" height="${h}" fill="url(#g)" />
|
|
<animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite" />
|
|
</svg>`;
|
|
|
|
const toBase64 = (str: string) =>
|
|
typeof window === "undefined"
|
|
? Buffer.from(str).toString("base64")
|
|
: window.btoa(str);
|
|
|
|
return (
|
|
<div className="w-full">
|
|
<div className="max-h-[60vh] overflow-y-auto px-4">
|
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-6 px-4 max-h-[60vh]">
|
|
{filteredList?.map((region: any) => (
|
|
<Link
|
|
key={region.slug}
|
|
href={`/polda/${region.slug}`}
|
|
className="flex flex-col items-center text-center p-3 border rounded-lg shadow-md hover:shadow-lg transition-all"
|
|
>
|
|
<div className="mb-1 flex items-center justify-center">
|
|
<Image
|
|
placeholder={`data:image/svg+xml;base64,${toBase64(
|
|
shimmer(700, 475)
|
|
)}`}
|
|
width={1920}
|
|
height={1080}
|
|
src={region.logo}
|
|
alt={region.name}
|
|
className="w-14 h-14 object-contain"
|
|
/>
|
|
</div>
|
|
<p className="text-xs font-semibold">{region.name}</p>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Coverage;
|