mediahub-fe/components/landing-page/coverage.tsx

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 Aceh", slug: "aceh", logo: "/logo/polda/polda-aceh.png" },
  { name: "Polda Bali", slug: "bali", logo: "/logo/polda/polda-bali.png" },
  {
    name: "Polda Bangka Belitung",
    slug: "bangka-belitung",
    logo: "/logo/polda/polda-bangka-belitung.png",
  },
  {
    name: "Polda Banten",
    slug: "banten",
    logo: "/logo/polda/polda-banten.png",
  },
  {
    name: "Polda Bengkulu",
    slug: "bengkulu",
    logo: "/logo/polda/polda-bengkulu.png",
  },
  {
    name: "Polda DIY",
    slug: "jogja",
    logo: "/logo/polda/polda-jogja.png",
  },
  {
    name: "Polda Gorontalo",
    slug: "gorontalo",
    logo: "/logo/polda/polda-gorontalo.png",
  },
  { name: "Polda Jambi", slug: "jambi", logo: "/logo/polda/polda-jambi.png" },
  {
    name: "Polda Jawa Barat",
    slug: "jawa-barat",
    logo: "/logo/polda/polda-jawa-barat.png",
  },
  {
    name: "Polda Jawa Tengah",
    slug: "jawa-tengah",
    logo: "/logo/polda/polda-jawa-tengah.png",
  },
  {
    name: "Polda Jawa Timur",
    slug: "jawa-timur",
    logo: "/logo/polda/polda-jawa-timur.png",
  },
  {
    name: "Polda Kalimantan Barat",
    slug: "kalimantan-barat",
    logo: "/logo/polda/polda-kalimantan-barat.png",
  },
  {
    name: "Polda Kalimantan Selatan",
    slug: "kalimantan-selatan",
    logo: "/logo/polda/polda-kalimantan-selatan.png",
  },
  {
    name: "Polda Kalimantan Tengah",
    slug: "kalimantan-tengah",
    logo: "/logo/polda/polda-kalimantan-tengah.png",
  },
  {
    name: "Polda Kalimantan Timur",
    slug: "kalimantan-timur",
    logo: "/logo/polda/polda-kalimantan-timur.png",
  },
  {
    name: "Polda Kalimantan Utara",
    slug: "kaltara",
    logo: "/logo/polda/polda-kaltara.png",
  },
  {
    name: "Polda Kepulauan Riau",
    slug: "kepulauan-riau",
    logo: "/logo/polda/polda-kepulauan-riau.png",
  },
  {
    name: "Polda Lampung",
    slug: "lampung",
    logo: "/logo/polda/polda-lampung.png",
  },
  {
    name: "Polda Maluku",
    slug: "maluku",
    logo: "/logo/polda/polda-maluku.png",
  },
  {
    name: "Polda Maluku Utara",
    slug: "maluku-utara",
    logo: "/logo/polda/polda-maluku-utara.png",
  },
  {
    name: "Polda Metro Jaya",
    slug: "metro-jaya",
    logo: "/logo/polda/polda-metro-jaya.png",
  },
  {
    name: "Polda NTB",
    slug: "ntb",
    logo: "/logo/polda/polda-ntb.png",
  },
  {
    name: "Polda NTT",
    slug: "ntt",
    logo: "/logo/polda/polda-ntt.png",
  },
  { name: "Polda Papua", slug: "papua", logo: "/logo/polda/polda-papua.png" },
  {
    name: "Polda Papua Barat",
    slug: "papua-barat",
    logo: "/logo/polda/polda-papua-barat.png",
  },
  {
    name: "Polda Papua Barat Daya",
    slug: "papua-barat-daya",
    logo: "/logo/polda/polda-papua-barat-daya.png",
  },
  {
    name: "Polda Papua Tengah",
    slug: "papua-tengah",
    logo: "/logo/polda/polda-papua-tengah.png",
  },
  { name: "Polda Riau", slug: "riau", logo: "/logo/polda/polda-riau.png" },
  {
    name: "Polda Sulawesi Barat",
    slug: "sulawesi-barat",
    logo: "/logo/polda/polda-sulawesi-barat.png",
  },
  {
    name: "Polda Sulawesi Selatan",
    slug: "sulawesi-selatan",
    logo: "/logo/polda/polda-sulawesi-selatan.png",
  },
  {
    name: "Polda Sulawesi Tengah",
    slug: "sulawesi-tengah",
    logo: "/logo/polda/polda-sulawesi-tengah.png",
  },
  {
    name: "Polda Sulawesi Tenggara",
    slug: "sulawesi-tenggara",
    logo: "/logo/polda/polda-sulawesi-tenggara.png",
  },
  {
    name: "Polda Sulawesi Utara",
    slug: "sulawesi-utara",
    logo: "/logo/polda/polda-sulawesi-utara.png",
  },
  {
    name: "Polda Sumatera Barat",
    slug: "sumatera-barat",
    logo: "/logo/polda/polda-sumatera-barat.png",
  },
  {
    name: "Polda Sumatera Selatan",
    slug: "sumatera-selatan",
    logo: "/logo/polda/polda-sumatera-selatan.png",
  },
  {
    name: "Polda Sumatera Utara",
    slug: "sumatera-utara",
    logo: "/logo/polda/polda-sumatera-utara.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;