update: navbar and link
This commit is contained in:
amd123
parent
ff9cae697b
commit
da42a3f8c4
|
|
@ -0,0 +1,9 @@
|
|||
import React from 'react'
|
||||
|
||||
const AdminDasboard = () => {
|
||||
return (
|
||||
<div>AdminDasboard</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AdminDasboard
|
||||
|
|
@ -2,10 +2,10 @@ import React from 'react'
|
|||
|
||||
export default function AdminHumasPage() {
|
||||
return (
|
||||
<div className='bg-white'>
|
||||
<div>1</div>
|
||||
<div className=''>
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
<div>1</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
import { HumasLayout } from "@/components/layout/HumasLayout";
|
||||
|
||||
export default function PoldaNewsLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<HumasLayout>
|
||||
{children}
|
||||
</HumasLayout>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import ListNews from '@/components/detail/ListNews'
|
||||
import React from 'react'
|
||||
|
||||
export default function PoldaNewsPage() {
|
||||
return (
|
||||
<ListNews />
|
||||
)
|
||||
}
|
||||
|
|
@ -8,8 +8,8 @@ export default function DinamicSatkerLayout({
|
|||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
const pathname = usePathname();
|
||||
console.log(pathname)
|
||||
// const pathname = usePathname();
|
||||
// console.log(pathname)
|
||||
|
||||
return (
|
||||
<SatkerLayout>
|
||||
|
|
|
|||
|
|
@ -4,10 +4,12 @@ import React from 'react'
|
|||
|
||||
export default function SatkerPage() {
|
||||
const pathname = usePathname();
|
||||
console.log(pathname)
|
||||
// console.log(pathname)
|
||||
const url = pathname.split('satuan-kerja/')[1];
|
||||
|
||||
return (
|
||||
<div className='text-black'>
|
||||
{pathname}
|
||||
{url}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,9 +13,7 @@ export default function Footer() {
|
|||
</div>
|
||||
<div className="absolute top-0 left-0 w-full grid grid-cols-3 md:grid-cols-5 lg:grid-cols-5 gap-2 md:gap-4 px-1 md:px-10 lg:px-20 pt-5 md:pt-16 pb-5 md:pb-20 text-white">
|
||||
<div className='pb-2 md:pb-0'>
|
||||
<Link href={'/detail'}>
|
||||
<p>Berita Terkini</p>
|
||||
</Link>
|
||||
<p>Berita Terkini</p>
|
||||
<p>Info Komnas Anak</p>
|
||||
<p>Info Komnas Perempuan</p>
|
||||
<p>Kontak</p>
|
||||
|
|
|
|||
|
|
@ -1,31 +1,253 @@
|
|||
'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, { 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"]>("outside");
|
||||
const [modalPlacement, setModalPlacement] = React.useState<any>("auto");
|
||||
|
||||
const list = [
|
||||
const listPolda = [
|
||||
{
|
||||
id: 1,
|
||||
img: "/temp/poldametro.svg",
|
||||
title: "Polda Metro Jaya"
|
||||
title: "Polda Metro Jaya",
|
||||
path: '/news/polda-metro-jaya'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
img: "/temp/polda-sumut.svg",
|
||||
title: "Polda Sumatra Utara"
|
||||
title: "Polda Sumatra Utara",
|
||||
path: '/news/polda-sumatra-utara'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
img: "/temp/polda-banten.svg",
|
||||
title: "Polda Banten"
|
||||
title: "Polda Banten",
|
||||
path: '/news/polda-banten'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
img: "/temp/polda-jateng.svg",
|
||||
title: "Polda Jawa Tengah"
|
||||
title: "Polda Jawa Tengah",
|
||||
path: '/news/polda-jateng'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
img: "/temp/polda-jatim.svg",
|
||||
title: "Polda Jawa Timur"
|
||||
title: "Polda Jawa Timur",
|
||||
path: 'news/polda-jatim'
|
||||
},
|
||||
];
|
||||
|
||||
const listPoldaAll = [
|
||||
{
|
||||
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'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
img: "/temp/polda-jatim.svg",
|
||||
title: "Polda Jawa Timur",
|
||||
path: 'news/polda-jatim'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
img: "/temp/polda-jatim.svg",
|
||||
title: "Polda Jawa Timur",
|
||||
path: 'news/polda-jatim'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
img: "/temp/polda-jatim.svg",
|
||||
title: "Polda Jawa Timur",
|
||||
path: 'news/polda-jatim'
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
img: "/temp/polda-jatim.svg",
|
||||
title: "Polda Jawa Timur",
|
||||
path: 'news/polda-jatim'
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
img: "/temp/polda-jatim.svg",
|
||||
title: "Polda Jawa Timur",
|
||||
path: 'news/polda-jatim'
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
img: "/temp/polda-jatim.svg",
|
||||
title: "Polda Jawa Timur",
|
||||
path: 'news/polda-jatim'
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
img: "/temp/polda-jatim.svg",
|
||||
title: "Polda Jawa Timur",
|
||||
path: 'news/polda-jatim'
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
img: "/temp/polda-jatim.svg",
|
||||
title: "Polda Jawa Timur",
|
||||
path: 'news/polda-jatim'
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
img: "/temp/polda-jatim.svg",
|
||||
title: "Polda Jawa Timur",
|
||||
path: 'news/polda-jatim'
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
img: "/temp/polda-jatim.svg",
|
||||
title: "Polda Jawa Timur",
|
||||
path: 'news/polda-jatim'
|
||||
},
|
||||
{
|
||||
id: 16,
|
||||
img: "/temp/polda-jatim.svg",
|
||||
title: "Polda Jawa Timur",
|
||||
path: 'news/polda-jatim'
|
||||
},
|
||||
{
|
||||
id: 17,
|
||||
img: "/temp/polda-jatim.svg",
|
||||
title: "Polda Jawa Timur",
|
||||
path: 'news/polda-jatim'
|
||||
},
|
||||
{
|
||||
id: 18,
|
||||
img: "/temp/polda-jatim.svg",
|
||||
title: "Polda Jawa Timur",
|
||||
path: 'news/polda-jatim'
|
||||
},
|
||||
{
|
||||
id: 19,
|
||||
img: "/temp/polda-jatim.svg",
|
||||
title: "Polda Jawa Timur",
|
||||
path: 'news/polda-jatim'
|
||||
},
|
||||
{
|
||||
id: 20,
|
||||
img: "/temp/polda-jatim.svg",
|
||||
title: "Polda Jawa Timur",
|
||||
path: 'news/polda-jatim'
|
||||
},
|
||||
{
|
||||
id: 21,
|
||||
img: "/temp/polda-jatim.svg",
|
||||
title: "Polda Jawa Timur",
|
||||
path: 'news/polda-jatim'
|
||||
},
|
||||
{
|
||||
id: 22,
|
||||
img: "/temp/polda-jatim.svg",
|
||||
title: "Polda Jawa Timur",
|
||||
path: 'news/polda-jatim'
|
||||
},
|
||||
{
|
||||
id: 23,
|
||||
img: "/temp/polda-jatim.svg",
|
||||
title: "Polda Jawa Timur",
|
||||
path: 'news/polda-jatim'
|
||||
},
|
||||
{
|
||||
id: 24,
|
||||
img: "/temp/polda-jatim.svg",
|
||||
title: "Polda Jawa Timur",
|
||||
path: 'news/polda-jatim'
|
||||
},
|
||||
{
|
||||
id: 25,
|
||||
img: "/temp/polda-jatim.svg",
|
||||
title: "Polda Jawa Timur",
|
||||
path: 'news/polda-jatim'
|
||||
},
|
||||
{
|
||||
id: 26,
|
||||
img: "/temp/polda-jatim.svg",
|
||||
title: "Polda Jawa Timur",
|
||||
path: 'news/polda-jatim'
|
||||
},
|
||||
{
|
||||
id: 27,
|
||||
img: "/temp/polda-jatim.svg",
|
||||
title: "Polda Jawa Timur",
|
||||
path: 'news/polda-jatim'
|
||||
},
|
||||
{
|
||||
id: 28,
|
||||
img: "/temp/polda-jatim.svg",
|
||||
title: "Polda Jawa Timur",
|
||||
path: 'news/polda-jatim'
|
||||
},
|
||||
{
|
||||
id: 29,
|
||||
img: "/temp/polda-jatim.svg",
|
||||
title: "Polda Jawa Timur",
|
||||
path: 'news/polda-jatim'
|
||||
},
|
||||
{
|
||||
id: 30,
|
||||
img: "/temp/polda-jatim.svg",
|
||||
title: "Polda Jawa Timur",
|
||||
path: 'news/polda-jatim'
|
||||
},
|
||||
{
|
||||
id: 31,
|
||||
img: "/temp/polda-jatim.svg",
|
||||
title: "Polda Jawa Timur",
|
||||
path: 'news/polda-jatim'
|
||||
},
|
||||
{
|
||||
id: 32,
|
||||
img: "/temp/polda-jatim.svg",
|
||||
title: "Polda Jawa Timur",
|
||||
path: 'news/polda-jatim'
|
||||
},
|
||||
{
|
||||
id: 33,
|
||||
img: "/temp/polda-jatim.svg",
|
||||
title: "Polda Jawa Timur",
|
||||
path: 'news/polda-jatim'
|
||||
},
|
||||
{
|
||||
id: 34,
|
||||
img: "/temp/polda-jatim.svg",
|
||||
title: "Polda Jawa Timur",
|
||||
path: 'news/polda-jatim'
|
||||
},
|
||||
];
|
||||
|
||||
|
|
@ -48,31 +270,72 @@ export default function RegionalNews() {
|
|||
// }, [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-center'>
|
||||
<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">
|
||||
{list.map((item: any, index: any) => (
|
||||
<div 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>
|
||||
{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: "h-full 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'>
|
||||
{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>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import { ScrollShadow } from '@nextui-org/react'
|
||||
import { LinkIcon, ScrollShadow } from '@nextui-org/react'
|
||||
import React from 'react'
|
||||
import { EyeIcon } from '../icons'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
|
||||
export default function SidebarNav() {
|
||||
return (
|
||||
|
|
@ -35,21 +37,36 @@ export default function SidebarNav() {
|
|||
</div>
|
||||
<div className='text-xl font-semibold underline underline-offset-4 decoration-red-600'>Publikasi
|
||||
<div className='flex flex-col gap-3 pt-3'>
|
||||
<img src="/publikasi1.png" alt="publikasi" />
|
||||
<img src="/publikasi2.png" alt="publikasi" />
|
||||
<img src="/publikasi3.png" alt="publikasi" />
|
||||
<img src="/publikasi4.png" alt="publikasi" />
|
||||
<img src="/publikasi5.png" alt="publikasi" />
|
||||
<img src="/publikasi6.png" alt="publikasi" />
|
||||
<img src="/publikasi7.png" alt="publikasi" />
|
||||
<Image height={200} width={400} src="/publikasi1.png" alt="publikasi" />
|
||||
<Image height={200} width={400} src="/publikasi2.png" alt="publikasi" />
|
||||
<Link href='https://humas.polri.go.id/wp-content/uploads/2023/08/LAPORAN-HASIL-KEUANGAN-SEMESTER-I-DIVISI-HUMAS-POLRI-2.pdf' target='_blank'>
|
||||
<Image height={200} width={400} src="/publikasi3.png" alt="publikasi" />
|
||||
</Link>
|
||||
<Link href='https://lpse.polri.go.id/eproc4' target='_blank'>
|
||||
<Image height={200} width={400} src="/publikasi4.png" alt="publikasi" />
|
||||
</Link>
|
||||
<Image height={200} width={400} src="/publikasi5.png" alt="publikasi" />
|
||||
<Image height={200} width={400} src="/publikasi6.png" alt="publikasi" />
|
||||
<Link href='https://tribratanews.polri.go.id/' target='_blank'>
|
||||
<Image height={200} width={400} src="/publikasi7.png" alt="publikasi" />
|
||||
</Link>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className='text-xl font-semibold underline underline-offset-4 decoration-red-600'>Channel Humas Polri
|
||||
<div className='flex flex-col gap-3 m-10'>
|
||||
<img src="/humas1.png" alt="humas-polri" />
|
||||
<img src="/humas2.png" alt="humas-polri" />
|
||||
<img src="/humas3.png" alt="humas-polri" />
|
||||
<img src="/humas4.png" alt="humas-polri" />
|
||||
<Link href='https://mediahub.polri.go.id/' target='_blank'>
|
||||
<Image height={100} width={300} src="/humas1.png" alt="humas-polri" />
|
||||
</Link>
|
||||
<Link href='https://spit.humas.polri.go.id/' target='_blank'>
|
||||
<Image height={100} width={300} src="/humas2.png" alt="humas-polri" />
|
||||
</Link>
|
||||
<Link href='https://tvradio.polri.go.id/' target='_blank'>
|
||||
<Image height={100} width={300} src="/humas3.png" alt="humas-polri" />
|
||||
</Link>
|
||||
<Link href='https://tribratanews.polri.go.id/' target='_blank' className='border-2 rounded-md shadow-md'>
|
||||
<Image height={100} width={300} src="/humas4.png" alt="humas-polri" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -57,33 +74,33 @@ export default function SidebarNav() {
|
|||
<div className='flex flex-col items-center space-y-7'>
|
||||
<div className='bg-white text-black text-sm border-2 rounded-md w-auto lg:w-[300px] p-4 shadow-md'>
|
||||
<img src="/eksternal1.png" alt="" className='w-full' />
|
||||
<p className='leading-tight text-blue-500 pt-3'>Berita BPS</p>
|
||||
<p className='leading-tight text-blue-500 hover:text-blue-700 pt-3'><Link href='https://www.bps.go.id/id/news' target='_blank'>Berita BPS</Link></p>
|
||||
<p className='text-xs text-gray-500 pt-1'>Berita terbaru dari Badan Pusat Statistika Indonesia</p>
|
||||
<p className='leading-tight text-blue-500 pt-2'>Pengumuman BPS</p>
|
||||
<p className='leading-tight text-blue-500 hover:text-blue-700 pt-2'><Link href='https://www.bps.go.id/id/publication' target='_blank'>Pengumuman BPS</Link></p>
|
||||
<p className='text-xs text-gray-500 pt-1s'>Pengumuman terbaru dari Badan Pusat Statistika Indonesia</p>
|
||||
</div>
|
||||
<div className='bg-white text-black text-sm border-2 rounded-md w-auto lg:w-[300px] p-4 shadow-md'>
|
||||
<img src="/eksternal2.png" alt="" className='w-full' />
|
||||
<p className='leading-tight text-blue-500 pt-5'>Berita KPU</p>
|
||||
<p className='leading-tight text-blue-500 hover:text-blue-700 pt-5'><Link href='https://www.kpu.go.id/berita/104/berita-terkini' target='_blank'>Berita KPU</Link></p>
|
||||
<p className='text-xs text-gray-500 pt-1'>Berita terbaru dari Komisi Pemilihan Umum Indonesia</p>
|
||||
<p className='leading-tight text-blue-500 pt-2'>Pengumuman KPU</p>
|
||||
<p className='leading-tight text-blue-500 hover:text-blue-700 pt-2'><Link href='https://www.kpu.go.id/berita/11/pengumumanse' target='_blank'>Pengumuman KPU</Link></p>
|
||||
<p className='text-xs text-gray-500 pt-1s'>Pengumuman terbaru dari Komisi Pemilihan Umum Indonesia</p>
|
||||
</div>
|
||||
<div className='bg-white text-black text-sm border-2 rounded-md w-auto lg:w-[300px] p-4 shadow-md'>
|
||||
<img src="/eksternal3.png" alt="" className='w-full' />
|
||||
<p className='leading-tight text-blue-500 pt-5'>Berita BAWASLU</p>
|
||||
<p className='leading-tight text-blue-500 hover:text-blue-700 pt-5'><Link href='https://www.bawaslu.go.id/' target='_blank'>Berita BAWASLU</Link></p>
|
||||
<p className='text-xs text-gray-500 pt-1'>Berita terbaru dari Badan Pengawas Pemilihan Umum Republik Indonesia</p>
|
||||
<p className='leading-tight text-blue-500 pt-2'>Pengumuman BAWASLU</p>
|
||||
<p className='leading-tight text-blue-500 hover:text-blue-700 pt-2'><Link href='https://www.bawaslu.go.id/id/pengumuman' target='_blank'>Pengumuman BAWASLU</Link></p>
|
||||
<p className='text-xs text-gray-500 pt-1s'>Pengumuman terbaru dari Badan Pusat Statistika Indonesia</p>
|
||||
</div>
|
||||
<div className='bg-white text-black text-sm border-2 rounded-md w-auto lg:w-[300px] p-4 shadow-md'>
|
||||
<img src="/eksternal4.png" alt="" className='w-full' />
|
||||
<p className='leading-tight text-blue-500 pt-5'>Info KPAI</p>
|
||||
<p className='leading-tight text-blue-500 hover:text-blue-700 pt-5'><Link href='https://www.kpai.go.id/' target='_blank'>Info KPAI</Link></p>
|
||||
<p className='text-xs text-gray-500 pt-1'>Informasi dan Berita terbaru dari Komisi Perlindungan Anak Indonesia</p>
|
||||
</div>
|
||||
<div className='bg-white text-black text-sm border-2 rounded-md w-auto lg:w-[300px] p-4 shadow-md'>
|
||||
<img src="/eksternal5.png" alt="" className='w-full' />
|
||||
<p className='leading-tight text-blue-500 pt-5'>INFO KOMNAS PEREMPUAN</p>
|
||||
<p className='leading-tight text-blue-500 hover:text-blue-700 pt-5'><Link href='https://www.komnasperempuan.go.id/' target='_blank'>INFO KOMNAS PEREMPUAN</Link></p>
|
||||
<p className='text-xs text-gray-500 pt-1'>Info dan Berita terbaru dari Komnas Perempuan Indonesia</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import { useForm } from 'react-hook-form';
|
|||
import { z } from 'zod';
|
||||
import { Calender, CustomerService, EyeFilledIcon, EyeSlashFilledIcon, Hotline, Location, Mail } from '../icons';
|
||||
import Datepicker from "react-tailwindcss-datepicker";
|
||||
import Image from "next/image";
|
||||
|
||||
const schema = z.object({
|
||||
name: z.string().min(3).max(50),
|
||||
|
|
@ -95,8 +96,8 @@ const Contact: React.FC = () => {
|
|||
<div>Hari Senin - Jumat | 08:00 - 15:00 WIB</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-center">
|
||||
<img src="maps.png" alt="maps" className="" />
|
||||
<div className="flex justify-center border-2 border-red-500 h-[280px] pt-2">
|
||||
{/* <Image height={100} width={100} src="/maps.png" alt="maps" className="" /> */}
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-auto lg:w-2/3 relative p-2 md:p-5 space-y-3 pr-2 md:pr-28">
|
||||
|
|
@ -201,12 +202,12 @@ const Contact: React.FC = () => {
|
|||
variant='underlined'
|
||||
/>
|
||||
</div>
|
||||
<div className="hidden lg:block absolute -top-28 right-28">
|
||||
<img src="sparklg.png" alt="" className="" />
|
||||
<div className="hidden lg:block absolute -top-36 right-20">
|
||||
<Image height={320} width={320} src="/sparklg.png" alt="" className="" />
|
||||
</div>
|
||||
<div className="flex justify-center md:justify-end">
|
||||
<Button className="bg-[#DD8306] w-auto md:w-[200px] rounded-lg" size="md">Kirim Pesan</Button>
|
||||
<img src="ar.png" alt="ar" className="absolute right-[28%] -bottom-3 hidden lg:block" />
|
||||
<Image height={320} width={320} src="/ar.png" alt="ar" className="absolute right-[28%] hidden lg:block" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import { BreadcrumbItem, Breadcrumbs, Button, Input, Select, SelectItem, SelectSection, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow } from "@nextui-org/react";
|
||||
import PPIDSidebar from '../Portal PPID/PPIDSidebar';
|
||||
import { EyeFilledIcon, SearchIcon } from '../icons';
|
||||
import Link from "next/link";
|
||||
|
||||
|
||||
export default function ListNews() {
|
||||
|
|
@ -100,20 +101,22 @@ export default function ListNews() {
|
|||
</Breadcrumbs>
|
||||
<div className="flex-wrap grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 pt-5 place-items-center gap-7">
|
||||
{listNews.map((news) => (
|
||||
<div className="h-auto w-[300px] text-xs">
|
||||
<div className="h-[50%]">
|
||||
<img src={news.thumnbnail} alt="" className="w-max" />
|
||||
</div>
|
||||
<div className="px-3 py-3">
|
||||
<div className="font-medium text-sm leading-5 ">{news.title}</div>
|
||||
<div className="flex pb-1">
|
||||
<div className="text-xs">{news.date}</div>
|
||||
{/* <div>jam</div>
|
||||
<div>creator</div> */}
|
||||
<Link href={`/news/detail/${news.id}`}>
|
||||
<div className="h-auto w-[300px] text-xs">
|
||||
<div className="h-[50%]">
|
||||
<img src={news.thumnbnail} alt="" className="w-max" />
|
||||
</div>
|
||||
<div className="px-3 py-3">
|
||||
<div className="font-medium text-sm leading-5 ">{news.title}</div>
|
||||
<div className="flex pb-1">
|
||||
<div className="text-xs">{news.date}</div>
|
||||
{/* <div>jam</div>
|
||||
<div>creator</div> */}
|
||||
</div>
|
||||
<div className="text-clip">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis est quas soluta deserunt ullam. Sapiente facilis modi vitae. Aspernatur excepturi quo amet omnis laudantium inventore praesentium illum hic reiciendis error.</div>
|
||||
</div>
|
||||
<div className="text-clip">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis est quas soluta deserunt ullam. Sapiente facilis modi vitae. Aspernatur excepturi quo amet omnis laudantium inventore praesentium illum hic reiciendis error.</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,12 +11,12 @@ interface Props {
|
|||
|
||||
export default function HumasAdminLayout({ children, pageTitle }: Props) {
|
||||
return (
|
||||
// <section className="flex text-black dark:text-white dark:bg-[#0b2948] border-2 border-red-500">
|
||||
<section className="flex ">
|
||||
<section className=" text-black flex dark:text-white bg-slate-100 dark:bg-[#151c2c] h-screen">
|
||||
<HumasSidebarWrapper />
|
||||
<HumasNavbarWrapper>
|
||||
{children}
|
||||
</HumasNavbarWrapper>
|
||||
</section>
|
||||
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
'use client'
|
||||
import { Navbar, NavbarContent } from '@nextui-org/navbar';
|
||||
import { Avatar, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger } from '@nextui-org/react';
|
||||
import { Navbar, NavbarBrand, NavbarContent, NavbarItem } from '@nextui-org/navbar';
|
||||
import { Avatar, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger, ScrollShadow } from '@nextui-org/react';
|
||||
import React from 'react'
|
||||
import { ThemeSwitch } from '../theme-switch';
|
||||
import Link from 'next/link';
|
||||
|
||||
interface Props {
|
||||
children: React.ReactNode;
|
||||
|
|
@ -10,13 +11,19 @@ interface Props {
|
|||
}
|
||||
export default function HumasNavbarWrapper({ children }: Props) {
|
||||
return (
|
||||
<div className='relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden max-h-screen bg-transparent'>
|
||||
<Navbar className='w-full bg-slate-100 dark:bg-[#16213E]'
|
||||
<div className='w-full relative overflow-y-auto overflow-x-hidden'>
|
||||
<Navbar maxWidth='full' className='dark:text-white bg-slate-200 dark:bg-[#182237]'
|
||||
isBordered
|
||||
classNames={{
|
||||
wrapper: "w-full max-w-full"
|
||||
}}>
|
||||
<NavbarContent as="div" justify="end">
|
||||
wrapper: "p-2"
|
||||
}}
|
||||
>
|
||||
<NavbarContent>
|
||||
<NavbarItem>
|
||||
Judul
|
||||
</NavbarItem>
|
||||
</NavbarContent>
|
||||
<NavbarContent as="div" justify="end" className='pr-2'>
|
||||
<Dropdown placement="bottom-end">
|
||||
<DropdownTrigger>
|
||||
<Avatar
|
||||
|
|
@ -35,15 +42,20 @@ export default function HumasNavbarWrapper({ children }: Props) {
|
|||
<p className="font-semibold">zoey@example.com</p>
|
||||
</DropdownItem>
|
||||
<DropdownItem key="settings">My Settings</DropdownItem>
|
||||
<DropdownItem key="help_and_feedback">Help & Feedback</DropdownItem>
|
||||
<DropdownItem key="logout" color="danger">
|
||||
Log Out
|
||||
</DropdownItem>
|
||||
<DropdownItem key="theme"><ThemeSwitch /> </DropdownItem>
|
||||
<DropdownItem>
|
||||
<ThemeSwitch />
|
||||
</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
</NavbarContent>
|
||||
</Navbar>
|
||||
{children}
|
||||
<div className='p-2'>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,9 +1,101 @@
|
|||
import React from 'react'
|
||||
import { RxHamburgerMenu } from "react-icons/rx";
|
||||
import {
|
||||
MdDashboard,
|
||||
MdSupervisedUserCircle,
|
||||
MdShoppingBag,
|
||||
MdAttachMoney,
|
||||
MdWork,
|
||||
MdAnalytics,
|
||||
MdPeople,
|
||||
MdOutlineSettings,
|
||||
MdHelpCenter
|
||||
} from 'react-icons/md'
|
||||
import MenuLinks from '../page/MenuLink';
|
||||
import Link from 'next/link';
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
title: "Pages",
|
||||
list: [
|
||||
{
|
||||
title: "Dashboard",
|
||||
path: '/admin/dashboard',
|
||||
icon: <MdDashboard />
|
||||
},
|
||||
{
|
||||
title: "Users",
|
||||
path: '/dashboard/users',
|
||||
icon: <MdSupervisedUserCircle />
|
||||
},
|
||||
{
|
||||
title: "Producst",
|
||||
path: '/dashboard/producst',
|
||||
icon: <MdShoppingBag />
|
||||
},
|
||||
{
|
||||
title: "Transactions",
|
||||
path: '/dashboard/transactions',
|
||||
icon: <MdAttachMoney />
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Analytics",
|
||||
list: [
|
||||
{
|
||||
title: "Revenue",
|
||||
path: '/dashboard/revenue',
|
||||
icon: <MdWork />
|
||||
},
|
||||
{
|
||||
title: "Reports",
|
||||
path: '/dashboard/reports',
|
||||
icon: <MdAnalytics />
|
||||
},
|
||||
{
|
||||
title: "Teams",
|
||||
path: '/dashboard/teams',
|
||||
icon: <MdPeople />
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "User",
|
||||
list: [
|
||||
{
|
||||
title: "Settings",
|
||||
path: '/dashboard/settings',
|
||||
icon: <MdOutlineSettings />
|
||||
},
|
||||
{
|
||||
title: "Help",
|
||||
path: '/dashboard/help',
|
||||
icon: <MdHelpCenter />
|
||||
},
|
||||
]
|
||||
},
|
||||
]
|
||||
|
||||
export default function HumasSidebarWrapper() {
|
||||
return (
|
||||
<aside className='w-[250px] h-screen bg-[#070F2B]'>
|
||||
Sidebar
|
||||
</aside>
|
||||
<aside className='w-1/4 dark:text-white bg-slate-200 border-gray-700 dark:bg-[#182237] h-screen overflow-y-auto custom-scrollbar p-3 space-y-7'>
|
||||
<div className='flex'>
|
||||
<div className='w-full flex justify-center'><Link href='/'><img src="/logohumas.png" alt="log" /></Link></div>
|
||||
<div><RxHamburgerMenu size={28} /></div>
|
||||
</div>
|
||||
<div>
|
||||
<ul className='p-2 space-y-3'>
|
||||
{menuItems.map(category => (
|
||||
<li className='space-y-1' key={category.title}>
|
||||
<span>{category.title}</span>
|
||||
{category.list.map(item => (
|
||||
<MenuLinks item={item} key={item.title} />
|
||||
))}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</aside >
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -55,6 +55,38 @@ export default function NavbarHumas() {
|
|||
<Link href={'/'}>
|
||||
<div>Beranda</div>
|
||||
</Link>
|
||||
<div className=''>
|
||||
<Dropdown>
|
||||
<DropdownTrigger>
|
||||
<Button
|
||||
>
|
||||
Open Menu
|
||||
</Button>
|
||||
</DropdownTrigger>
|
||||
<DropdownMenu aria-label="Static Actions" className='w-full'
|
||||
classNames={{
|
||||
base: "w-full",
|
||||
emptyContent: "w-full",
|
||||
list: "w-full"
|
||||
}}
|
||||
itemClasses={{
|
||||
base: "w-full",
|
||||
wrapper: "w-full",
|
||||
title: "border-2 w-full"
|
||||
|
||||
}}
|
||||
>
|
||||
<DropdownItem classNames={{
|
||||
base: "w-screen"
|
||||
}} key="new">New file</DropdownItem>
|
||||
<DropdownItem key="copy">Copy link</DropdownItem>
|
||||
<DropdownItem key="edit">Edit file</DropdownItem>
|
||||
<DropdownItem key="delete" className="text-danger" color="danger">
|
||||
Delete file
|
||||
</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
</div>
|
||||
<div>
|
||||
<Dropdown className=' dark:bg-[#1F1A17]'>
|
||||
<NavbarItem>
|
||||
|
|
|
|||
|
|
@ -6,18 +6,24 @@ import { ThemeSwitch } from '../theme-switch'
|
|||
import { usePathname } from 'next/navigation'
|
||||
|
||||
export default function NavbarSatker() {
|
||||
const pathname = usePathname();
|
||||
console.log(pathname)
|
||||
const pathname = usePathname()
|
||||
const newPathname = pathname.split('/')[3]
|
||||
|
||||
|
||||
return (
|
||||
<Navbar maxWidth='full' height="8rem" className='dark:bg-[#1F1A17]'>
|
||||
<div className='w-full h-full flex'>
|
||||
<div className='w-1/3 md:w-2/12 flex'>
|
||||
<Link href={'/'}>
|
||||
<img src="/assets/satker/EPPID2.png" alt="logo" className='w-auto lg:w-full h-auto lg:h-full p-0 lg:p-2 border-2 border-red-700 flex' />
|
||||
<div className='w-auto lg:w-2/12 flex'>
|
||||
<Link href={'#'}>
|
||||
<div className='h-full flex'>
|
||||
<img src="/assets/satker/EPPID2.png" alt="logo" className='w-auto lg:w-full h-auto lg:h-full p-0 lg:p-2 flex' />
|
||||
<div className='absolute top-5 right-[-35px]'>
|
||||
<img src="/assets/satker/pusdokes.svg" alt="" className='w-36' />
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
<div className='w-10/12 hidden md:flex flex-col justify-cente pt-3 space-y-3'>
|
||||
<div className='w-auto lg:w-10/12 hidden md:flex flex-col justify-cente pt-3 space-y-3'>
|
||||
<div className='flex items-center justify-end gap-1 md:gap-5'>
|
||||
<div className="flex gap-1 lg:gap-3 items-center">
|
||||
<div><FbIcon /></div>
|
||||
|
|
@ -30,7 +36,7 @@ export default function NavbarSatker() {
|
|||
</div>
|
||||
<div className='flex flex-wrap items-center justify-around'>
|
||||
<NavbarItem>
|
||||
<Link href='/portal-ppid' color='foreground'>
|
||||
<Link href={`/portal-ppid/satuan-kerja/${newPathname}`} color='foreground'>
|
||||
Beranda
|
||||
</Link>
|
||||
</NavbarItem>
|
||||
|
|
@ -133,14 +139,14 @@ export default function NavbarSatker() {
|
|||
<DropdownItem
|
||||
endContent={<ChevronRightIcon />}
|
||||
>
|
||||
<Link href={`${pathname}/profile/sejarah-ppid-polri`} color='foreground'>
|
||||
<Link href={`/portal-ppid/satuan-kerja/${newPathname}/profile/sejarah-ppid-polri`} color='foreground'>
|
||||
Sejarah PPID Polri
|
||||
</Link>
|
||||
</DropdownItem>
|
||||
<DropdownItem
|
||||
endContent={<ChevronRightIcon />}
|
||||
>
|
||||
<Link href='/portal-ppid/profile/profile-singkat-ppid' color='foreground'>
|
||||
<Link href={`/portal-ppid/satuan-kerja/${newPathname}/profile/profile-singkat-ppid`} color='foreground'>
|
||||
Profile Singkat PPID
|
||||
</Link>
|
||||
</DropdownItem>
|
||||
|
|
|
|||
|
|
@ -20,10 +20,10 @@ export default function DetailNews() {
|
|||
<p className='hidden md:block'>|</p>
|
||||
<p>1000</p>
|
||||
<div className="flex gap-2 md:hidden">
|
||||
<div><img src="/fb.png" alt="medsos" /></div>
|
||||
<div><img src="/twitter.png" alt="" /></div>
|
||||
<div><img src="/linkedin.png" alt="" /></div>
|
||||
<div><img src="/wa.png" alt="" /></div>
|
||||
<div><Image height={185} width={185} src="/fb.png" alt="medsos" /></div>
|
||||
<div><Image height={185} width={185} src="/twitter.png" alt="medsos" /></div>
|
||||
<div><Image height={185} width={185} src="/linkedin.png" alt="medsos" /></div>
|
||||
<div><Image height={185} width={185} src="/wa.png" alt="medsos" /></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -39,10 +39,10 @@ export default function DetailNews() {
|
|||
Berdasarkan hasil perhitungan kerugian keuangan negara yang dilakukan BPK RI adalah sebesar Rp 13.213.174.883.</p>
|
||||
</div>
|
||||
<div className="hidden sm:grid grid-cols-5 px-1 md:px-3 pt-10">
|
||||
<div><img src="/fb.png" alt="medsos" /></div>
|
||||
<div><img src="/twitter.png" alt="" /></div>
|
||||
<div><img src="/linkedin.png" alt="" /></div>
|
||||
<div><img src="/wa.png" alt="" /></div>
|
||||
<div><Image height={185} width={185} src="/fb.png" alt="medsos" /></div>
|
||||
<div><Image height={185} width={185} src="/twitter.png" alt="medsos" /></div>
|
||||
<div><Image height={185} width={185} src="/linkedin.png" alt="medsos" /></div>
|
||||
<div><Image height={185} width={185} src="/wa.png" alt="medsos" /></div>
|
||||
</div>
|
||||
{/* <div className='h-auto lg:h-[350px]'>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,30 @@
|
|||
'use client'
|
||||
import React from 'react'
|
||||
import styles from './menuLinks.module.css'
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
|
||||
interface MenuLinksProps {
|
||||
item: {
|
||||
icon: JSX.Element;
|
||||
title: string;
|
||||
path: any;
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
const MenuLinks: React.FC<MenuLinksProps> = ({ item }) => {
|
||||
|
||||
const pathname = usePathname()
|
||||
|
||||
console.log(pathname);
|
||||
|
||||
return (
|
||||
<Link href={item.path} className={`flex items-center gap-2 hover:bg-slate-400 dark:hover:bg-[#2e374a] p-2 rounded-md ${pathname === item.path ? 'bg-slate-300 dark:bg-[#2e374a]' : ''}`} >
|
||||
{item.icon}
|
||||
{item.title}
|
||||
</Link >
|
||||
)
|
||||
}
|
||||
|
||||
export default MenuLinks
|
||||
|
|
@ -40,6 +40,7 @@
|
|||
"react-datepicker": "^6.1.0",
|
||||
"react-dom": "18.2.0",
|
||||
"react-hook-form": "^7.50.1",
|
||||
"react-icons": "^5.0.1",
|
||||
"react-tailwindcss-datepicker": "^1.6.6",
|
||||
"react-tweet": "^3.2.0",
|
||||
"swiper": "^11.0.6",
|
||||
|
|
@ -5853,6 +5854,14 @@
|
|||
"react": "^16.8.0 || ^17 || ^18"
|
||||
}
|
||||
},
|
||||
"node_modules/react-icons": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz",
|
||||
"integrity": "sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==",
|
||||
"peerDependencies": {
|
||||
"react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@
|
|||
"react-datepicker": "^6.1.0",
|
||||
"react-dom": "18.2.0",
|
||||
"react-hook-form": "^7.50.1",
|
||||
"react-icons": "^5.0.1",
|
||||
"react-tailwindcss-datepicker": "^1.6.6",
|
||||
"react-tweet": "^3.2.0",
|
||||
"swiper": "^11.0.6",
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 12 KiB |
|
|
@ -2,56 +2,21 @@
|
|||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
|
||||
.swiper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
background: #fff;
|
||||
|
||||
/* Center slide text vertically */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.swiper-slide img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.autoplay-progress {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
bottom: 16px;
|
||||
z-index: 10;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
color: var(--swiper-theme-color);
|
||||
}
|
||||
|
||||
.autoplay-progress svg {
|
||||
--progress: 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0px;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
stroke-width: 4px;
|
||||
stroke: var(--swiper-theme-color);
|
||||
fill: none;
|
||||
stroke-dashoffset: calc(125.6 * (1 - var(--progress)));
|
||||
stroke-dasharray: 125.6;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
/*
|
||||
*{
|
||||
border:1px solid green;
|
||||
} */
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: transparent;
|
||||
border-radius: 5px;
|
||||
}
|
||||
Loading…
Reference in New Issue