web-humas-fe/components/Landing Page/CategorySatker.tsx

'use client'
import { Button } from '@nextui-org/button';
import { Image, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalProps, useDisclosure } from '@nextui-org/react';
import { ChevronLeftWhite, ChevronRightWhite } from '../icons';
import React from 'react';
import Link from 'next/link';

export default function CategorySatker() {
    const { isOpen, onOpen, onOpenChange } = useDisclosure();
    const [scrollBehavior, setScrollBehavior] = React.useState<ModalProps["scrollBehavior"]>("inside");
    const [modalPlacement, setModalPlacement] = React.useState<any>("auto");

    const list = [
        {
            id: 1,
            img: "/assets/satker2/siber.svg",
            title: "Siber",
            path: '/news/siber'
        },
        {
            id: 2,
            img: "/assets/satker2/divkum.svg",
            title: "Divkum",
            path: '/news/divkum'
        },
        {
            id: 3,
            img: "/assets/satker2/puskeu.svg",
            title: "Puskeu",
            path: '/news/puskeu'
        },
        {
            id: 4,
            img: "/assets/satker2/ssdm.svg",
            title: "SSDM",
            path: '/news/ssdm'
        },
        {
            id: 5,
            img: "/assets/satker2/itwasum.svg",
            title: "Itwasum",
            path: '/news/itwasum'
        },

    ];

    const SatkerAll = [
        {
            id: 1,
            img: "/assets/satker2/siber.svg",
            title: "Siber",
            path: '/news/siber'
        },
        {
            id: 2,
            img: "/assets/satker2/divkum.svg",
            title: "Divkum",
            path: '/news/divkum'
        },
        {
            id: 3,
            img: "/assets/satker2/puskeu.svg",
            title: "Puskeu",
            path: '/news/puskeu'
        },
        {
            id: 4,
            img: "/assets/satker2/ssdm.svg",
            title: "SSDM",
            path: '/news/ssdm'
        },
        {
            id: 5,
            img: "/assets/satker2/itwasum.svg",
            title: "Itwasum",
            path: '/news/itwasum'
        },
        {
            id: 6,
            img: "/assets/satker2/stik-ptik.svg",
            title: "STIK-PTIK",
            path: '/news/stik-ptik'
        },
        {
            id: 7,
            img: "/assets/satker2/brimob.svg",
            title: "BRIMOB",
            path: '/news/brimob'
        },
        {
            id: 8,
            img: "/assets/satker2/humas.svg",
            title: "DIV HUMAS",
            path: '/news/humas'
        },
        {
            id: 9,
            img: "/assets/satker2/puslitbang.svg",
            title: "PUSLITBANG",
            path: '/news/puslitbang'
        },
        {
            id: 10,
            img: "/assets/satker2/binmas.svg",
            title: "BINMAS",
            path: '/news/binmas'
        },
        {
            id: 11,
            img: "/assets/satker2/divtik.svg",
            title: "DIV TIK",
            path: '/news/divtik'
        },
        {
            id: 12,
            img: "/assets/satker2/spripim.svg",
            title: "SPRIPIM",
            path: '/news/spripim'
        },
        {
            id: 13,
            img: "/assets/satker2/propam.svg",
            title: "DIV PROPAM",
            path: '/news/propam'
        },
        {
            id: 14,
            img: "/assets/satker2/sabbaharkam.svg",
            title: "KORPS SABHARA BAHARKAM",
            path: '/news/sabhara-baharkam'
        },
        {
            id: 15,
            img: "/assets/satker2/pusdokes.svg",
            title: "PUSDOKKES",
            path: '/news/pusdokkes'
        },
        {
            id: 16,
            img: "/assets/satker2/baharkam.svg",
            title: "baharkam",
            path: '/news/baharkam'
        },
        {
            id: 17,
            img: "/assets/satker2/polairud.svg",
            title: "POLAIURD",
            path: '/news/polairud'
        },
        {
            id: 18,
            img: "/assets/satker2/polair.svg",
            title: "POLAIR",
            path: '/news/polair'
        },
        {
            id: 19,
            img: "/assets/satker2/poludara.svg",
            title: "POLUDARA",
            path: '/news/poludara'
        },
        {
            id: 20,
            img: "/assets/satker2/lemdiklat.svg",
            title: "LEMDIKLAT",
            path: '/news/lemdiklat'
        },
        {
            id: 21,
            img: "/assets/satker2/akpol.svg",
            title: "AKPOL",
            path: '/news/akpol'
        },
        {
            id: 22,
            img: "/assets/satker2/korlantas.svg",
            title: "KORLANTAS",
            path: '/news/korlantas'
        },
        {
            id: 21,
            img: "/assets/satker2/pusinafis.svg",
            title: "PUSINAFIS",
            path: '/news/pusinafis'
        },
        {
            id: 22,
            img: "/assets/satker2/pusjarah.svg",
            title: "PUSJARAH",
            path: '/news/pusjarah'
        },
        {
            id: 23,
            img: "/assets/satker2/pusiknas.svg",
            title: "PUSIKNAS",
            path: '/news/pusiknas'
        },
        {
            id: 24,
            img: "/assets/satker2/slog.svg",
            title: "SLOG",
            path: '/news/slog'
        },
        {
            id: 25,
            img: "/assets/satker2/baintelkam.svg",
            title: "BAINTELKAM",
            path: '/news/baintelkam'
        },
        {
            id: 26,
            img: "/assets/satker2/bareskrim.svg",
            title: "BARESKRIM",
            path: '/news/bareskrim'
        },
        {
            id: 27,
            img: "/assets/satker2/hubinter.svg",
            title: "DIVHUBINTER",
            path: '/news/divhubinter'
        },
        {
            id: 28,
            img: "/assets/satker2/setum.svg",
            title: "SETUM",
            path: '/news/setum'
        },
        {
            id: 29,
            img: "/assets/satker2/puslabfor.svg",
            title: "PUSLABFOR",
            path: '/news/puslabfor'
        },
        {
            id: 30,
            img: "/assets/satker2/densus88.svg",
            title: "DENSUS 88",
            path: '/news/densus88'
        },
        {
            id: 31,
            img: "/assets/satker2/sahlikapolri.svg",
            title: "SAHLI KAPOLRI",
            path: '/news/sahli-kapolri'
        },
        {
            id: 32,
            img: "/assets/satker2/sops.svg",
            title: "SOPS",
            path: '/news/sops'
        },
        {
            id: 33,
            img: "/assets/satker2/srena.svg",
            title: "SRENA",
            path: '/news/srena'
        },
        {
            id: 34,
            img: "/assets/satker2/sespim.svg",
            title: "SESPIM POLRI",
            path: '/news/sespim-polri'
        },
        {
            id: 35,
            img: "/assets/satker2/setupa.svg",
            title: "SETUPA POLRI",
            path: '/news/setupa-polri'
        },

    ]

    // useEffect(() => {
    //     function updateLimitedData() {
    //         if (window.matchMedia("(max-width: 767px)").matches) {
    //             setLimitedData(list.slice(0, 2));
    //         } else if (window.matchMedia("(min-width: 768px) and (max-width: 1023px)").matches) {
    //             setLimitedData(list.slice(0, 3));
    //         } else {
    //             setLimitedData(list.slice(0, 5));
    //         }
    //     }

    //     updateLimitedData();
    //     window.addEventListener('resize', updateLimitedData);
    //     return () => {
    //         window.removeEventListener('resize', updateLimitedData);
    //     };
    // }, [list]);

    return (
        <div className='text-center bg-[#DD8306] rounded-none md:rounded-lg h-auto lg:h-[338px] space-y-0 py-4 md:space-y-7 flex flex-col justify-center'>
            <div className='text-white font-bold text-2xl underline underline-offset-4 decoration-red-600'>Kategori Satker</div>
            <div className='flex items-center justify-around'>
                <div><ChevronLeftWhite /></div>
                <div className="gap-2 md:gap-4 lg:gap-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5">
                    {list.map((item: any, index: any) => (
                        <Link href={item.path}>
                            <div key={index} className='w-[157px] h-[140px] flex flex-col items-center justify-evenly   '>
                                <Image
                                    radius="lg"
                                    src={item.img}
                                />
                                <p className='text-xs font-bold text-white'>{item.title}</p>
                            </div>
                        </Link>
                    ))}
                </div>
                <div><ChevronRightWhite /></div>
            </div>
            <div>
                <Button
                    onPress={onOpen}
                    className='bg-white text-[#DD8306] font-bold'
                    size='sm'
                >
                    Lihat Lebih Banyak
                </Button>
                <Modal isOpen={isOpen} onOpenChange={onOpenChange}
                    size='full'
                    scrollBehavior={scrollBehavior}
                    placement={modalPlacement}
                    classNames={{
                        wrapper: "bg-white",
                        base: "bg-white min-h-full",
                    }}
                >
                    <ModalContent>
                        {(onClose) => (
                            <>
                                <ModalHeader className="flex flex-col text-[#DD8306] items-center min-h text-3xl font-semibold">Berita Wilayah</ModalHeader>
                                <ModalBody className='flex flex-row flex-wrap justify-center text-center'>
                                    {SatkerAll.map((item: any, index: any) => (
                                        <div key={index.id} className='w-[140px] h-[115px] flex flex-col items-center justify-center  rounded-lg shadow-sm'>
                                            <Link href={item.path}>
                                                <Image
                                                    radius="lg"
                                                    className="h-[59px] "
                                                    src={item.img}
                                                />
                                            </Link>
                                            <p className='text-xs font-bold text-[#DD8306] pt-2'>{item.title}</p>
                                        </div>
                                    ))}
                                </ModalBody>
                                <ModalFooter>
                                    <Button color="danger" variant="light" onPress={onClose}>
                                        Tutup
                                    </Button>
                                </ModalFooter>
                            </>
                        )}
                    </ModalContent>
                </Modal>
            </div>
        </div>
    )
}