285 lines
8.9 KiB
TypeScript
285 lines
8.9 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: "stafahli",
|
|
logo: "/logo/satker/STAFAHLI.png",
|
|
},
|
|
{
|
|
name: "DIVPROPRAM POLRI",
|
|
slug: "divpropram",
|
|
logo: "/logo/satker/DIVPROPAM.png",
|
|
},
|
|
{ name: "DIVKUM", slug: "divkum", logo: "/logo/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/DENSUS-88.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: "/logo/satker/SETUPA-POLRI.png",
|
|
},
|
|
{
|
|
name: "SEPOLWAN LEMDIKLAT POLRI",
|
|
slug: "sepolwan-polri",
|
|
logo: "/logo/satker/SEPOLWAN-POLRI.png",
|
|
},
|
|
{
|
|
name: "SEBASA LEMDIKLAT POLRI",
|
|
slug: "sebasa-polri",
|
|
logo: "/logo/satker/SEBASA-POLRI.png",
|
|
},
|
|
{
|
|
name: "RUMKIT BHAYANGKARA TK I",
|
|
slug: "rumkit-bhayangkara",
|
|
logo: "/logo/satker/RUMKIT-BHAYANGKARA.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">
|
|
{/* <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;
|