105 lines
5.7 KiB
TypeScript
105 lines
5.7 KiB
TypeScript
import React, { useState } from "react";
|
|
import { Button } from "../ui/button";
|
|
import { Reveal } from "./Reveal";
|
|
import { Icon } from "@iconify/react/dist/iconify.js";
|
|
|
|
const Coverage: React.FC = () => {
|
|
const [searchTerm, setSearchTerm] = useState("");
|
|
const [seeAllValue, setSeeAllValue] = useState(false);
|
|
|
|
const regions = [
|
|
{ name: "Polda Metro Jaya", logo: "/assets/polda/polda-metro.png" },
|
|
{ name: "Polda Jawa Barat", logo: "/assets/polda/polda-jabar.png" },
|
|
{ name: "Polda Banten", logo: "/assets/polda/polda-banten.png" },
|
|
{ name: "Polda Jawa Tengah", logo: "/assets/polda/polda-jateng.png" },
|
|
{ name: "Polda D.I Yogyakarta", logo: "/assets/polda/polda-diy.png" },
|
|
{ name: "Polda Jawa Timur", logo: "/assets/polda/polda-jatim.png" },
|
|
{ name: "Polda Aceh", logo: "/assets/polda/polda-aceh.png" },
|
|
{ name: "Polda Sumatera Utara", logo: "/assets/polda/polda-sumut.png" },
|
|
{ name: "Polda Sumatera Barat", logo: "/assets/polda/polda-sumbar.png" },
|
|
{ name: "Polda Riau", logo: "/assets/polda/polda-riau.png" },
|
|
{ name: "Polda Kep. Riau", logo: "/assets/polda/polda-kepri.png" },
|
|
{ name: "Polda Jambi", logo: "/assets/polda/polda-jambi.png" },
|
|
{ name: "Polda Sumatera Selatan", logo: "/assets/polda/polda-sumsel.png" },
|
|
{ name: "Polda Kep. Bangka Belitung", logo: "/assets/polda/polda-bangkabelitung.png" },
|
|
{ name: "Polda Bengkulu", logo: "/assets/polda/polda-bengkulu.png" },
|
|
{ name: "Polda Lampung", logo: "/assets/polda/polda-lampung.png" },
|
|
{ name: "Polda Nusa Tenggara Barat", logo: "/assets/polda/polda-ntb.png" },
|
|
{ name: "Polda Nusa Tenggara Timur", logo: "/assets/polda/polda-ntt.png" },
|
|
{ name: "Polda Bali", logo: "/assets/polda/polda-bali.png" },
|
|
{ name: "Polda Kalimantan Barat", logo: "/assets/polda/polda-kalbar.png" },
|
|
{ name: "Polda Kalimantan Tengah", logo: "/assets/polda/polda-kalteng.png" },
|
|
{ name: "Polda Kalimantan Selatan", logo: "/assets/polda/polda-kalsel.png" },
|
|
{ name: "Polda Kalimantan Timur", logo: "/assets/polda/polda-kaltim.png" },
|
|
{ name: "Polda Kalimantan Utara", logo: "/assets/polda/polda-kalut.png" },
|
|
{ name: "Polda Sulawesi Tengah", logo: "/assets/polda/polda-sulteng.png" },
|
|
{ name: "Polda Sulawesi Utara", logo: "/assets/polda/polda-sulut.png" },
|
|
{ name: "Polda Gorontalo", logo: "/assets/polda/polda-gorontalo.png" },
|
|
{ name: "Polda Sulawesi Barat", logo: "/assets/polda/polda-sulbar.png" },
|
|
{ name: "Polda Sulawesi Selatan", logo: "/assets/polda/polda-sulsel.png" },
|
|
{ name: "Polda Sulawesi Tenggara", logo: "/assets/polda/polda-sultenggara.png" },
|
|
{ name: "Polda Maluku Utara", logo: "/assets/polda/polda-malut.png" },
|
|
{ name: "Polda Maluku", logo: "/assets/polda/polda-maluku.png" },
|
|
{ name: "Polda Papua Barat", logo: "/assets/polda/polda-papbar.png" },
|
|
{ name: "Polda Papua", logo: "/assets/polda/polda-papua.png" },
|
|
{ name: "Satuan Kerja POLRI", logo: "/assets/polda/polda-satker.jpeg" },
|
|
{ name: "Internasional", logo: "/assets/polda/internasional.png" },
|
|
];
|
|
|
|
return (
|
|
<div className="max-w-screen-xl mx-auto px-4 lg:px-12 py-6">
|
|
<Reveal>
|
|
{/* Header */}
|
|
<h2 className="text-center text-2xl font-bold text-gray-800 dark:text-white mb-4">
|
|
Liputan <span className="text-[#bb3523]">Wilayah</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
|
|
type="text"
|
|
placeholder="Pencarian"
|
|
className="w-4/5 px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#bb3523] focus:outline-none"
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
/>
|
|
<button className="px-2 w-1/5 lg:px-4 lg:py-2 bg-[#bb3523] text-white flex justify-center items-center gap-2 rounded-md hover:bg-red-700">Cari Liputan <Icon icon="ri:arrow-right-s-line" fontSize={20} /></button>
|
|
</div>
|
|
|
|
{/* Grid Wilayah */}
|
|
<div className="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-9 gap-6">
|
|
{regions.map((region, index) =>
|
|
!seeAllValue ? (
|
|
index < 9 ? (
|
|
<div key={index} className="flex flex-col items-center text-center group">
|
|
<div className="relative w-20 h-20 rounded-full border-2 border-[#bb3523] overflow-hidden mb-2 flex items-center justify-center">
|
|
<img src={region.logo} alt={region.name} className="w-3/4 h-3/4 object-contain group-hover:scale-110 transition-transform duration-300" />
|
|
</div>
|
|
<p className="text-md font-semibold">{region.name}</p>
|
|
</div>
|
|
) : (
|
|
""
|
|
)
|
|
) : (
|
|
<div key={index} className="flex flex-col items-center text-center group">
|
|
<div className="relative w-20 h-20 rounded-full border-2 border-[#bb3523] overflow-hidden mb-2 flex items-center justify-center">
|
|
<img src={region.logo} alt={region.name} className="w-3/4 h-3/4 object-contain group-hover:scale-110 transition-transform duration-300" />
|
|
</div>
|
|
<p className="text-md font-semibold">{region.name}</p>
|
|
</div>
|
|
)
|
|
)}
|
|
</div>
|
|
<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]">
|
|
Lihat Lebih {seeAllValue ? "Sedikit" : "Banyak"}
|
|
</Button>
|
|
</div>
|
|
</Reveal>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Coverage;
|