143 lines
8.2 KiB
TypeScript
143 lines
8.2 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: "ITWASUM POLRI", slug: "itwasum", logo: "/logo/satker/ITWASUM.png" },
|
|
{ name: "BAINTELKAM POLRI", slug: "baintelkam", logo: "/logo/satker/BAINTELKAM.png" },
|
|
{ name: "BAHARKAM POLRI", slug: "baharkam", logo: "/logo/satker/BAHARKAM.png" },
|
|
{ name: "BARESKRIM POLRI", slug: "bareskrim", logo: "/logo/satker/BARESKRIM.png" },
|
|
{ name: "LEMDIKLAT POLRI", slug: "lemdiklat", logo: "/logo/satker/LEMDIKLAT.png" },
|
|
{ name: "KORBRIMOB POLRI", slug: "brimob", logo: "/logo/satker/BRIMOB.png" },
|
|
{ name: "STAMAOPS POLRI", slug: "sops", logo: "/logo/satker/SOPS.png" },
|
|
{ name: "STAMARENA POLRI", slug: "srena", logo: "/logo/satker/SRENA.png" },
|
|
{ name: "SSDM POLRI", slug: "ssdm", logo: "/logo/satker/SSDM.png" },
|
|
{ name: "SLOG POLRI", slug: "slog", logo: "/logo/satker/SLOG.png" },
|
|
{ name: "SAHLI KAPOLRI", slug: "sahli-kapolri", logo: "/logo/satker/STAFAHLI.png" },
|
|
{ name: "DIVPROPRAM POLRI", slug: "divpropram", logo: "/logo/satker/DIVPROPAM.png" },
|
|
{ name: "DIVKUM", slug: "divkum", logo: "/assets/satker/divkum.png" },
|
|
{ name: "DIVHUBINTER POLRI", slug: "divhubinter", logo: "/logo/satker/DIVHUBINTER.png" },
|
|
{ name: "DIVTIK POLRI", slug: "div-tik", logo: "/logo/satker/DIV-TIK.png" },
|
|
{ name: "KORLANTAS POLRI", slug: "korlantas", logo: "/logo/satker/KORLANTAS.png" },
|
|
{ name: "DENSUS 88 POLRI", slug: "densus-88", logo: "/logo/satker/DENSUS88.png" },
|
|
{ name: "PUSDOKKES POLRI", slug: "pusdokkes", logo: "/logo/satker/PUSDOKKES.png" },
|
|
{ name: "PUSLITBANG POLRI", slug: "puslitbang", logo: "/logo/satker/PUSLITBANG.png" },
|
|
{ name: "PUSKEU POLRI", slug: "puskeu", logo: "/logo/satker/PUSKEU.png" },
|
|
{ name: "PUSJARAH POLRI", slug: "pusjarah", logo: "/logo/satker/PUSJARAH.png" },
|
|
{ name: "SETUM POLRI", slug: "setum", logo: "/logo/satker/SETUM.png" },
|
|
{ name: "YANMA POLRI", slug: "yanma", logo: "/logo/satker/YANMA.png" },
|
|
{ name: "SPRIPIM POLRI", slug: "spripim", logo: "/logo/satker/SPRIPIM.png" },
|
|
{ name: "KORPOLAIRUD BAHARKAM POLRI", slug: "polairud", logo: "/logo/satker/POLAIRUD.png" },
|
|
{ name: "KORSABHARA BAHARKAM POLRI", slug: "korps-sabhara-baharkam", logo: "/logo/satker/KORPS-SABHARA-BAHARKAM.png" },
|
|
{ name: "KORBINMAS BAHARKAM POLRI", slug: "binmas", logo: "/logo/satker/BINMAS.png" },
|
|
{ name: "DITTIPIDUM BARESKRIM POLRI", slug: "dittipidum", logo: "/logo/satker/DITTIPIDUM.png" },
|
|
{ name: "DITTIPIDEKSUS BARESKRIM POLRI", slug: "dittipideksus", logo: "/logo/satker/DITTIPIDEKSUS.png" },
|
|
{ name: "DITTIPIDKOR BARESKRIM POLRI", slug: "dittipidkor", logo: "/logo/satker/DITTIPIDKOR.png" },
|
|
{ name: "DITTIPIDNARKOBA BARESKRIM POLRI", slug: "dittipidnarkoba", logo: "/logo/satker/DITTIPIDNARKOBA.png" },
|
|
{ name: "DITTIPIDTER BARESKRIM POLRI", slug: "dittipidter", logo: "/logo/satker/DITTIPIDTER.png" },
|
|
{ name: "DITTIPIDSIBER BARESKRIM POLRI", slug: "dittipidsiber", logo: "/logo/satker/DITTIPIDSIBER.png" },
|
|
{ name: "DIT PPA-PPO BARESKRIM POLRI", slug: "dit-ppa-ppo", logo: "/logo/satker/DITPPAPPO.png" },
|
|
{ name: "PUSLABFOR BARESKRIM POLRI", slug: "puslabfor", logo: "/assets/satker/puslabfor.png" },
|
|
{ name: "PUSIKNAS BARESKRIM POLRI", slug: "pusiknas", logo: "/logo/satker/PUSKINAS.png" },
|
|
{ name: "STIK LEMDIKLAT POLRI", slug: "stik-ptik", logo: "/logo/satker/STIK-PTIK.png" },
|
|
{ name: "AKPOL LEMDIKLAT POLRI", slug: "akpol", logo: "/logo/satker/AKPOL.png" },
|
|
{ name: "SESPIM LEMDIKLAT POLRI", slug: "sespim-polri", logo: "/logo/satker/SESPIM-POLRI.png" },
|
|
{ name: "SETUKPA LEMDIKLAT POLRI", slug: "setupa-polri", logo: "/assets/satker/setupa-polri.png" },
|
|
{ name: "SEPOLWAN LEMDIKLAT POLRI", slug: "sepolwan-polri", logo: "/assets/satker/sepolwan.png" },
|
|
{ name: "SEBASA LEMDIKLAT POLRI", slug: "sebasa-polri", logo: "/assets/satker/sebasa.png" },
|
|
{ name: "RUMKIT BHAYANGKARA TK I", slug: "rumkit-bhayangkara", logo: "/assets/satker/rumkit.png" },
|
|
{ name: "POLAIR", slug: "polair", logo: "/logo/satker/POLAIR.png" },
|
|
{ name: "POLUDARA", slug: "poludara", logo: "/logo/satker/POLUDARA.png" },
|
|
{ name: "PUSINAFIS", slug: "pusinafis", logo: "/logo/satker/PUSINAFIS.png" },
|
|
// { name: "SIBER", slug: "siber", logo: "/logo/satker/SIBER.png" },
|
|
// { name: "SATUAN KERJA POLRI", slug: "satuan-kerja-polri", logo: "/logo/satker/SATUAN-KERJA-POLRI.png" },
|
|
// { name: "DIV HUMAS", slug: "div-humas", logo: "/logo/satker/DIV-HUMAS.png" },
|
|
];
|
|
|
|
const Division = () => {
|
|
const [searchTerm, setSearchTerm] = useState("");
|
|
const [seeAllValue, setSeeAllValue] = useState(false);
|
|
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((satker) => satker.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="mx-auto px-4 w-full">
|
|
{/* Header */}
|
|
{/* <Reveal> */}
|
|
{/* <h2 className="text-center text-2xl font-bold text-gray-800 dark:text-white mb-3">
|
|
{pathname?.split("/")[1] == "in" ? (
|
|
<>
|
|
{t("coverageOnly")} <span className="text-[#bb3523]">{t("division")}</span>{" "}
|
|
</>
|
|
) : (
|
|
<>
|
|
{t("division")}
|
|
<span className="text-[#bb3523]">{t("coverageOnly")}</span>
|
|
</>
|
|
)}
|
|
</h2> */}
|
|
{/* <div className="h-1 w-48 bg-[#bb3523] mx-auto mb-6 rounded"></div> */}
|
|
|
|
{/* Pencarian */}
|
|
{/* <div className="flex items-center justify-center gap-4 mb-6">
|
|
<input onChange={(e) => setSearchTerm(e.target.value)} type="text" placeholder={t("search")} className="w-4/5 px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#bb3523] focus:outline-none" />
|
|
<button onClick={handleSearch} className="px-2 w-1/5 lg:px-4 py-2 bg-[#bb3523] text-xs lg:text-base flex justify-center items-center gap-2 text-white rounded-md hover:bg-red-700">
|
|
{t("searchDivision")}
|
|
<Icon icon="ri:arrow-right-s-line" fontSize={20} />
|
|
</button>
|
|
</div> */}
|
|
|
|
{/* Grid Wilayah */}
|
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-6 px-4 overflow-y-auto max-h-[60vh]">
|
|
{filteredList?.map((region: any) => (
|
|
<Link href={`/satker/${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>
|
|
{/* {filteredList && filteredList.length > 9 && (
|
|
<div className="flex justify-center py-5">
|
|
<Button onClick={() => setSeeAllValue(!seeAllValue)} className="bg-white hover:bg-[#bb3523] text-[#bb3523] hover:text-white border-2 border-[#bb3523]">
|
|
{seeAllValue ? t("seeLess") : t("seeMore")}
|
|
</Button>
|
|
</div>
|
|
)} */}
|
|
{/* </Reveal> */}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Division;
|