356 lines
12 KiB
TypeScript
356 lines
12 KiB
TypeScript
'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, { useEffect, useState } from 'react';
|
|
import Link from 'next/link';
|
|
|
|
export default function RegionalNews() {
|
|
const [limitedData, setLimitedData] = useState<any>([]);
|
|
const { isOpen, onOpen, onOpenChange } = useDisclosure();
|
|
const [scrollBehavior, setScrollBehavior] = React.useState<ModalProps["scrollBehavior"]>("inside");
|
|
const [modalPlacement, setModalPlacement] = React.useState<any>("auto");
|
|
|
|
const listPolda = [
|
|
{
|
|
id: 1,
|
|
img: "/temp/poldametro.svg",
|
|
title: "Polda Metro Jaya",
|
|
path: '/news/polda-metro-jaya'
|
|
},
|
|
{
|
|
id: 2,
|
|
img: "/temp/polda-sumut.svg",
|
|
title: "Polda Sumatra Utara",
|
|
path: '/news/polda-sumatra-utara'
|
|
},
|
|
{
|
|
id: 3,
|
|
img: "/temp/polda-banten.svg",
|
|
title: "Polda Banten",
|
|
path: '/news/polda-banten'
|
|
},
|
|
{
|
|
id: 4,
|
|
img: "/temp/polda-jateng.svg",
|
|
title: "Polda Jawa Tengah",
|
|
path: '/news/polda-jateng'
|
|
},
|
|
{
|
|
id: 5,
|
|
img: "/temp/polda-jatim.svg",
|
|
title: "Polda Jawa Timur",
|
|
path: 'news/polda-jatim'
|
|
},
|
|
];
|
|
|
|
const listPoldaAll = [
|
|
{
|
|
id: 1,
|
|
img: "/assets/polda/polda-metro.svg",
|
|
title: "Polda Metro Jaya",
|
|
path: '/news/polda-metro-jaya'
|
|
},
|
|
{
|
|
id: 2,
|
|
img: "/assets/polda/polda-jabar.svg",
|
|
title: "Polda Jawa Barat",
|
|
path: '/news/polda-jawa-barat'
|
|
},
|
|
{
|
|
id: 3,
|
|
img: "/assets/polda/polda-banten.svg",
|
|
title: "Polda Banten",
|
|
path: '/news/polda-banten'
|
|
},
|
|
{
|
|
id: 4,
|
|
img: "/assets/polda/polda-jateng.svg",
|
|
title: "Polda Jawa Tengah",
|
|
path: '/news/polda-jateng'
|
|
},
|
|
{
|
|
id: 5,
|
|
img: "/assets/polda/polda-diy.svg",
|
|
title: "Polda D.I Yogyakarta",
|
|
path: '/news/polda-daerah-istimewa-yogyakarta'
|
|
},
|
|
{
|
|
id: 6,
|
|
img: "/assets/polda/polda-jatim.svg",
|
|
title: "Polda Jawa Timur",
|
|
path: '/news/polda-jawa-timur'
|
|
},
|
|
{
|
|
id: 7,
|
|
img: "/assets/polda/polda-aceh.svg",
|
|
title: "Polda Aceh",
|
|
path: '/news/polda-aceh'
|
|
},
|
|
{
|
|
id: 8,
|
|
img: "/assets/polda/polda-sumut.svg",
|
|
title: "Polda Sumatra Utara",
|
|
path: '/news/polda-sumatra-utara'
|
|
},
|
|
{
|
|
id: 9,
|
|
img: "/assets/polda/polda-sumbar.svg",
|
|
title: "Polda Sumatra Barat",
|
|
path: '/news/polda-sumatra-barat'
|
|
},
|
|
{
|
|
id: 10,
|
|
img: "/assets/polda/polda-riau.svg",
|
|
title: "Polda Riau",
|
|
path: '/news/polda-riau'
|
|
},
|
|
{
|
|
id: 11,
|
|
img: "/assets/polda/polda-kepri.svg",
|
|
title: "Polda Kep.Riau",
|
|
path: '/news/polda-kepulauan-riau'
|
|
},
|
|
{
|
|
id: 12,
|
|
img: "/assets/polda/polda-jambi.svg",
|
|
title: "Polda Jambi",
|
|
path: '/news/polda-jambi'
|
|
},
|
|
{
|
|
id: 13,
|
|
img: "/assets/polda/polda-jambi.svg",
|
|
title: "Polda Jambi",
|
|
path: '/news/polda-jambi'
|
|
},
|
|
{
|
|
id: 14,
|
|
img: "/assets/polda/polda-sumsel.svg",
|
|
title: "Polda Sumatra Selatan",
|
|
path: '/news/polda-sumatra-selatan'
|
|
},
|
|
{
|
|
id: 15,
|
|
img: "/assets/polda/polda-sumsel.svg",
|
|
title: "Polda Kep.Bangka Belitung",
|
|
path: '/news/polda-bangka-belitung'
|
|
},
|
|
{
|
|
id: 16,
|
|
img: "/assets/polda/polda-bengkulu.svg",
|
|
title: "Polda Bengkulu",
|
|
path: '/news/polda-bengkulu'
|
|
},
|
|
{
|
|
id: 17,
|
|
img: "/assets/polda/polda-lampung.svg",
|
|
title: "Polda Lampung",
|
|
path: '/news/polda-lampung'
|
|
},
|
|
{
|
|
id: 18,
|
|
img: "/assets/polda/polda-ntb.svg",
|
|
title: "Polda Nusa Tenggara Barat",
|
|
path: '/news/polda-ntb'
|
|
},
|
|
{
|
|
id: 19,
|
|
img: "/assets/polda/polda-ntb.svg",
|
|
title: "Polda Nusa Tenggara Barat",
|
|
path: '/news/polda-ntb'
|
|
},
|
|
{
|
|
id: 20,
|
|
img: "/assets/polda/polda-ntt.svg",
|
|
title: "Polda Nusa Tenggara Timur",
|
|
path: '/news/polda-ntt'
|
|
},
|
|
{
|
|
id: 21,
|
|
img: "/assets/polda/polda-bali.svg",
|
|
title: "Polda Bali",
|
|
path: '/news/polda-bali'
|
|
},
|
|
{
|
|
id: 22,
|
|
img: "/assets/polda/polda-kalbar.svg",
|
|
title: "Polda Kalimantan Barat",
|
|
path: '/news/polda-kalimantan-barat'
|
|
},
|
|
{
|
|
id: 23,
|
|
img: "/assets/polda/polda-kalteng.svg",
|
|
title: "Polda Kalimantan Tengah",
|
|
path: '/news/polda-kalimantan-tengah'
|
|
},
|
|
{
|
|
id: 24,
|
|
img: "/assets/polda/polda-kalsel.svg",
|
|
title: "Polda Kalimantan Selatan",
|
|
path: '/news/polda-kalimantan-selatan'
|
|
},
|
|
{
|
|
id: 25,
|
|
img: "/assets/polda/polda-kaltim.svg",
|
|
title: "Polda Kalimantan Timur",
|
|
path: '/news/polda-kalimantan-timur'
|
|
},
|
|
{
|
|
id: 26,
|
|
img: "/assets/polda/polda-kalut.svg",
|
|
title: "Polda Kalimantan Utara",
|
|
path: '/news/polda-kalimantan-utara'
|
|
},
|
|
{
|
|
id: 27,
|
|
img: "/assets/polda/polda-sulteng.svg",
|
|
title: "Polda Sulawesi Tengah",
|
|
path: '/news/polda-sulawesi-tengah'
|
|
},
|
|
{
|
|
id: 28,
|
|
img: "/assets/polda/polda-sulut.svg",
|
|
title: "Polda Sulawesi Utara",
|
|
path: '/news/polda-sulawesi-utara'
|
|
},
|
|
{
|
|
id: 29,
|
|
img: "/assets/polda/polda-gorontalo.svg",
|
|
title: "Polda Gorontalo",
|
|
path: '/news/polda-gorontalo'
|
|
},
|
|
{
|
|
id: 30,
|
|
img: "/assets/polda/polda-sulbar.svg",
|
|
title: "Polda Sulawesi Barat",
|
|
path: '/news/polda-sulawesi-barat'
|
|
},
|
|
{
|
|
id: 31,
|
|
img: "/assets/polda/polda-sulsel.svg",
|
|
title: "Polda Sulawesi Selatan",
|
|
path: '/news/polda-sulawesi-selatan'
|
|
},
|
|
{
|
|
id: 32,
|
|
img: "/assets/polda/polda-sultenggara.svg",
|
|
title: "Polda Sulawesi Tenggara",
|
|
path: '/news/polda-sulawesi-tenggara'
|
|
},
|
|
{
|
|
id: 33,
|
|
img: "/assets/polda/polda-malut.svg",
|
|
title: "Polda Maluku Utara",
|
|
path: '/news/polda-maluku-utara'
|
|
},
|
|
{
|
|
id: 34,
|
|
img: "/assets/polda/polda-maluku.svg",
|
|
title: "Polda Maluku",
|
|
path: '/news/polda-maluku'
|
|
},
|
|
{
|
|
id: 35,
|
|
img: "/assets/polda/polda-papuabarat.svg",
|
|
title: "Polda Papua Barat",
|
|
path: '/news/polda-papua-barat'
|
|
},
|
|
{
|
|
id: 36,
|
|
img: "/assets/polda/polda-papua.svg",
|
|
title: "Polda Papua",
|
|
path: '/news/polda-papua'
|
|
},
|
|
|
|
];
|
|
|
|
// 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 border-3 border-[#DD8306] rounded-none md:rounded-lg h-auto lg:h-[338px] py-4 flex flex-col justify-around'>
|
|
<div className='font-bold text-2xl underline underline-offset-4 decoration-red-600 text-[#DD8306]'>Berita Wilayah</div>
|
|
<div className='flex items-center justify-around'>
|
|
<div><ChevronLeftWhite color='orange' /></div>
|
|
<div className="gap-2 md:gap-4 lg:gap-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5">
|
|
{listPolda.map((item: any, index: any) => (
|
|
<Link href={item.path}>
|
|
<div key={item.id} className='w-[157px] h-[141px] flex flex-col items-center justify-evenly'>
|
|
<Image
|
|
radius="lg"
|
|
className="h-[59px]"
|
|
src={item.img}
|
|
/>
|
|
<p className='text-xs font-bold text-[#DD8306]'>{item.title}</p>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
<div><ChevronRightWhite color='orange' /></div>
|
|
</div>
|
|
<div>
|
|
<Button
|
|
onPress={onOpen}
|
|
className='bg-[#DD8306] text-white 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",
|
|
// body: "w-full bg-white",
|
|
// footer: "bg-white"
|
|
}}
|
|
>
|
|
<ModalContent>
|
|
{(onClose) => (
|
|
<>
|
|
<ModalHeader className="flex flex-col text-[#DD8306] items-center min-h mb- text-3xl font-semibold">Berita Wilayah</ModalHeader>
|
|
<ModalBody className='flex flex-row flex-wrap justify-center text-center'>
|
|
{listPoldaAll.map((item: any, index: any) => (
|
|
<Link href={item.path}>
|
|
<div key={index.id} className='w-[140px] h-[115px] flex flex-col items-center justify-evenly border-2 rounded-lg shadow-sm'>
|
|
<Image
|
|
radius="lg"
|
|
className="h-[59px]"
|
|
src={item.img}
|
|
/>
|
|
<p className='text-xs font-bold text-[#DD8306]'>{item.title}</p>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</ModalBody>
|
|
<ModalFooter>
|
|
<Button color="danger" variant="light" onPress={onClose}>
|
|
Tutup
|
|
</Button>
|
|
</ModalFooter>
|
|
</>
|
|
)}
|
|
</ModalContent>
|
|
</Modal>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|