humas
/
web-humas-fe
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: satker ico

This commit is contained in:
amd123 2024-03-15 13:48:30 +07:00
parent 0a3f27d21f
commit 68fd3ea00c
39 changed files with 644 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

320
components/Landing Page/CategorySatker.tsx
View File

@ -1,35 +1,275 @@
'use client'
import { Button } from '@nextui-org/button';
import { Image } from '@nextui-org/react';
import { Image, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalProps, useDisclosure } from '@nextui-org/react';
import { ChevronLeftWhite, ChevronRightWhite } from '../icons';
import { useEffect, useState } from 'react';
import React from 'react';
import Link from 'next/link';
export default function CategorySatker() {
// 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 list = [
{
img: "/temp/poldametro.svg",
title: "Polda Metro Jaya"
id: 1,
img: "/assets/satker2/siber.svg",
title: "Siber",
path: '/news/siber'
},
{
img: "/temp/polda-sumut.svg",
title: "Polda Sumatra Utara"
id: 2,
img: "/assets/satker2/divkum.svg",
title: "Divkum",
path: '/news/divkum'
},
{
img: "/temp/polda-banten.svg",
title: "Polda Banten"
id: 3,
img: "/assets/satker2/puskeu.svg",
title: "Puskeu",
path: '/news/puskeu'
},
{
img: "/temp/polda-jateng.svg",
title: "Polda Jawa Tengah"
id: 4,
img: "/assets/satker2/ssdm.svg",
title: "SSDM",
path: '/news/ssdm'
},
{
img: "/temp/polda-jatim.svg",
title: "Polda Jawa Timur"
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) {
@ -55,25 +295,63 @@ export default function CategorySatker() {
<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) => (
<div key={index} 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-white'>{item.title}</p>
</div>
<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>
)

22
components/Landing Page/RegionalNews.tsx
View File

@ -328,16 +328,18 @@ export default function RegionalNews() {
<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>
<div key={index.id} className='w-[140px] h-[115px] flex flex-col items-center justify-center border-2 rounded-lg shadow-sm'>
<Link href={item.path}>
<div className='flex flex-col items-center '>
<Image
radius="lg"
className="h-[59px]"
src={item.img}
/>
<p className='text-xs font-bold text-[#DD8306]'>{item.title}</p>
</div>
</Link>
</div>
))}
</ModalBody>
<ModalFooter>

9
public/assets/satker2/akpol.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 747 KiB

9
public/assets/satker2/baharkam.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

9
public/assets/satker2/baintelkam.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 8.3 KiB

9
public/assets/satker2/bareskrim.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 249 KiB

9
public/assets/satker2/binmas.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

9
public/assets/satker2/brimob.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 111 KiB

9
public/assets/satker2/densus88.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 9.5 KiB

9
public/assets/satker2/divkum.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 8.7 KiB

9
public/assets/satker2/divtik.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 9.8 KiB

9
public/assets/satker2/hubinter.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 7.0 KiB

9
public/assets/satker2/humas.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB

9
public/assets/satker2/itwasum.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB

9
public/assets/satker2/korlantas.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 7.7 KiB

9
public/assets/satker2/lemdiklat.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB

9
public/assets/satker2/polair.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB

9
public/assets/satker2/polairud.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 450 KiB

9
public/assets/satker2/poludara.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 413 KiB

9
public/assets/satker2/propam.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 7.9 KiB

9
public/assets/satker2/pusdokes.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 460 KiB

9
public/assets/satker2/pusiknas.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

9
public/assets/satker2/pusinafis.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 7.6 KiB

9
public/assets/satker2/pusjarah.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

9
public/assets/satker2/puskeu.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 6.6 KiB

9
public/assets/satker2/puslabfor.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

9
public/assets/satker2/puslitbang.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 70 KiB

9
public/assets/satker2/sabbaharkam.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 8.3 KiB

9
public/assets/satker2/sahlikapolri.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 8.3 KiB

9
public/assets/satker2/sespim.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 134 KiB

9
public/assets/satker2/setum.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

9
public/assets/satker2/setupa.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 57 KiB

9
public/assets/satker2/siber.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 8.7 KiB

9
public/assets/satker2/slog.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 7.2 KiB

9
public/assets/satker2/sops.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 6.4 KiB

9
public/assets/satker2/spripim.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 9.0 KiB

9
public/assets/satker2/srena.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

9
public/assets/satker2/ssdm.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

9
public/assets/satker2/stik-ptik.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 448 KiB