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

feat: web-humas

This commit is contained in:
amd123 2024-02-19 15:39:35 +07:00
parent c0499d3af0
commit 27eb1b2152
90 changed files with 2719 additions and 218 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/about/layout.tsx
View File

@ -1,13 +0,0 @@
export default function AboutLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
<div className="inline-block max-w-lg text-center justify-center">
{children}
</div>
</section>
);
}

9
app/about/page.tsx
View File

@ -1,9 +0,0 @@
import { title } from "@/components/primitives";
export default function AboutPage() {
return (
<div>
<h1 className={title()}>About</h1>
</div>
);
}

7
app/detail/page.tsx Normal file
View File

@ -0,0 +1,7 @@
import React from 'react'
export default function Page() {
return (
<div>page</div>
)
}

12
app/docs/layout.tsx
View File

@ -1,13 +1,15 @@
'use client'
import { HumasLayout } from "@/components/layout/HumasLayout";
export default function DocsLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
<div className="inline-block max-w-lg text-center justify-center">
{children}
</div>
</section>
<HumasLayout>
{children}
</HumasLayout>
);
}

13
app/form-permohonan-informasi/layout.tsx Normal file
View File

@ -0,0 +1,13 @@
import { HumasLayout } from "@/components/layout/HumasLayout";
export default function ApplicationLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<HumasLayout>
{children}
</HumasLayout>
);
}

7
app/form-permohonan-informasi/page.tsx Normal file
View File

@ -0,0 +1,7 @@
import FormApplication from '@/components/form/form-permohonan-informasi'
export default function ApplicationPage() {
return (
<FormApplication />
)
}

17
app/gpr/page.tsx Normal file
View File

@ -0,0 +1,17 @@
import React, { useEffect, useState } from 'react'
export default function GPRPage() {
const [hasMounted, setHasMounted] = useState(false);
useEffect(() => {
setHasMounted(true);
}, []);
// Render
if (!hasMounted) return null;
return (
<div className='bg-red-500 h-96'>
<div id="gpr-kominfo-widget-container" className='h-96 text-white bg-tra'></div>
</div>
)
}

13
app/kontak-kami/layout.tsx Normal file
View File

@ -0,0 +1,13 @@
import { HumasLayout } from "@/components/layout/HumasLayout";
export default function KontakLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<HumasLayout>
{children}
</HumasLayout>
);
}

7
app/kontak-kami/page.tsx Normal file
View File

@ -0,0 +1,7 @@
import Contact from '@/components/detail/Contact'
export default function VisiMisiPage() {
return (
<Contact />
)
}

67
app/layout.tsx
View File

@ -1,41 +1,32 @@
'use client'
import Footer from "@/components/Landing Page/Footer";
import { Navbar } from "@/components/navbar";
import { fontSans } from "@/config/fonts";
import { siteConfig } from "@/config/site";
import "@/styles/globals.css";
import clsx from "clsx";
import { Metadata } from "next";
import { Providers } from "./providers";
import { usePathname } from "next/navigation";
import { PPIDLayout } from "@/components/layout/ppid-layout";
import NavbarHumas from "@/components/navbar/NavbarHumas";
// export const metadata: Metadata = {
// title: {
// default: siteConfig.name,
// template: `%s - ${siteConfig.name}`,
// },
// description: siteConfig.description,
// themeColor: [
// { media: "(prefers-color-scheme: light)", color: "white" },
// { media: "(prefers-color-scheme: dark)", color: "black" },
// ],
// icons: {
// icon: "/favicon.ico",
// shortcut: "/favicon-16x16.png",
// apple: "/apple-touch-icon.png",
// },
// };
export const metadata: Metadata = {
title: {
default: siteConfig.name,
template: `%s - ${siteConfig.name}`,
},
description: siteConfig.description,
themeColor: [
{ media: "(prefers-color-scheme: light)", color: "white" },
{ media: "(prefers-color-scheme: dark)", color: "black" },
],
icons: {
icon: "/logohumas.ico",
shortcut: "/favicon-16x16.png",
apple: "/apple-touch-icon.png",
},
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
const pathname = usePathname();
console.log(pathname)
return (
<html lang="en" suppressHydrationWarning>
<head />
@ -46,29 +37,9 @@ export default function RootLayout({
)}
>
<Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}>
{pathname === "/" ? (
<div className="relative">
<NavbarHumas />
<section className="md:absolute md:top-0 w-full ">
<img
alt="banner"
src="/headerbannerpng.png"
className=" w-full"
/>
<main className="pt-8 px-2 md:px-4 lg:px-6 flex-grow">
{children}
</main>
<Footer />
</section>
</div>
) : (
<>
<PPIDLayout>
{children}
</PPIDLayout>
<Footer />
</>
)}
<main>
{children}
</main>
</Providers>
</body>
</html>

13
app/news/detail/[id]/layout.tsx Normal file
View File

@ -0,0 +1,13 @@
import { HumasLayout } from "@/components/layout/HumasLayout";
export default function NewsLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<HumasLayout>
{children}
</HumasLayout>
);
}

8
app/news/detail/[id]/page.tsx Normal file
View File

@ -0,0 +1,8 @@
import DetailPage from '@/components/detail/DetailPage'
import React from 'react'
export default function NewsPage() {
return (
<DetailPage />
)
}

24
app/page.tsx
View File

@ -1,11 +1,27 @@
'use client'
import BannerHumas from "@/components/Landing Page/BannerHumas";
import BodyLayout from "@/components/Landing Page/BodyLayout";
import HeaderNews from "@/components/Landing Page/HeaderNews";
import { HumasLayout } from "@/components/layout/HumasLayout";
import { useEffect, useState } from "react";
export default function Home() {
const [hasMounted, setHasMounted] = useState(false);
useEffect(() => {
setHasMounted(true);
}, []);
// Render
if (!hasMounted) return null;
return (
<section>
<HeaderNews />
<BodyLayout />
</section>
<>
<HumasLayout>
<BannerHumas />
<HeaderNews />
<BodyLayout />
</HumasLayout>
</>
);
}

13
app/portal-ppid/page.tsx
View File

@ -1,12 +1,19 @@
'use client'
import { PPIDLayout } from '@/components/layout/PPIDLayout';
import { usePathname } from 'next/navigation';
import React from 'react'
import React, { Children } from 'react'
export default function PortalPPID() {
export default function PortalPPID({
children,
}: {
children: React.ReactNode
}) {
const pathname = usePathname();
console.log(pathname)
return (
<div>portalPPID</div>
<PPIDLayout>
{children}
</PPIDLayout>
)
}

13
app/profile-pimpinan-polri/layout.tsx Normal file
View File

@ -0,0 +1,13 @@
import { HumasLayout } from "@/components/layout/HumasLayout";
export default function PropimLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<HumasLayout>
{children}
</HumasLayout>
);
}

7
app/profile-pimpinan-polri/page.tsx Normal file
View File

@ -0,0 +1,7 @@
import Propim from '@/components/detail/Propim'
export default function PropimPage() {
return (
<Propim />
)
}

3
app/providers.tsx
View File

@ -1,5 +1,4 @@
"use client";
import * as React from "react";
import { NextUIProvider } from "@nextui-org/system";
import { useRouter } from 'next/navigation'
@ -12,7 +11,7 @@ export interface ProvidersProps {
}
export function Providers({ children, themeProps }: ProvidersProps) {
const router = useRouter();
const router = useRouter();
return (
<NextUIProvider navigate={router.push}>

13
app/struktur-organisasi/layout.tsx Normal file
View File

@ -0,0 +1,13 @@
import { HumasLayout } from "@/components/layout/HumasLayout";
export default function StrukturLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<HumasLayout>
{children}
</HumasLayout>
);
}

7
app/struktur-organisasi/page.tsx Normal file
View File

@ -0,0 +1,7 @@
import StrukturOragnisasi from "@/components/detail/StrukturOrganisasi";
export default function StrukturPage() {
return (
<StrukturOragnisasi />
);
}

13
app/tentang-humas-polri/layout.tsx Normal file
View File

@ -0,0 +1,13 @@
import { HumasLayout } from "@/components/layout/HumasLayout";
export default function AboutLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<HumasLayout>
{children}
</HumasLayout>
);
}

7
app/tentang-humas-polri/page.tsx Normal file
View File

@ -0,0 +1,7 @@
import About from "@/components/detail/About";
export default function AboutPage() {
return (
<About />
);
}

13
app/tugas-dan-fungsi/layout.tsx Normal file
View File

@ -0,0 +1,13 @@
import { HumasLayout } from "@/components/layout/HumasLayout";
export default function TaskLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<HumasLayout>
{children}
</HumasLayout>
);
}

8
app/tugas-dan-fungsi/page.tsx Normal file
View File

@ -0,0 +1,8 @@
import Task from '@/components/detail/TaskDetail'
import React from 'react'
export default function TaskPage() {
return (
<Task />
)
}

13
app/visi-misi/layout.tsx Normal file
View File

@ -0,0 +1,13 @@
import { HumasLayout } from "@/components/layout/HumasLayout";
export default function VisiMisiLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<HumasLayout>
{children}
</HumasLayout>
);
}

8
app/visi-misi/page.tsx Normal file
View File

@ -0,0 +1,8 @@
import VisiMisi from '@/components/detail/VisiMisi'
import React from 'react'
export default function VisiMisiPage() {
return (
<VisiMisi />
)
}

16
components/Landing Page/BannerHumas.tsx Normal file
View File

@ -0,0 +1,16 @@
import React from 'react'
export default function BannerHumas() {
return (
<div className=' bg-white'>
<img src="headerbanner1.png"
alt="humasbanner"
className='w-full relative bottom-0 md:bottom-10'
/>
<div className='absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center w-full md:w-[75%]'>
<p className='text-sm lg:text-4xl font-bold pb-1 md:pb-5'>TRANSPARANSI, PATISIPASI, DAN LAYANAN TERBAIK DARI POLRI UNTUK INDONESIA</p>
<p className='text-xs md:text-medium'>"Menyajikan Informasi Terpercaya dan Mendekatkan Polri dengan Masyarakat"</p>
</div>
</div>
)
}

22
components/Landing Page/BodyLayout.tsx
View File

@ -7,17 +7,19 @@ import SidebarNav from './SidebarNav'
export default function BodyLayout() {
return (
<div className='md:flex bg-white text-black mt-8 pb-8'>
<div className='w-auto md:-w[65%] lg:w-[75%] space-y-5'>
<CategorySatker />
<RegionalNews />
<MediaSocial />
<ENewsPolri />
<>
<div className='md:flex bg-white text-black pt-10 pb-8 px-2 md:px-4 lg:px-8 gap-9'>
<div className='w-auto md:w-[65%] lg:w-[75%] space-y-7'>
<CategorySatker />
<RegionalNews />
<MediaSocial />
<ENewsPolri />
</div>
<div className='w-auto md:w-[35%] lg:w-[25%]'>
<SidebarNav />
</div>
</div>
<div className='w-auto md:w-[35%] lg:w-[25%]'>
<SidebarNav />
</div>
</div>
</>
)
}
// h-[3700px]

29
components/Landing Page/CategorySatker.tsx
View File

@ -1,8 +1,12 @@
'use client'
import { Button } from '@nextui-org/button';
import { Image } from '@nextui-org/react';
import { ChevronLeftWhite, ChevronRightWhite } from '../icons';
import { useEffect, useState } from 'react';
export default function CategorySatker() {
// const [limitedData, setLimitedData] = useState<any>([]);
const list = [
{
img: "/temp/poldametro.svg",
@ -25,13 +29,32 @@ export default function CategorySatker() {
title: "Polda Jawa Timur"
},
];
// 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-7 m-auto md:m-10 flex flex-col justify-center border-2 border-green-500'>
<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 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5">
{list.map((item, index) => (
<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"

30
components/Landing Page/ENewsPolri.tsx
View File

@ -1,9 +1,12 @@
'use client'
import { Button, Card, CardBody, CardFooter, } from '@nextui-org/react'
import Image from 'next/image';
import React from 'react'
import React, { useEffect, useState } from 'react'
import { ChevronLeftWhite, ChevronRightIcon } from '../icons';
export default function ENewsPolri() {
const [limitedData, setLimitedData] = useState<any>([]);
const eNews = [
{
id: 1,
@ -21,13 +24,32 @@ export default function ENewsPolri() {
img: "/headernews.png",
},
];
// useEffect(() => {
// function updateLimitedData() {
// if (window.matchMedia("(max-width: 767px)").matches) {
// setLimitedData(eNews.slice(0, 1));
// } else if (window.matchMedia("(min-width: 768px) and (max-width: 1023px)").matches) {
// setLimitedData(eNews.slice(0, 2));
// } else {
// setLimitedData(eNews.slice(0, 3));
// }
// }
// updateLimitedData();
// window.addEventListener('resize', updateLimitedData);
// return () => {
// window.removeEventListener('resize', updateLimitedData);
// };
// }, [eNews]);
return (
<div className='bg-[#1F1A17] text-center border-2 border-purple-500 rounded-none md:rounded-lg h-auto lg:h-[338px] space-y-7 m-auto md:m-10 flex flex-col justify-center items-center'>
<div className='bg-[#1F1A17] text-center rounded-none md:rounded-lg h-auto lg:h-[338px] space-y-7 flex py-4 flex-col justify-center items-center'>
<p className='text-white font-bold text-2xl underline underline-offset-4 decoration-red-600'>E-Majalah Polri</p>
<div className='flex flex-row w-full items-center justify-between'>
<ChevronLeftWhite />
<div className='lg:flex space-y-4 lg:space-y-0 gap-4'>
{eNews.map((data) => (
<div className='lg:flex space-y-4 lg:space-y-0 gap-1 md:gap-2 lg:gap-8'>
{eNews.map((data: any) => (
<div key={data.id} className='h-auto md:h-[200px] w-[274px]'>
<Card className='text-white'
isFooterBlurred

7
components/Landing Page/Footer.tsx
View File

@ -2,6 +2,7 @@ import { Button } from '@nextui-org/button'
import { Input } from '@nextui-org/input'
import React from 'react'
import { MailIcon } from '../icons'
import Link from 'next/link'
export default function Footer() {
return (
@ -12,7 +13,9 @@ 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'>
<p>Berita Terkini</p>
<Link href={'/detail'}>
<p>Berita Terkini</p>
</Link>
<p>Info Komnas Anak</p>
<p>Info Komnas Perempuan</p>
<p>Kontak</p>
@ -66,7 +69,7 @@ export default function Footer() {
<Button className='mt-3 bg-[#DD8306]'>Kontributor Wilayah</Button>
</div>
</div>
<div className='text-center py-5 text-xs md:text-medium flex justify-center font-normal'>&copy; Copyright Humas<p className='text-red-700'>&nbsp; POLRI &reg;</p>&nbsp; All Rights Reserved</div>
<div className='dark:bg-black text-black dark:text-white text-center py-5 text-xs md:text-medium flex justify-center font-normal'>&copy; Copyright Humas<p className='text-red-700'>&nbsp; POLRI &reg;</p>&nbsp; All Rights Reserved</div>
</div>
)
}

75
components/Landing Page/HeaderNews.tsx
View File

@ -1,14 +1,35 @@
import { Button, Card, CardBody, CardFooter, ScrollShadow } from '@nextui-org/react'
import React from 'react'
import { EyeIcon } from '../icons'
import { Button, Card, CardFooter, ScrollShadow } from '@nextui-org/react'
import Image from 'next/image'
import { EyeIcon } from '../icons'
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/pagination';
import { Pagination } from 'swiper/modules';
import Link from 'next/link';
import GPRKominfo from '../SocialMedia/GprKominfo';
export default function HeaderNews() {
const newsData = [
{
id: 1,
title: 'Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari',
date: '21-07-2023 13:50',
views: 82,
imageUrl: '/headernews.png'
},
{
id: 2,
title: 'Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari',
date: '21-07-2023 13:50',
views: 82,
imageUrl: '/headernews.png'
},
];
return (
<div className='lg:flex items-center text-center bg-black dark:bg-white rounded-md gap-3 p-2'>
<div className='lg:flex items-center bg-white gap-3 p-2'>
<div className='w-auto lg:w-[25%] p-2 bg-[#020101] text-white rounded-md'>
<p className='text-lg font-bold h-10'>Berita Terkini</p>
<ScrollShadow hideScrollBar className=" h-[343px]">
<p className='text-lg font-bold h-10 text-center'>Berita Terkini</p>
<ScrollShadow hideScrollBar className=" h-[443px]">
<div className='text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md'>
<p>Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari</p>
<p className='py-[2px]'>21-07-2023 13:50</p>
@ -40,13 +61,44 @@ export default function HeaderNews() {
</div>
</div>
<div className='w-auto lg:w-[50%]'>
<Card
<div>
<Swiper pagination={true} modules={[Pagination]} className="mySwiper">
{newsData.map((newsItem) => (
<SwiperSlide key={newsItem.id}>
<Card
isFooterBlurred
radius="lg"
className="border-none"
>
<Image
alt="headernews"
className="object-cover"
height={660}
src={newsItem.imageUrl}
width={460}
layout="responsive"
/>
<CardFooter className="before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
<div className='text-white'>
<Link href={`news/detail/${newsItem.id}`}>
<p className='text-left font-semibold'>{newsItem.title}</p>
</Link>
<p className='py-[2px] text-left text-sm'>{newsItem.date}</p>
<p className='flex items-center gap-1 text-sm'><EyeIcon />{newsItem.views}</p>
</div>
</CardFooter>
</Card>
</SwiperSlide>
))}
</Swiper>
</div>
{/* <Card
isFooterBlurred
radius="lg"
className="border-none"
>
<Image
alt="Woman listing to music"
alt="headernews"
className="object-cover"
height={660}
src="/headernews.png"
@ -60,10 +112,11 @@ export default function HeaderNews() {
<p className='flex items-center gap-1 text-sm'><EyeIcon />82</p>
</div>
</CardFooter>
</Card>
</Card> */}
</div>
<div className='w-auto lg:w-[25%] p-2 rounded-md text-white dark:text-black '>
<div className='text-lg font-bold border-5 border-blue-950 rounded-tr-lg rounded-tl-lg'>
<GPRKominfo />
{/* <div className='text-lg font-bold border-5 border-blue-950 rounded-tr-lg rounded-tl-lg'>
<img src="/gprheader.png" alt="gpr" className='w-full' />
</div>
<div className='overflow-y-scroll h-[343px] border-5 border-blue-950 text-black'>
@ -90,7 +143,7 @@ export default function HeaderNews() {
</div>
<div className=' border-5 border-blue-950 rounded-bl-lg rounded-br-lg'>
<img src="/gprfooter.png" alt="gpr" className='w-full' />
</div>
</div> */}
</div>
</div>
)

150
components/Landing Page/MediaSocial.tsx
View File

@ -1,8 +1,15 @@
import { Card, CardBody } from '@nextui-org/react'
import React from 'react'
import { ChevronRightIcon, DotsIcon, FbIcon, IconX, IgIcon, TtIcon, TwitterIcon, YtIcon } from '../icons'
import { useEffect, useState } from 'react';
import { ChevronRightIcon, DotsIcon, FbIcon, IgIcon, TtIcon, TwitterIcon, YtIcon } from '../icons';
import { ScrollShadow } from '@nextui-org/react';
import { Tweet } from 'react-tweet';
import Link from 'next/link';
import YoutubePages from '../SocialMedia/Youtube';
import YoutubeWidget from '../SocialMedia/Youtube';
import InstagramWidget from '../SocialMedia/Instagram';
import TiktokWidget from '../SocialMedia/Tiktok';
export default function MediaSocial() {
// const [limitedData, setLimitedData] = useState<any>([]);
const dummyData = [
{
@ -38,32 +45,48 @@ export default function MediaSocial() {
"Pada pembukaan KTT ke-43 ASEAN, Presiden RI, H. Joko Widodo menegaskan bahwa kesatuan ASEAN sampai saat ini masih terjaga dan terpelihara dengan baik.",
imageUrl: "/headernews.png",
},
{
id: 4,
logo: "/logohumas.png",
division: "Divisi Humas Polri",
username: "@DivHumas_Polri",
followIcon: "/temp/iconX.svg",
description:
"Pada pembukaan KTT ke-43 ASEAN, Presiden RI, H. Joko Widodo menegaskan bahwa kesatuan ASEAN sampai saat ini masih terjaga dan terpelihara dengan baik.",
imageUrl: "/headernews.png",
},
{
id: 4,
logo: "/logohumas.png",
division: "Divisi Humas Polri",
username: "@DivHumas_Polri",
followIcon: "/temp/iconX.svg",
description:
"Pada pembukaan KTT ke-43 ASEAN, Presiden RI, H. Joko Widodo menegaskan bahwa kesatuan ASEAN sampai saat ini masih terjaga dan terpelihara dengan baik.",
imageUrl: "/headernews.png",
},
// {
// id: 4,
// logo: "/logohumas.png",
// division: "Divisi Humas Polri",
// username: "@DivHumas_Polri",
// followIcon: "/temp/iconX.svg",
// description:
// "Pada pembukaan KTT ke-43 ASEAN, Presiden RI, H. Joko Widodo menegaskan bahwa kesatuan ASEAN sampai saat ini masih terjaga dan terpelihara dengan baik.",
// imageUrl: "/headernews.png",
// },
// {
// id: 4,
// logo: "/logohumas.png",
// division: "Divisi Humas Polri",
// username: "@DivHumas_Polri",
// followIcon: "/temp/iconX.svg",
// description:
// "Pada pembukaan KTT ke-43 ASEAN, Presiden RI, H. Joko Widodo menegaskan bahwa kesatuan ASEAN sampai saat ini masih terjaga dan terpelihara dengan baik.",
// imageUrl: "/headernews.png",
// },
];
const limitedData = dummyData.slice(0, 3);
// useEffect(() => {
// function updateLimitedData() {
// if (window.matchMedia("(max-width: 767px)").matches) {
// setLimitedData(dummyData.slice(0, 1));
// } else if (window.matchMedia("(min-width: 768px) and (max-width: 1023px)").matches) {
// setLimitedData(dummyData.slice(0, 2));
// } else {
// setLimitedData(dummyData.slice(0, 3));
// }
// }
// updateLimitedData();
// window.addEventListener('resize', updateLimitedData);
// return () => {
// window.removeEventListener('resize', updateLimitedData);
// };
// }, [dummyData]);
return (
<div className='m-auto md:m-10 space-y-5 md:space-y-10'>
<div className='space-y-5 md:space-y-7'>
<p className='text-2xl font- underline underline-offset-8 decoration-red-700'>MediaSocial</p>
<div>
<div className='flex items-center justify-between pb-3'>
@ -73,14 +96,23 @@ export default function MediaSocial() {
</div>
<div className='text-xs text-[#DD8306] flex items-center'>Lihat Semua <ChevronRightIcon /></div>
</div>
<div className='md:flex flex-wrap gap-4 justify-center'>
{limitedData.map((data) => (
<div className='md:flex flex-wrap gap-2 justify-center'>
<ScrollShadow hideScrollBar className="w-[330px] h-[420px]" size={0}>
{/* <MyEmbedSocialHashtag /> */}
</ScrollShadow>
<ScrollShadow className="w-[320px] h-[420px]" size={0}>
<Tweet id="1756863073208664575" />
</ScrollShadow>
<ScrollShadow className="w-[320px] h-[420px]" size={0}>
<Tweet id="1756861280445775877" />
</ScrollShadow>
{/* {dummyData.map((data: any) => (
<div
key={data.id}
className='bg-white text-black h-[400px] w-auto md:w-[315px] border-2 rounded-md px-5 py-3'
className='bg-white text-black h-[2] w-auto md:w-[315px] border-2 rounded-md px-5 py-3'
>
<div className='h-[20%] flex items-center text-xs justify-between'>
<div className='flex gap-2'>
<div className='flex gap-2'2
<div className='h-[50px]'>
<img src={data.logo} alt="logo" className='h-[50px]' />
</div>
@ -104,7 +136,7 @@ export default function MediaSocial() {
</div>
</div>
</div>
))}
))} */}
</div>
</div>
<div>
@ -113,10 +145,11 @@ export default function MediaSocial() {
<IgIcon height={50} color='#1DA1F2' />
<p className='pl-2'>Instagram</p>
</div>
<div className='text-xs text-[#DD8306] flex items-center'>Lihat Semua <ChevronRightIcon /></div>
<div className='text-xs text-[#DD8306]'><Link href='https://www.instagram.com/divisihumaspolri/' className='flex items-center'>Lihat Semua <ChevronRightIcon /></Link> </div>
</div>
<div className='md:flex flex-wrap gap-4 justify-center'>
{limitedData.map((data) => (
<div className=''>
<InstagramWidget />
{/* {dummyData.map((data: any) => (
<div
key={data.id}
className='bg-white text-black h-[400px] w-auto md:w-[315px] border-2 rounded-md px-5 py-3'
@ -146,7 +179,7 @@ export default function MediaSocial() {
</div>
</div>
</div>
))}
))} */}
</div>
</div>
<div>
@ -158,7 +191,7 @@ export default function MediaSocial() {
<div className='text-xs text-[#DD8306] flex items-center'>Lihat Semua <ChevronRightIcon /></div>
</div>
<div className='md:flex flex-wrap gap-4 justify-center'>
{limitedData.map((data) => (
{dummyData.map((data: any) => (
<div
key={data.id}
className='bg-white text-black h-[400px] w-auto md:w-[315px] border-2 rounded-md px-5 py-3'
@ -198,35 +231,7 @@ export default function MediaSocial() {
<div className='text-xs text-[#DD8306] flex items-center'>Lihat Semua <ChevronRightIcon /></div>
</div>
<div className='md:flex flex-wrap gap-4 justify-center'>
{limitedData.map((data) => (
<div
key={data.id}
className='bg-white text-black h-[400px] w-auto md:w-[315px] border-2 rounded-md px-5 py-3'
>
<div className='h-[20%] flex items-center text-xs justify-between'>
<div className='flex gap-2'>
<div className='h-[50px]'>
<img src={data.logo} alt="logo" className='h-[50px]' />
</div>
<div className='flex flex-col gap-1 justify-center'>
<p className='flex gap-1'>{data.division} <img src={data.type} alt="" /></p>
</div>
</div>
<div className=''>
<div className='flex gap-1 text-blue-500'><img src="/temp/share.svg" alt="" />Share</div>
</div>
</div>
<div className='h-[35%] text-xs'>
{data.description}
<a className='text-blue-500'><br />Lihat Selengkapnya</a>
</div>
<div className='h-[45%]'>
<div className='flex justify-center'>
<img src={data.imageUrl} alt="header" className='h-[165px]' />
</div>
</div>
</div>
))}
<TiktokWidget />
</div>
</div>
<div>
@ -235,10 +240,13 @@ export default function MediaSocial() {
<YtIcon color='#1DA1F2' />
Youtube
</div>
<div className='text-xs text-[#DD8306] flex items-center'>Lihat Semua <ChevronRightIcon /></div>
<div className='text-xs text-[#DD8306]'><Link href='https://www.youtube.com/channel/UCPiCGqy-07vQJUySV5Gs-kA' className='flex items-center' target='_blank'> Lihat Semua <ChevronRightIcon /></Link></div>
</div>
<div className='md:flex flex-wrap gap-4 justify-center'>
{limitedData.map((data) => (
<div className=''>
<div className=' rounded-md '>
<YoutubeWidget />
</div>
{/* {dummyData.map((data: any) => (
<div
key={data.id}
className='bg-white text-black h-[400px] w-auto md:w-[315px] border-2 rounded-md px-5 py-3'
@ -250,12 +258,12 @@ export default function MediaSocial() {
</div>
<div className='flex flex-col gap-1 justify-center'>
<p className='flex gap-1'>{data.division} <img src={data.type} alt="" /></p>
{/* <p className='text-blue-500'>{data.username}</p> */}
</div>
</div>
<div className='space-y-1 flex flex-col items-end'>
<div><DotsIcon /></div>
{/* <p className='text-blue-500 font-bold'>Follow</p> */}
</div>
</div>
<div className='h-[35%] text-xs'>
@ -268,9 +276,9 @@ export default function MediaSocial() {
</div>
</div>
</div>
))}
))} */}
</div>
</div>
</div>
</div >
)
}

28
components/Landing Page/RegionalNews.tsx
View File

@ -1,8 +1,11 @@
import { Button } from '@nextui-org/button';
import { Image } from '@nextui-org/react';
import { ChevronLeftWhite, ChevronRightWhite } from '../icons';
import { useEffect, useState } from 'react';
export default function RegionalNews() {
const [limitedData, setLimitedData] = useState<any>([]);
const list = [
{
img: "/temp/poldametro.svg",
@ -25,13 +28,32 @@ export default function RegionalNews() {
title: "Polda Jawa Timur"
},
];
// 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 md:h-[338px] space-y-7 m-auto md:m-10 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-center'>
<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 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5">
{list.map((item, index) => (
<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"

12
components/Landing Page/SidebarNav.tsx
View File

@ -54,34 +54,34 @@ export default function SidebarNav() {
</div>
</div>
<div className='text-xl font-semibold underline underline-offset-4 decoration-red-600 pb-5'>Info Eksternal</div>
<div className='flex flex-col space-y-4'>
<div className='bg-white text-black text-sm border-2 rounded-md m-5 md:m-0 w-auto lg:w-[300px] p-4 shadow-md'>
<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='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='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 m-5 md:m-0 w-auto lg:w-[300px] p-4 shadow-md'>
<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='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='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 m-5 md:m-0 w-auto lg:w-[300px] p-4 shadow-md'>
<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='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='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 m-5 md:m-0 w-auto lg:w-[300px] p-4 shadow-md'>
<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='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 m-5 md:m-0 w-auto lg:w-[300px] p-4 shadow-md'>
<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='text-xs text-gray-500 pt-1'>Info dan Berita terbaru dari Komnas Perempuan Indonesia</p>

2
components/Portal PPID/PpidMain.tsx
View File

@ -5,7 +5,7 @@ import LatestNews from './LatestNews'
export default function PPIDbody() {
return (
<div className='md:flex px-2 md:px-4 lg:px-6 border-2 border-red-600'>
<div className='md:flex px-2 md:px-4 lg:px-6'>
<div className='w-auto bg-[#E2E2E2] md:w-[70%]'>
<PublicInformation />
<LatestNews />

33
components/SocialMedia/GprKominfo.tsx Normal file
View File

@ -0,0 +1,33 @@
import { useEffect } from 'react';
const GPRKominfo = () => {
useEffect(() => {
if (typeof window !== 'undefined') {
const script = document.createElement('script');
script.src = "https://widget.kominfo.go.id/gpr-widget-kominfo.min.js";
script.async = true;
document.head.appendChild(script);
return () => {
document.head.removeChild(script);
};
}
}, []);
return (
<>
<div id="gpr-kominfo-widget-header" className=''></div>
<div id="gpr-kominfo-widget-body"></div>
<div id="gpr-kominfo-widget-footer"></div>
</>
);
};
export default GPRKominfo;

29
components/SocialMedia/Instagram.tsx Normal file
View File

@ -0,0 +1,29 @@
import { useEffect } from 'react';
const InstagramWidget = () => {
useEffect(() => {
if (typeof window !== 'undefined') {
const script = document.createElement('script');
script.src = "https://embedsocial.com/cdn/ht.js";
script.async = true;
document.head.appendChild(script);
return () => {
document.head.removeChild(script);
};
}
}, []);
return (
<div className="embedsocial-hashtag rounded-md" data-ref="546492f9901c893c2495edfa29649697fc0addd8"></div>
);
};
export default InstagramWidget;

29
components/SocialMedia/Tiktok.tsx Normal file
View File

@ -0,0 +1,29 @@
import { useEffect } from 'react';
const TiktokWidget = () => {
useEffect(() => {
if (typeof window !== 'undefined') {
const script = document.createElement('script');
script.src = "https://embedsocial.com/cdn/ht.js";
script.async = true;
document.head.appendChild(script);
return () => {
document.head.removeChild(script);
};
}
}, []);
return (
<div className="embedsocial-hashtag rounded-md" data-ref="ad29d80894ddd211d09a0c63c53c97d29ff66359"></div>
);
};
export default TiktokWidget;

29
components/SocialMedia/Youtube.tsx Normal file
View File

@ -0,0 +1,29 @@
import { useEffect } from 'react';
const YoutubeWidget = () => {
useEffect(() => {
if (typeof window !== 'undefined') {
const script = document.createElement('script');
script.src = "https://embedsocial.com/cdn/ht.js";
script.async = true;
document.head.appendChild(script);
return () => {
document.head.removeChild(script);
};
}
}, []);
return (
<div className="embedsocial-hashtag rounded-md" data-ref="7ad1e18598045d000abbf6de3479b1bbd5502583"></div>
);
};
export default YoutubeWidget;

32
components/detail/About.tsx Normal file
View File

@ -0,0 +1,32 @@
import React from 'react'
export default function About() {
return (
<div className='bg-white text-black p-5'>
<div className='flex justify-center items-center'>
<div className='pt-4 hidden md:block'><img src="/al.png" alt="" className='' /></div>
<div className='font-bold text-lg md:text-2xl text-[#DD8306] pl-3'>LAYANAN INFORMASI PUBLIK</div>
<div className='hidden md:block absolute pb-10 pl-[500px]'><img src="spark.png" alt="" /></div>
</div>
<div className='p-1 md:p-3 lg:p-5 bg-[#FFF6E9] mx-1 md:mx-3 lg:mx-10 my-4 leading-7'>
Berdasarkan <b>Undang-Undang No.14 Tahun 2008 tentang Keterbukaan Informasi Publik</b> dan <b>Peraturan Komisi Informasi (PERKI) No. I Tahun 2021, Bab I Ketentuan Umum, Pasal 1 ayat 9</b>, menyatakan bahwa Pejabat Pengelola Informasi dan Dokumentasi yang selanjutnya disebut PPID adalah pejabat yang bertanggung jawab di bidang penyimpanan, pendokumentasian, penyediaan, dan/atau pelayanan Informasi di Badan Publik.
<br /> Dengan keberadaan PPID maka masyarakat yang akan menyampaikan permohonan informasi lebih mudah dan tidak berbelit karena dilayani lewat satu pintu. Salah satu elemen penting dalam mewujudkan penyelenggaraan negara yang terbuka adalah hak publik untuk memperoleh Informasi sesuai dengan peraturan perundang-undangan. Hak atas Informasi menjadi sangat penting karena makin terbuka penyelenggaraan negara untuk diawasi publik, penyelenggaraan negara tersebut makin dapat dipertanggungjawabkan. Hak setiap Orang untuk memperoleh Informasi juga relevan untuk meningkatkan kualitas pelibatan masyarakat dalam proses pengambilan keputusan publik. Partisipasi atau pelibatan masyarakat tidak banyak berarti tanpa jaminan keterbukaan Informasi Publik.<br />
Keberadaan Undang-undang tentang Keterbukaan Informasi Publik sangat penting sebagai landasan hukum yang berkaitan dengan :<br />
(1) hak setiap Orang untuk memperoleh Informasi<br />
(2) kewajiban Badan Publik menyediakan dan melayani permintaan Informasi secara cepat, tepat waktu, biaya ringan/proporsional, dan cara sederhana<br />
(3) pengecualian bersifat ketat dan terbatas<br />
(4) kewajiban Badan Publik untuk membenahi sistem dokumentasi dan pelayanan Informasi.<br />
Setiap Badan Publik mempunyai kewajiban untuk membuka akses atas Informasi Publik yang berkaitan dengan Badan Publik tersebut untuk masyarakat luas. Lingkup Badan Publik dalam Undang-undang ini meliputi lembaga eksekutif, yudikatif, legislatif, serta penyelenggara negara lainnya yang mendapatkan dana dari Anggaran Pendapatan dan Belanja Negara (APBN)/Anggaran Pendapatan dan Belanja Daerah (APBD) dan mencakup pula organisasi nonpemerintah, baik yang berbadan hukum maupun yang tidak berbadan hukum, seperti lembaga swadaya masyarakat, perkumpulan, serta organisasi lainnya yang mengelola atau menggunakan dana yang sebagian atau seluruhnya bersumber dari APBN/APBD, sumbangan masyarakat, dan/atau luar negeri.<br />
Dalam rangka memberikan layanan informasi publik sebagaimana diamanatkan dalam Undang-Undang Nomor 14 Tahun 2008 tersebut, Kepolisian Negara Republik Indonesia (Polri) pada Tahun 2010 telah membentuk Pejabat Pengelola Informasi dan Dokumentasi (PPID).<br />
Sebagai tindak lanjut dari pembentukan PPID tersebut, Kepolisian Negara Republik Indonesia telah mengeluarkan beberapa regulasi terkait PPID POLRI, yaitu :<br />
<li className='indent-2'> Peraturan Kepala Kepolisian Negara Republik Indonesia Nomor 24 Tahun 2011 Tentang Perubahan Atas Peraturan Kepala Kepolisian Negara Republik Indonesia Nomor 16 Tahun 2010 Tentang Tata Cara Pelayanan Informasi Publik Di Lingkungan Kepolisian Negara Republik Indonesia;</li>
<li className='indent-2'> Peraturan Kepala Divisi Hubungan Masyarakat Kepolisian Negara Republik Indonesia Nomor 1 Tahun 2013 Tentang Mekanisme Pengajuan Konsekuensi Terhadap Informasi Yang Dikecualikan Untuk Dipublikasikan.</li>
<b> Berdasarkan regulasi-regulasi tersebut telah ditetapkan hal-hal sebagai berikut:</b> <br />
1. PID Mabes Polri sebagaimana dimaksud dalam (Per-Kapolri Nomor 24 Tahun 2011 Pasal 16 huruf a) dijabat oleh Kepala Biro Pengelola Informasi dan Dokumentasi Divisi Hubungan Masyarakat Polri dan pengemban pejabat PID pada Satker – Satker di lingkungan Mabes Polri secara ex-officio dijabat oleh pengemban fungsi informasi/data dengan keputusan Kasatker masing-masing. <br />
2. PID pada Polda sebagaimana dimaksud dalam (Per-Kapolri Nomor 24 Tahun 2011 Pasal 16 huruf b angka 1), dijabat oleh Kepala Bidang Humas Kepolisian Daerah dan pengemban Pejabat PID pada Satker-Satker di lingkungan PokJa secara ex-officio dijabat oleh pengemban fungsi informasi/data dengan keputusan Kepala Kepolisian Daerah. <br />
3. PID pada tingkat Polres sebagaimana dimaksud dalam (Per-Kapolri Nomor 24 Tahun 2011 Pasal 16 huruf b angka 2), berada pada Kepala Subbagian Humas Bagian Operasi Kepolisian Resort. <br />
4. PID pada tingkat Polsek sebagaimana dimaksud dalam (Per-Kapolri Nomor 24 Tahun 2011 Pasal 16 huruf b angka 3) berada pada Kepala Seksi Humas Kepolisian Sektor. Dalam hal Polsek belum memiliki pejabat Kasihumas, jabatan PID diemban oleh Kepala Polisi Sektor.
</div>
</div>
)
}

19
components/detail/Comment.tsx Normal file
View File

@ -0,0 +1,19 @@
import { Button } from '@nextui-org/button'
import { Textarea } from '@nextui-org/input'
import React from 'react'
export default function Comment() {
return (
<div className='p-1 md:p-3 lg:p-10 space-y-2 md:spacey-3 lg:space-y-5'>
<div><b>Berikan Komentar</b> &#40;0 Komentar&#41;</div>
<Textarea
variant='bordered'
placeholder="Masukkan Komentar Anda di sini.."
className=""
/>
<Button className='bg-[#DD8306]'>
Kirim
</Button>
</div>
)
}

217
components/detail/Contact.tsx Normal file
View File

@ -0,0 +1,217 @@
'use client'
import { zodResolver } from "@hookform/resolvers/zod";
import { Button } from '@nextui-org/button';
import { Input, Textarea } from '@nextui-org/input';
import { Select, SelectItem, SelectSection } from '@nextui-org/react';
import React, { useState } from 'react';
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";
const schema = z.object({
name: z.string().min(3).max(50),
email: z.string().email(),
});
interface FormData {
name: string;
email: string;
}
const Contact: React.FC = () => {
const [isVisible, setIsVisible] = React.useState(false);
const [selectedGender, setSelectedGender] = React.useState('');
const [startDateValue, setStartDateValue] = useState({
startDate: null,
endDate: null,
});
const toggleVisibility = () => setIsVisible(!isVisible);
const { register, handleSubmit, formState: { errors } } = useForm<FormData>({
resolver: zodResolver(schema),
});
const onChangeGender = (selectedItem: any) => {
setSelectedGender(selectedItem);
// Lakukan apa pun yang perlu dilakukan saat pilihan jenis kelamin berubah di sini
console.log("Selected Gender:", selectedItem);
};
const handleValueChange = (newValue: any, num: any) => {
console.log("start:", newValue);
setStartDateValue(newValue);
}
const onSubmit = (data: FormData) => {
console.log(data);
};
return (
// <form onSubmit={handleSubmit(onSubmit)}>
// <div>
// <label htmlFor="name">Name:</label>
// <input {...register('name')} id="name" />
// {errors.name && <p>{errors.name.message}</p>}
// </div>
// <div>
// <label htmlFor="email">Email:</label>
// <input {...register('email')} id="email" />
// {errors.email && <p>{errors.email.message}</p>}
// </div>
// <button type="submit">Submit</button>
// </form>
<div className=" bg-white text-black pb-5 md:pb-20">
<p className="text-center text-md md:text-2xl text-[#DD8306] font-bold my-2 md:my-5 lg:my-10">Kontak Kami</p>
<div className="lg:flex px-1 lg:px-10">
<div className="w-auto lg:w-1/3 bg-[#1F1A17] text-center text-white px-1 lg:px-5 py-5 rounded-lg text-sm space-y-3">
<div className="text-lg font-semibold">Informasi Kontak</div>
<div className="font-extralight">Berikut informasi lengkap terkait Divisi Humas Polri</div>
<div className="text-left pl-0 lg:pl-10 space-y-4">
<div className="flex items-center gap-3">
<div><Hotline /></div>
<div>Hotline Divisi HumasPolri (021) 72120599</div>
</div>
<div className="flex items-center gap-3">
<div><Hotline /></div>
<div>Hotline Divisi HumasPolri (021) 72120599</div>
</div>
<div className="flex items-center gap-3">
<div><CustomerService /></div>
<div>Call Center 110</div>
</div>
<div className="flex items-center gap-3">
<div><Mail /></div>
<div>ppid@polri.go.id</div>
</div>
<div className="flex items-center text-lefts gap-3">
<div><Location /></div>
<div>Jl Trunojoyo No.3, RT.2/RW.1, Selong, Kec. Kebayoran Baru, Kota Jakarta Selatan, Daerah Khusus Ibukota Jakarta 12110, Indonesia</div>
</div>
<div className="flex items-center gap-3">
<div><Calender /></div>
<div>Hari Senin - Jumat | 08:00 - 15:00 WIB</div>
</div>
</div>
<div className="border-2 border-red-600 flex justify-center">
<img 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">
<div className="text-sm md:text-xl font-bold">Silahkan tuliskan pertanyaan anda kepada kami</div>
<div>
<Input
classNames={{
input: ["w-full", "bg-transparent", "!text-black"],
mainWrapper: ["w-full", "bg-transparent"],
innerWrapper: ["bg-transparent"],
label: ["!text-black", "font-semibold"],
inputWrapper: [
"bg-transparent",
"dark:bg-transparent",
"hover:bg-transparent",
"dark:hover:bg-transparent",
"group-data-[focused=true]:bg-transparent",
"dark:group-data-[focused=true]:bg-transaparent",
"group-data-[focused=false]:bg-transparent",
"focus-within:!bg-transparent",
],
}}
isRequired
type="text"
label="Nama"
placeholder="Masukkan username anda!"
variant='underlined'
/>
</div>
<div>
<Input
classNames={{
input: ["w-full", "bg-transparent", "!text-black"],
mainWrapper: ["w-full", "bg-transparent"],
innerWrapper: ["bg-transparent"],
label: ["!text-black", "font-semibold"],
inputWrapper: [
"bg-transparent",
"dark:bg-transparent",
"hover:bg-transparent",
"dark:hover:bg-transparent",
"group-data-[focused=true]:bg-transparent",
"dark:group-data-[focused=true]:bg-transaparent",
"group-data-[focused=false]:bg-transparent",
"focus-within:!bg-transparent",
],
}}
isRequired
type="text"
label="Email"
placeholder="Masukkan email anda!"
variant='underlined'
/>
</div>
<div>
<Input
classNames={{
input: ["w-full", "bg-transparent", "!text-black"],
mainWrapper: ["w-full", "bg-transparent"],
innerWrapper: ["bg-transparent"],
label: ["!text-black", "font-semibold"],
inputWrapper: [
"bg-transparent",
"dark:bg-transparent",
"hover:bg-transparent",
"dark:hover:bg-transparent",
"group-data-[focused=true]:bg-transparent",
"dark:group-data-[focused=true]:bg-transaparent",
"group-data-[focused=false]:bg-transparent",
"focus-within:!bg-transparent",
],
}}
isRequired
type="text"
label="Judul"
placeholder="Masukkan judul pertanyaan anda!"
variant='underlined'
/>
</div>
<div>
<Input
classNames={{
input: ["w-full", "bg-transparent", "!text-black"],
mainWrapper: ["w-full", "bg-transparent"],
innerWrapper: ["bg-transparent"],
label: ["!text-black", "font-semibold"],
inputWrapper: [
"bg-transparent",
"dark:bg-transparent",
"hover:bg-transparent",
"dark:hover:bg-transparent",
"group-data-[focused=true]:bg-transparent",
"dark:group-data-[focused=true]:bg-transaparent",
"group-data-[focused=false]:bg-transparent",
"focus-within:!bg-transparent",
],
}}
isRequired
type="text"
label="Pesan"
placeholder="Pesan anda..."
variant='underlined'
/>
</div>
<div className="hidden lg:block absolute -top-28 right-28">
<img 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" />
</div>
</div>
</div>
</div>
);
};
export default Contact;

29
components/detail/DetailPage.tsx Normal file
View File

@ -0,0 +1,29 @@
import React from 'react'
import DetailNews from '../page/DetailNews'
import Comment from './Comment'
import SidebarDetail from '../page/SidebarDetail'
import RelatedNews from '../page/RelatedNews'
export default function DetailPage() {
return (
<>
<div className='text-black md:flex'>
<div className='w-auto md:w-[75%]'>
<DetailNews />
</div>
<div className='w-auto md:w-[25%] hidden md:block'>
<SidebarDetail />
</div>
</div>
<div className='bg-[#eeeeee] text-black h-auto my-2 md:my-5 lg:my-10'>
<Comment />
</div>
<div>
<RelatedNews />
</div>
<div className='md:hidden text-black'>
<SidebarDetail />
</div>
</>
)
}

155
components/detail/Propim.tsx Normal file
View File

@ -0,0 +1,155 @@
'use client'
import { Card, CardBody, Tab, Tabs } from '@nextui-org/react'
import React from 'react'
export default function Task() {
return (
<div className='bg-white text-black p-1 md:p-5'>
<div className='flex justify-center items-center'>
<div className='pt-4 hidden md:block'><img src="/al.png" alt="" className='' /></div>
<div className='font-bold text-lg md:text-2xl text-[#DD8306] pl-3'>Tugas & Fungsi</div>
<div className='hidden md:block absolute pb-10 pl-[310px]'><img src="spark.png" alt="" /></div>
</div>
<div className='p-1 md:p-3 lg:p-5 bg-[#FFF6E9] my-4 flex flex-col items-center'>
<Tabs aria-label="Options" color='warning'>
<Tab key="kapolri" title="Profile Kapolri">
<div className='md:flex'>
<div className='w-auto md:w-[30%] text-xs md:text-sm space-y-2'>
<img src="/kapolri.png" alt="kapolri" />
<p className='font-extrabold'>JENDERAL POLISI DRS. LISTYO SIGIT PRABOWO, M.SI</p>
<p className='font-semibold'>KEPALA KEPOLISIAN NEGARA REPUBLIK INDONESIA</p>
</div>
<div className='w-auto md:w-[70%] text-sm leading-tight space-y-2 px-2'>
<p className='text-lg'><b>Profil Singkat</b></p>
<p>
Jenderal Polisi Drs. Listyo Sigit Prabowo, M.Si. adalah seorang perwira tinggi Polri yang saat ini menjabat sebagai
Kepala Kepolisian Negara Republik Indonesia.
</p>
<p>
Jenderal Listyo Sigit Prabowo adalah pria kelahiran Ambon, Maluku pada 5 Mei 1969. Sebelum akhirnya dipilih sebagai
calon Kapolri tunggal oleh Presiden Jokowi, alumni Akademi Kepolisian (Akpol) 1991 itu telah melewati banyak
penugasan. Jenderal Listyo Sigit Prabowo telah menorehkan banyak prestasi di Institusi Kepolisian, salah satunya adalah
kasus yang pernah dibongkar sebagai Kabareskrim Polri yaitu penangkapan terpidana kasus Bank Bali Djoko Tjandra yang telah buron selama 11 tahun. Kasus besar lainnya yang ditangani Jenderal Listyo Sigit dan jajarannya adalah kebakaran Gedung
Kejaksaan Agung (Kejagung). Penyidik Bareskrim telah menetapkan 11 orang sebagai tersangka.
</p>
<p>
Jenderal Listyo Sigit Prabowo pernah menjabat sebagai Kapolresta Solo pada tahun 2011 menggantikan
Irjen. Pol. Drs. Nana Sujana, M.M yang saat itu berpangkat Komisaris Besar Polisi. Selanjutnya pada tahun 2012 Jenderal
Listyo Sigit Prabowo mengemban tugas sebagai Kepala Sub Direktorat II Direktorat Tindak Pidana Umum Bareskrim Polri.
</p>
<p>
Pada Tahun 2014, Jenderal Listyo Sigit Prabowo pernah mengawal Jokowi dan menjadi Ajudan Presiden hingga 2016.
Usai menjadi ajudan presiden, karier Jenderal Listyo Sigit Prabowo terus naik dengan menjadi Kepala Kepolisian Daerah
Banten pada tahun 2016 dan Kadiv Propam Polri pada tahun 2018 2019.
</p>
<p>
Setelah itu, pada tanggal 6 Desember 2019 Jenderal Listyo Sigit Prabowo mulai menjabat sebagai Kepala Badan Reserse
Kriminal Polri (Kabareskrim) menggantikan Jenderal Polisi (Purn.) Drs. Idham Azis, M.Si. yang dilantik oleh Presiden Joko
Widodo sebagai Kepala Kepolisian Negara Indonesia ( Kapolri ).
</p>
<p>
Hingga tanggal 13 Januari 2021, Presiden Joko Widodo mengusulkan nama Listyo Sigit Prabowo kepada DPR-RI sebagai
calon tunggal Kapolri untuk menggantikan Idham Aziz. Komisi III DPR-RI yang dipimpin oleh Herman Hery menggelar uji
kepatutan dan kelayakan (fit and proper test) terhadap Listyo Sigit. Rapat pleno Komisi III memutuskan bahwa mereka
menyetujui pencalonan Listyo Sigit secara aklamasi. Keputusan ini disahkan oleh Puan Maharani selaku Ketua DPR-RI
dalam sidang paripurna yang digelar sehari setelahnya. Presiden Jokowi resmi melantik Listyo Sigit Prabowo sebagai
Kapolri pada tanggal 27 Januari 2021.
</p>
<p ><b>Riwayat Pendidikan Kepolisian</b></p>
<p className='indent-2'>
<li>AKPOL (1991)</li>
<li>PTIK (1998)</li>
<li>SESPIM (2006)</li>
<li>S2 STIK PTIK (2008)</li>
<li>LEMHANAS (2017)</li>
</p>
<p><b>Riwayat Jabatan</b></p>
<p className='indent-2'>
<li>Kapolres Pati Polda Jateng (2009)</li>
<li>Wakapolrestabes Semarang Polda Jateng (2010)</li>
<li>Kapolresta Surakarta Polda Jateng (2011)</li>
<li> Kasubdit II Dit Tipidum Bareskrim Polri (2012)</li>
<li>Direskrimum Polda Sulawesi Tenggara (2013)</li>
<li> Pamen SSDM Polri ( Penugasan Pada Setmilpres Sebagai Ajudan Presiden RI ) (2014)</li>
<li> Kapolda Banten (2016)</li>
<li>Kadiv Propam Polri (2018)</li>
<li>Kabareskrim Polri (2019)</li>
<li>Kapolri (2021)</li>
</p>
<p><b>Tanda Jasa/ Penghargaan</b></p>
<p className='indent-2'>
<li>SL Pengabdian 8 Tahun (2000)</li>
<li>SL Dwidya Sistha (2002)</li>
<li>SL Dhrama Nusa (2007)</li>
<li>SL Pengabdian 16 Tahun (2012)</li>
<li> SL Pengabdian 24 Tahun (2015)</li>
<li>Bintang Bhayangkara Nararaya (2016)</li>
<li>SL Ops Kepolisian (2019)</li>
<li> Bintang Bhayangkara Pratama (2019)</li>
<li> SL Karya Bhakti (2020)</li>
<li> SL Jana Utama (2020)</li>
<li> SL Bhakti Buana (2020)</li>
<li> Bintang Bhayangkara Utama (2021)</li>
</p>
</div>
</div>
</Tab>
<Tab key="kadiv-humas" title="Kepala Divisi Humas Polri">
<div className='md:flex'>
<div className='w-auto md:w-[30%] text-xs md:text-sm space-y-2'>
<img src="/kadiv-humas.png" alt="kapolri" />
<p className='font-extrabold'>IRJEN. POL. DR. SANDI NUGROHO, S.I.K., M.HUM.</p>
<p className='font-semibold'>KEPALA DIVISI HUMAS POLRI</p>
</div>
<div className='w-auto md:w-[70%] text-sm leading-tight space-y-2 px-2'>
<p className='text-lg'><b>Profil Singkat</b></p>
<p>
Irjen. Pol. Dr. Sandi Nugroho, S.IK., SH., M.Hum. adalah seorang perwira tinggi Polri yang sejak 26 Februari 2023 menjabat sebagai Kepala Divisi Humas Polri.
</p>
<p>
Irjen Pol Sandi yang merupakan lulusan terbaik Akpol 1995 ini berpengalaman dalam bidang reserse. Sebelum menjabat Kepala Divisi Humas Polri, jabatan yang diemban adalah Karojianstra SSDM Polri.
</p>
<p ><b>Riwayat Pendidikan Kepolisian</b></p>
<p className='indent-2'>
<li>AKPOL (1995)</li>
<li>PTIK (2002)</li>
<li>SESPIM (2009)</li>
<li>SESPIMTI (2018)</li>
</p>
<p><b>Riwayat Jabatan</b></p>
<p className='indent-2'>
<li>Pama Polda Metro Jaya (1995)</li>
<li>Pamapta Polres Metro Jakarta Pusat (1996)</li>
<li>Kanit Resintel Polsek Kebayoran Baru Polres Jakarta Selatan (1997)</li>
<li>Kanit Jahtanras Polres Metro Jakarta Selatan (1999)</li>
<li>Pama PTIK (2000)</li>
<li>Pama Polda Sumut (2002)</li>
<li>Kapolsek Medan Labuhan Poltabes Medan (2002)</li>
<li>Kapolsek Medan Baru Poltabes Medan (2003)</li>
<li>Kanit II Sat II Ditreskrim Polda Sumut (2004)</li>
<li>Kasat Reskrim Polres Asahan</li>
<li>Kasat Reskrim Polresta Medan</li>
<li>Wakapolres KPPP Belawan (2007)</li>
<li>Pamen Polda Metro Jaya (2009)</li>
<li>Ka Siaga C Pusdalops Ro Ops Polda Metro Jaya (2009)</li>
<li>Kasat I/Indag Ditreskrimsus Polda Metro Jaya (2011)</li>
<li>Kapolres Bandung Polda Jabar (2011)</li>
<li>Koorspri Wakapolri (2012)</li>
<li>Wadirreskrimsus Polda Metro Jaya (2013)</li>
<li>Kasubdit I Dittipidter Bareskrim Polri (2015)</li>
<li>Kasubdit I Dittipideksus Bareskrim Polri (2016)</li>
<li>Kapolrestabes Medan (2016)</li>
<li>Analis Kebijakan Madya Bidang Pideksus Bareskrim Polri (2017)</li>
<li>Kapolrestabes Surabaya (2019)</li>
<li>Penyidik Tindak Pidana Utama Tk. II Bareskrim Polri (2020)</li>
<li>Karojianstra SSDM Polri (2020)</li>
<li>Kadiv Humas Polri (2023) - Sekarang</li>
</p>
</div>
</div>
</Tab>
</Tabs>
</div>
</div>
)
}

78
components/detail/StrukturOrganisasi.tsx Normal file
View File

@ -0,0 +1,78 @@
'use client'
import { Card, CardBody, Tab, Tabs } from '@nextui-org/react'
export default function StrukturOrganisasi() {
return (
<div className='bg-white text-black p-1 md:p-5'>
<div className='flex justify-center items-center'>
<div className='pt-4 hidden md:block'><img src="/al.png" alt="" className='' /></div>
<div className='font-bold text-lg md:text-2xl text-[#DD8306] pl-3'>Struktur Organisasi</div>
<div className='hidden md:block absolute pb-10 pl-[370px]'><img src="spark.png" alt="" /></div>
</div>
<div className='p-1 md:p-3 lg:p-5 bg-[#FFF6E9] mx-1 md:mx-3 lg:mx-10 my-4 flex flex-col md:items-center'>
<Tabs aria-label="Options" color='warning'>
<Tab key="polri" title="Struktur Organisasi Polri">
<div className='space-y-3'>
<div className='text-center text-2xl font-bold'>Struktur Organisasi Polri</div>
<div><b>Konsep Struktur Organisasi Polri</b> <br />
Organisasi Polri disusun secara berjenjang dari tingkat pusat sampai ke kewilayahan. Organisasi Polri tingkat pusat disebut Markas Besar Kepolisian Negara Republik Indonesia (Mabes Polri); sedang organisasi Polri tingkat kewilayahan disebut Kepolisian Negara Republik Indonesia Daerah (Polda) di tingkat provinsi, Kepolisian Negara Republik Indonesia Resort (Polres) di tingkat kabupaten/kota, dan Kepolisian Negara Republik Indonesia Sektor (Polsek) di wilayah kecamatan.</div>
<div className='flex flex-col md:items-center'>
<Tabs aria-label="Options" color='warning' variant='underlined'>
<Tab key="mabes" title="Tingkat Mabes">
<div>
<p><b>Tingkat Mabes</b></p>
<p>
Unsur pimpinan Mabes Polri adalah Kepala Kepolisian Negara Republik Indonesia (Kapolri). Kapolri adalah Pimpinan Polri yang berada di bawah dan bertanggung jawab kepada Presiden. Kapolri berpangkat Jenderal Polisi.</p>
</div>
<div className='px-14 pt-10'>
<img src="mabes.png" alt="struktur" />
</div>
</Tab>
<Tab key="polda" title="Tingkat Polda">
<div>
<p><b>Tingkat Polda</b></p>
<p>
Kepolisian Negara Republik Indonesia Daerah (Polda) merupakan satuan pelaksana utama Kewilayahan yang berada di bawah Kapolri. Polda bertugas menyelenggarakan tugas Polri pada tingkat kewilayahan. Polda dipimpin oleh Kepala Kepolisian Negara Republik Indonesia Daerah (Kapolda), yang bertanggung jawab kepada Kapolri. Kapolda dibantu oleh Wakil Kapolda (Wakapolda).
Polda membawahi Kepolisian Negara Republik Indonesia Resor (Polres). Ada tiga tipe Polda, yakni Tipe A-K, Tipe A dan Tipe B. Polda Tipe A-K atau A+ saat ini hanya terdapat 1 Polda, yaitu Polda Metro Jaya. Polda Tipe A-K dan Tipe A dipimpin seorang perwira tinggi berpangkat Inspektur Jenderal Polisi (Irjen), sedangkan Tipe B dipimpin perwira tinggi berpangkat Brigadir Jenderal Polisi (Brigjen).</p>
</div>
<div className='px-14 pt-10'>
<img src="polda.png" alt="struktur" />
</div>
</Tab>
<Tab key="polres" title="Tingkat Polres">
<div>
<p><b>Tingkat Polres</b></p>
<p>
Polres membawahi Kepolisian Negara Republik Indonesia Sektor. Untuk kota – kota besar, Polres dinamai Kepolisian Resor Kota Besar. Polres memiliki satuan tugas kepolisian yang lengkap, layaknya Polda, dan dipimpin oleh seorang Komisaris Besar Polisi (Kombes) (untuk Polres).
</p>
</div>
<div className='px-14 pt-10'>
<img src="polres.png" alt="struktur" />
</div>
</Tab>
<Tab key="polsek" title="Tingkat Polsek">
<div>
<p><b>Tingkat Polsek</b></p>
<p>
Polsek maupun Polsekta dipimpin oleh seorang Ajun Komisaris Besar Polisi (AKBP) (khusus untuk Polda Metro Jaya) atau Komisaris Polisi (Kompol) (untuk tipe urban), sedangkan di Polda lainnya, Polsek atau Polsekta dipimpin oleh perwira berpangkat Ajun Komisaris Polisi (AKP) (tipe rural). Di sejumlah daerah di Papua sebuah Polsek dapat dipimpin oleh Inspektur Polisi Dua (Irda).
</p>
</div>
<div className='px-14 pt-10'>
<img src="polsek.png" alt="struktur" />
</div>
</Tab>
</Tabs>
</div>
</div>
</Tab>
<Tab key="humas" title="Struktur Organisasi Humas Polri">
<div className='leading-8 md:p-3 text-sm'>
</div>
</Tab>
</Tabs>
</div>
</div>
)
}

69
components/detail/TaskDetail.tsx Normal file
View File

@ -0,0 +1,69 @@
'use client'
import { Card, CardBody, Tab, Tabs } from '@nextui-org/react'
import React from 'react'
export default function Task() {
return (
<div className='bg-white text-black p-1 md:p-5'>
<div className='flex justify-center items-center'>
<div className='pt-4 hidden md:block'><img src="/al.png" alt="" className='' /></div>
<div className='font-bold text-lg md:text-2xl text-[#DD8306] pl-3'>Tugas & Fungsi</div>
<div className='hidden md:block absolute pb-10 pl-[310px]'><img src="spark.png" alt="" /></div>
</div>
<div className='p-1 md:p-3 lg:p-5 bg-[#FFF6E9] mx-1 md:mx-3 lg:mx-10 my-4 flex flex-col items-center'>
<Tabs aria-label="Options" color='warning'>
<Tab key="taskpolri" title="Tugas, Fungsi dan Kewenangan Polri">
<div className=' md:p-3 space-y-1 leading-snug text-sm'>
<p className='text-medium'><b>Tugas, Fungsi dan Kewenangan Polri</b></p>
<p>Peran dan Fungsi Kepolisian Negara Republik Indonesia. Kepolisian dinegara manapun selalu berada dalam sebuah dilema kepentingan kekuasaan yang selalu menjadi garda terdepan perbedaan pendapat antara kekuasaan dengan masyarakatnya. Sistem Kepolisian suatu Negara sangat dipengaruhi oleh Sistem Politik serta control social yang diterapkan. Berdasarkan Penetapan Pemerintah No. 11/S.D Kepolisian beralih status menjadi Jawatan tersendiri dibawah langsung Perdana Menteri. Ketetapan Pemerintah tersebut menjadikan kedudukan Polisi setingkat dengan Departemen dan kedudukan Kepala Kepolisian Negara Republik Indonesia (Kapolri) setingkat dengan Menteri.</p>
<p>Dengan Ketetapan itu, Pemerintah mengharapkan Kepolisian dapat berkembang lebih baik dan merintis hubungan vertikal sampai ketingkat plaing kecil seperti pada wilayah kecamatan kecamatan.</p>
<p>Kedudukan kepolisian dalam sebuah Negara selalu menjadi kepentingan banyak pihak untuk duduk dan berada dibawah kekuasan. Pada masa pemerintahan Orde Baru Kepolisian RI dibenamkan dalam sebuah satuan Angkatan Bersenjata Republik Indonesia (ABRI) yang bergerak dalam pengaruh budaya militer. Militeristik begitu mengikat karena masa lebih dari 30 tahun kepolisian di balut dengan budaya militer tersebut. Tahun 1998 tuntutan masyarakat bgitu kuat dalam upaya membangun sebuah pemerintahan yang bersih dan mempunyai keberpihakan terhadap kepentingan masyarakat.</p>
<p>Maka selanjutnya Tap MPR No.VI/2000 dikeluarkan dan menyatakan bahwa salah satu tuntutan Reformasi dan tantangan masa depan adalah dilakukannya demokratisasi, maka diperlukan reposisi dan restrukturisasi ABRI. Bahwa akibat dari penggabungan terjadi kerancuan dan tumpang tindih peran dan fungsi TNI sebagai kekuatan pertahanan dan Polri sebagai kekuatan Kamtibmas. Maka Polri adalah alat Negara yang berperan dalam memelihara keamanan. Oleh karena itu Polri kembali dibawah Presiden setelah 32 tahun dibawah Menhankam/ Panglima ABRI, Berdasarkan Undang Undang No 2 tahun 2002 tentang Kepolisian Negara Republik Indonesia menyebutkan bahwa (1) Polri merupakan alat Negara yang berperan dalam pemeliharaan kamtibmas, gakkum, serta memberikan perlindungan,pengayoman, dan pelayanan kepada masyarakat dalam rangka terpeliharanya Kamdagri. Karena dalam Bab II Tap MPR No. VII/2000 menyebutkan bahwa: (1) Polri merupakan alat Negara yang berperan dalam memelihara Kamtibmas,, menegakkan hukum, memberikan pengayoman dan pelayanan kepada masyarakat. (2) Dalam menjalankan perannya, Polri wajib memiliki keahlian dan ketrampilan secara professional. Artinya Polri bukan suatu lembaga / badan non departemen tapi di bawah Presiden dan Presiden sebagai Kepala Negara bukan Kepala Pemerintahan.</p>
<p>Dalam pelaksanaan tugas dan fungsi Kepolisian, perlu ditata dahulu rumusan tugas pokok, wewenang Kepolisian RI dalam Undang undang No.2 tahun 2002 tentang Kepolisian Negara Republik Indonesia. Peran dan Fungsi Kepolisian Negara Republik Indonesia</p>
<p><b>1. Fungsi Kepolisian</b></p>
<p>Pasal 2 :" Fungsi Kepolisian adalah salah satu fungsi pemerintahan Negara di bidang pemelihara keamanan dan ketertiban masyarakat, penegak hukum, perlindungan, pengayoman dan pelayanan masyarakat". Sedangkan Pasal 3: "(1) Pengemban fungsi Kepolisian adalah Kepolisian Negara Republik Indonesia yang dibantu oleh : a. kepolisian khusus, b. pegawai negri sipil dan/atau c. bentuk bentuk pengamanan swakarsa. (2) Pengemban fungsi Kepolisian sebagaimana dimaksud dalam ayat (1) huruf a,b, dan c, melaksanakan fungsi Kepolisian sesuai dengan peraturan perundang undangan yang menjadi dasar hukum masing masing.</p>
<p><b>2. Tugas Pokok Kepolisian </b><br />
Pasal 13: Tugas Pokok Kepolisian Negara Rrepublik Indonesia dalam UU No.2 tahun 20002 adalah sebagai berikut: <br />
a. Memelihara keamanan dan ketertiban masyarakat<br />
b. Menegakkan hukum<br />
c. Memberikan perlindungan,pengayoman dan pelayanan kepada masyarakat. ", penjabaran tugas Kepolisian di jelaskan lagi apada Pasal 14 UU Kepolisian RI.</p>
<p><b>3. Kewenangan Kepolisian</b><br />
Pada Pasal 15 dan 16 UU Kepolisian RI adalah perincian mengenai tugas dan wewenang Kepolisian RI, sedangkan Pasal 18 berisi tentang diskresi Kepolisian yang didasarkan kepada Kode Etik Kepolisian.<br />
Sesuai dengan rumusan fungsi, tugas pokok, tugas dan weweang Polri sebagaimana diatur dalam UU No. 2 tahun 2002, maka dapat dikatakan fungsi utama kepolisian meliputi :</p>
<p>
<b> A. Tugas Pembinaan Masyarakat (Pre-emtif)<br /></b>
Segala usaha dan kegiatan pembinaan masyarakat untuk meningkatkan partisipasi masyarakat, kesadaran hukum dan peraturan perundang undangan. Tugas Polri dalam bidang ini adalah Community Policing, dengan melakukan pendekatan kepada masyarakat secara sosial dan hubungan mutualisme, maka akan tercapai tujuan dari community policing tersebut. Namun, konsep dari Community Policing itu sendiri saat ini sudah bias dengan pelaksanaannya di Polres polres. Sebenarnya seperti yang disebutkan diatas, dalam mengadakan perbandingan sistem kepolisian Negara luar, selain harus dilihat dari administrasi pemerintahannya, sistem kepolisian juga terkait dengan karakter sosial masyarakatnya.<br />
Konsep Community Policing sudah ada sesuai karakter dan budaya Indonesia ( Jawa) dengan melakukan sistem keamanan lingkungan ( siskamling) dalam komunitas komunitas desa dan kampong, secara bergantian masyarakat merasa bertangggung jawab atas keamanan wilayahnya masing masing. Hal ini juga ditunjang oleh Kegiatan babinkamtibmas yang setiap saat harus selalu mengawasi daerahnya untuk melaksanakan kegiata kegiatan khusus.<br />
<b> B. Tugas di Bidang Preventif<br /></b>
Segala usaha dan kegiatan di bidang kepolisian preventif untuk memelihara keamanan dan ketertiban masyarakat, memelihara keselematan orang, benda dan barang termasuk memberikan perlindungan dan pertolongan , khususnya mencegah terjadinya pelanggaran hukum. Dalam melaksanakan tugas ini diperlukan kemampuan professional tekhnik tersendiri seperti patrolil, penjagaan pengawalan dan pengaturan.<br />
<b> C. Tugas di Bidang Represif<br /></b>
Di bidang represif terdapat 2 (dua) jenis Peran dan Fungsi Kepolisian Negara Republik Indonesia yaitu represif justisiil dan non justisiil. UU No. 2 tahun 2002 memberi peran Polri untuk melakukan tindakan tindakan represif non Justisiil terkait dengan Pasal 18 ayat 1(1) , yaitu wewenang diskresi kepolisian yang umumnya menyangkut kasus ringan.<br />
KUHAP memberi peran Polri dalam melaksanakan tugas represif justisil dengan menggunakan azas legalitas bersama unsur Criminal Justice sistem lainnya. Tugas ini memuat substansi tentang cara penyidikan dan penyelidikan sesuai dengan hukum acara pidana dan peraturan perundang undangan lainnya. Bila terjadi tindak pidana, penyidik melakukan kegiatan berupa:<br />
<div className='indent-3'>
<p>i. Mencari dan menemukan suatu peristiwa Yang dianggap sebagai tindak pidana.</p>
<p>ii. Menentukan dapat atau tidaknya dilakukan penyidikan.</p>
<p>iii. Mencari serta mengumpulkan bukti.</p>
<p>iv. Membuat terang tindak pidana yang terjadi.</p>
<p>v. Menemukan tersangka pelaku tindak pidana.</p>
</div>
</p>
</div>
</Tab>
<Tab key="taskhumas" title="Tugas dan Fungsi PID Polri">
<div className='leading-8 md:p-3 text-sm'>
<b className='text-medium'>Tugas dan Fungsi PID Polri</b> <br />
Ro PID (Biro PID) merupakan unsur pelaksana utama yang berada di bawah Kadivhumas Polri.<br />
Ro PID bertugas membina, mengumpulkan, mengolah, menyajikan data, informasi dan dokumentasi dalam mendukung pelaksanaan penyampaian informasi baik internal maupun eksternal Polri.<br />
<b className='text-medium'> Dalam melaksanakan tugas, Ro PID menyelenggarakan fungsi:<br /></b>
1. Pengumpulan, pengelolaan dan analisis data, informasi dan/atau dokumentasi yang diperlukan guna penyajian informasi yang akurat dan dapat dipercaya untuk kepentingan internal maupun eksternal Polri.<br />
2. Pengumpulan informasi dan data yang berkaitan dengan kegiatan Polri yang dapat diakses oleh publik. <br />
3. Penyiapan media dan pendistribusian informasi dan dokumentasi secara luas sesuai ketentuan perundang undangan.<br />
4. pengelolaan informasi pengaduan (public complain) yang menyangkut pelayanan, pelindungan, pengayoman dan penegakkan hukum oleh Polri
penyelesaian proses sengketa informasi hingga tuntas.
</div>
</Tab>
</Tabs>
</div>
</div>
)
}

40
components/detail/VisiMisi.tsx Normal file
View File

@ -0,0 +1,40 @@
'use client'
import { Card, CardBody, Tab, Tabs } from '@nextui-org/react'
import React from 'react'
export default function VisiMisi() {
return (
<div className='bg-white text-black p-1 md:p-5'>
<div className='flex justify-center items-center'>
<div className='pt-4 hidden md:block'><img src="/al.png" alt="" className='' /></div>
<div className='font-bold text-lg md:text-2xl text-[#DD8306] pl-3'>Visi & Misi</div>
<div className='hidden md:block absolute pb-10 pl-[250px]'><img src="spark.png" alt="" /></div>
</div>
<div className='p-1 md:p-3 lg:p-5 bg-[#FFF6E9] mx-1 md:mx-3 lg:mx-10 my-4 flex flex-col items-center'>
<Tabs aria-label="Options" color='warning'>
<Tab key="visimisi" title="Visi dan Misi Polri">
<div className='font-bold text-medium md:text-2xl text-left md:text-center '>
Visi dan Misi Polri <br />
I. Visi <br />
Terwujudnya Indonesia yang Aman dan Tertib. <br />
II. Misi <br />
Melindungi, Mengayomi dan Melayani Masyarakat.</div>
</Tab>
<Tab key="humas" title="Visi Misi Humas Polri">
<div className='leading-8 md:p-3'>
<b> Visi dan Misi Humas Polri</b><br />
<b> I. Visi</b><br />
Terwujudnya Postur Humas Polri yang profesional, bermoral dan modern dibidang kehumasan guna membangun objektivitas, kepercayaan dan partisipasi masyarakat.<br />
<b> II. Misi</b><br />
1. Membangun kemampuan kehumasan personil Polri dengan baik SDM, Sarpras, Sismet, anggaran menuju Front Office Polri.<br />
2. Menjalin kerjasama dengan komponen masyarakat dan pelaku komunikasi.<br />
3. Mencari, menghimpun, mengolah, mendistribusikan, menyimpan informasi dan data secara menyeluruh, cepat, tepat dan akurat melalui jaringan terbuka dan mudah dimanfaatkan oleh masyarakat untuk menjalin komunikasi dua arah.<br />
4. Mendukung kegiatan Kepolisian dan operasi Kepolisian.<br />
5. Kesiapan Polri atas kewajiban memberikan pelayanan informasi publik yang sudah diberlakukannya UU KIP, sehingga realisasi Humas Polri sebagai Front Office perlu segera diwujudkan. Karena itu diperlukan dukungan Sumber Daya Manusia, sarana prasaran berbasis TI, sistem dan metoda serta anggaran yang memadai.
</div>
</Tab>
</Tabs>
</div>
</div>
)
}

475
components/form/form-permohonan-informasi.tsx Normal file
View File

@ -0,0 +1,475 @@
'use client'
import { zodResolver } from "@hookform/resolvers/zod";
import { Button } from '@nextui-org/button';
import { Input } from '@nextui-org/input';
import { Select, SelectItem, SelectSection } from '@nextui-org/react';
import React, { useState } from 'react';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { EyeFilledIcon, EyeSlashFilledIcon } from '../icons';
import Datepicker from "react-tailwindcss-datepicker";
const schema = z.object({
name: z.string().min(3).max(50),
email: z.string().email(),
});
interface FormData {
name: string;
email: string;
}
const FormApplication: React.FC = () => {
const [isVisible, setIsVisible] = React.useState(false);
const [selectedGender, setSelectedGender] = React.useState('');
const [startDateValue, setStartDateValue] = useState({
startDate: null,
endDate: null,
});
const toggleVisibility = () => setIsVisible(!isVisible);
const { register, handleSubmit, formState: { errors } } = useForm<FormData>({
resolver: zodResolver(schema),
});
const onChangeGender = (selectedItem: any) => {
setSelectedGender(selectedItem);
// Lakukan apa pun yang perlu dilakukan saat pilihan jenis kelamin berubah di sini
console.log("Selected Gender:", selectedItem);
};
const handleValueChange = (newValue: any, num: any) => {
console.log("start:", newValue);
setStartDateValue(newValue);
}
const onSubmit = (data: FormData) => {
console.log(data);
};
return (
// <form onSubmit={handleSubmit(onSubmit)}>
// <div>
// <label htmlFor="name">Name:</label>
// <input {...register('name')} id="name" />
// {errors.name && <p>{errors.name.message}</p>}
// </div>
// <div>
// <label htmlFor="email">Email:</label>
// <input {...register('email')} id="email" />
// {errors.email && <p>{errors.email.message}</p>}
// </div>
// <button type="submit">Submit</button>
// </form>
<div className=' bg-white text-black py-2 md:py-5 lg:py-10 px-2 md:px-5 lg:px-16 space-y-2 md:space-y-5'>
<div className='text-xl font-bold'>Form Register Permohonan</div>
<div>
<Input
classNames={{
input: ["w-full", "bg-transparent", "!text-black"],
mainWrapper: ["w-full", "bg-transparent"],
innerWrapper: ["bg-transparent"],
label: ["!text-black", "font-semibold"],
inputWrapper: [
"bg-transparent",
"dark:bg-transparent",
"hover:bg-transparent",
"dark:hover:bg-transparent",
"group-data-[focused=true]:bg-transparent",
"dark:group-data-[focused=true]:bg-transaparent",
"group-data-[focused=false]:bg-transparent",
"focus-within:!bg-transparent",
],
}}
isRequired
type="text"
label="Username"
placeholder="Masukkan username anda!"
variant='underlined'
/>
</div>
<div>
<Input
classNames={{
input: ["w-full", "bg-transparent", "!text-black"],
mainWrapper: ["w-full", "bg-transparent"],
innerWrapper: ["bg-transparent"],
label: ["!text-black", "font-semibold"],
inputWrapper: [
"bg-transparent",
"dark:bg-transparent",
"hover:bg-transparent",
"dark:hover:bg-transparent",
"group-data-[focused=true]:bg-transparent",
"dark:group-data-[focused=true]:bg-transaparent",
"group-data-[focused=false]:bg-transparent",
"focus-within:!bg-transparent",
],
}}
isRequired
endContent={
<button className="focus:outline-none" type="button" onClick={toggleVisibility}>
{isVisible ? (
<EyeSlashFilledIcon className="text-2xl text-default-400 pointer-events-none" />
) : (
<EyeFilledIcon className="text-2xl text-default-400 pointer-events-none" />
)}
</button>
}
type={isVisible ? "text" : "password"}
label="Password"
placeholder="Masukkan password anda"
variant='underlined'
/>
</div>
<div>
<Input
classNames={{
input: ["w-full", "bg-transparent", "!text-black"],
mainWrapper: ["w-full", "bg-transparent"],
innerWrapper: ["bg-transparent"],
label: ["!text-black", "font-semibold"],
inputWrapper: [
"bg-transparent",
"dark:bg-transparent",
"hover:bg-transparent",
"dark:hover:bg-transparent",
"group-data-[focused=true]:bg-transparent",
"dark:group-data-[focused=true]:bg-transaparent",
"group-data-[focused=false]:bg-transparent",
"focus-within:!bg-transparent",
],
}}
isRequired
endContent={
<button className="focus:outline-none" type="button" onClick={toggleVisibility}>
{isVisible ? (
<EyeSlashFilledIcon className="text-2xl text-default-400 pointer-events-none" />
) : (
<EyeFilledIcon className="text-2xl text-default-400 pointer-events-none" />
)}
</button>
}
type={isVisible ? "text" : "password"}
label="Konfirmasi Password"
placeholder="Masukkan password anda"
variant='underlined'
/>
</div>
<div>
<Input
classNames={{
input: ["w-full", "bg-transparent", "!text-black"],
mainWrapper: ["w-full", "bg-transparent"],
innerWrapper: ["bg-transparent"],
label: ["!text-black", "font-semibold"],
inputWrapper: [
"bg-transparent",
"dark:bg-transparent",
"hover:bg-transparent",
"dark:hover:bg-transparent",
"group-data-[focused=true]:bg-transparent",
"dark:group-data-[focused=true]:bg-transaparent",
"group-data-[focused=false]:bg-transparent",
"focus-within:!bg-transparent",
],
}}
isRequired
type="text"
label="Nama Lengkap"
placeholder="Masukkan nama lengkap anda"
variant='underlined'
/>
</div>
<div>
<Input
classNames={{
input: ["w-full", "bg-transparent", "!text-black"],
mainWrapper: ["w-full", "bg-transparent"],
innerWrapper: ["bg-transparent"],
label: ["!text-black", "font-semibold"],
inputWrapper: [
"bg-transparent",
"dark:bg-transparent",
"hover:bg-transparent",
"dark:hover:bg-transparent",
"group-data-[focused=true]:bg-transparent",
"dark:group-data-[focused=true]:bg-transaparent",
"group-data-[focused=false]:bg-transparent",
"focus-within:!bg-transparent",
],
}}
isRequired
type="text"
label="Nama"
placeholder="Masukkan username anda!"
variant='underlined'
/>
</div>
<div>
<Select
label="Jenis Kelamin"
placeholder="Pilih Jenis Kelamin"
className="max-w-sm"
isRequired
variant="underlined"
classNames={{
label: ["!text-black", "font-semibold"],
// mainWrapper: "rounded",
listboxWrapper:
"bg-white w-full !text-indigo-500 text-center font-bold",
popoverContent: "bg-white !text-indigo-500",
trigger:
"hover:!bg-gray-100",
value: "!text-black"
}}
listboxProps={{
itemClasses: {
base: [
"!text-left",
"!text-black",
"!bg-white",
"text-indigo-500 ",
"data-[selectable=true]:!text-indigo-500",
"data-[pressed=true]:text-indigo-500",
"data-[hover=true]:!text-indigo-300",
],
wrapper: ["!bg-white border-none"],
},
}}
onChange={onChangeGender}
>
<SelectSection >
<SelectItem key="male">Laki-laki</SelectItem>
<SelectItem key="female">Perempuan</SelectItem>
</SelectSection>
</Select>
</div>
<div>
<Select
label="Tipe"
placeholder="Pilih tipe permohonan informasi sesuai kebutuhn anda"
className="max-w-sm"
isRequired
variant="underlined"
classNames={{
label: ["!text-black", "font-semibold"],
// mainWrapper: "rounded",
listboxWrapper:
"bg-white w-full !text-indigo-500 text-center font-bold",
popoverContent: "bg-white !text-indigo-500",
trigger:
"hover:!bg-gray-100",
value: "!text-black"
}}
listboxProps={{
itemClasses: {
base: [
"!text-left",
"!text-black",
"!bg-white",
"text-indigo-500 ",
"data-[selectable=true]:!text-indigo-500",
"data-[pressed=true]:text-indigo-500",
"data-[hover=true]:!text-indigo-300",
],
wrapper: ["!bg-white border-none"],
},
}}
onChange={onChangeGender}
>
<SelectSection >
<SelectItem key="male">Laki-laki</SelectItem>
<SelectItem key="female">Perempuan</SelectItem>
</SelectSection>
</Select>
</div>
<div>
<Input
classNames={{
input: ["w-full", "bg-transparent", "!text-black"],
mainWrapper: ["w-full", "bg-transparent"],
innerWrapper: ["bg-transparent"],
label: ["!text-black", "font-semibold"],
inputWrapper: [
"bg-transparent",
"dark:bg-transparent",
"hover:bg-transparent",
"dark:hover:bg-transparent",
"group-data-[focused=true]:bg-transparent",
"dark:group-data-[focused=true]:bg-transaparent",
"group-data-[focused=false]:bg-transparent",
"focus-within:!bg-transparent",
],
}}
isRequired
type="text"
label="KTP"
placeholder="Masukkan nomor ktp anda!"
variant='underlined'
/>
</div>
<div>
<Input
classNames={{
input: ["w-full", "bg-transparent", "!text-black"],
mainWrapper: ["w-full", "bg-transparent"],
innerWrapper: ["bg-transparent"],
label: ["!text-black", "font-semibold"],
inputWrapper: [
"bg-transparent",
"dark:bg-transparent",
"hover:bg-transparent",
"dark:hover:bg-transparent",
"group-data-[focused=true]:bg-transparent",
"dark:group-data-[focused=true]:bg-transaparent",
"group-data-[focused=false]:bg-transparent",
"focus-within:!bg-transparent",
],
}}
isRequired
type="text"
label="Alamat"
placeholder="Masukkan alamat anda!"
variant='underlined'
/>
</div>
<div>
<Input
classNames={{
input: ["w-full", "bg-transparent", "!text-black"],
mainWrapper: ["w-full", "bg-transparent"],
innerWrapper: ["bg-transparent"],
label: ["!text-black", "font-semibold"],
inputWrapper: [
"bg-transparent",
"dark:bg-transparent",
"hover:bg-transparent",
"dark:hover:bg-transparent",
"group-data-[focused=true]:bg-transparent",
"dark:group-data-[focused=true]:bg-transaparent",
"group-data-[focused=false]:bg-transparent",
"focus-within:!bg-transparent",
],
}}
isRequired
type="text"
label="No Telp"
placeholder="Masukkan nomor telepon anda!"
variant='underlined'
/>
</div>
<div>
<Input
classNames={{
input: ["w-full", "bg-transparent", "!text-black"],
mainWrapper: ["w-full", "bg-transparent"],
innerWrapper: ["bg-transparent"],
label: ["!text-black", "font-semibold"],
inputWrapper: [
"bg-transparent",
"dark:bg-transparent",
"hover:bg-transparent",
"dark:hover:bg-transparent",
"group-data-[focused=true]:bg-transparent",
"dark:group-data-[focused=true]:bg-transaparent",
"group-data-[focused=false]:bg-transparent",
"focus-within:!bg-transparent",
],
}}
isRequired
type="text"
label="Email"
placeholder="Masukkan email anda!"
variant='underlined'
/>
</div>
<div>
<Input
className="max-w-sm"
classNames={{
input: ["w-full", "bg-transparent", "!text-black"],
mainWrapper: ["w-full", "bg-transparent"],
innerWrapper: ["bg-transparent"],
label: ["!text-black", "font-semibold", "text-xs", "w-full"],
inputWrapper: [
"bg-transparent",
"dark:bg-transparent",
"hover:bg-transparent",
"dark:hover:bg-transparent",
"group-data-[focused=true]:bg-transparent",
"dark:group-data-[focused=true]:bg-transaparent",
"group-data-[focused=false]:bg-transparent",
"focus-within:!bg-transparent",
],
}}
isRequired
type="text"
label="Tanggal Lahir"
isReadOnly
labelPlacement="outside-left"
/>
<Datepicker
useRange={false}
asSingle={true}
value={startDateValue}
displayFormat="DD/MM/YYYY"
onChange={(e: any) => handleValueChange(e, 1)}
inputClassName="w-full bg-transparent border-1 border-gray-200 px-2 py-[6px] rounded-xl "
/>
</div>
<div>
<Select
label="Pendidikan Terakhir"
placeholder="Pilih Pendidikan terakhir anda"
className="max-w-sm"
isRequired
variant="underlined"
classNames={{
label: ["!text-black", "font-semibold"],
// mainWrapper: "rounded",
listboxWrapper:
"bg-white w-full !text-indigo-500 text-center font-bold",
popoverContent: "bg-white !text-indigo-500",
trigger:
"hover:!bg-gray-100",
value: "!text-black"
}}
listboxProps={{
itemClasses: {
base: [
"!text-left",
"!text-black",
"!bg-white",
"text-indigo-500 ",
"data-[selectable=true]:!text-indigo-500",
"data-[pressed=true]:text-indigo-500",
"data-[hover=true]:!text-indigo-300",
],
wrapper: ["!bg-white border-none"],
},
}}
// onChange={onChangeGender}
>
<SelectSection >
<SelectItem key="sd">SD</SelectItem>
<SelectItem key="smp">SMP</SelectItem>
<SelectItem key="sma">SMA</SelectItem>
<SelectItem key="d">D1/D2/D3</SelectItem>
<SelectItem key="s1">S1</SelectItem>
<SelectItem key="s2">S2</SelectItem>
<SelectItem key="femals3">S3</SelectItem>
</SelectSection>
</Select>
</div>
<Button className="w-full bg-[#DD8306] font-semibold">Daftar Sekarang</Button>
</div>
);
};
export default FormApplication;

223
components/icons.tsx
View File

File diff suppressed because one or more lines are too long

17
components/layout/HumasLayout.tsx Normal file
View File

@ -0,0 +1,17 @@
import React from "react";
import NavbarHumas from "../navbar/NavbarHumas";
import Footer from "../Landing Page/Footer";
interface Props {
children: React.ReactNode;
}
export const HumasLayout = ({ children }: Props) => {
return (
<section className="flex flex-col">
<NavbarHumas />
{children}
<Footer />
</section>
);
};

6
components/layout/ppid-layout.tsx → components/layout/PPIDLayout.tsx
View File

@ -3,6 +3,9 @@ import React from "react";
import { PPIDNavbar } from "../Portal PPID/ppid-navbar";
import PPIDBanner from "../Portal PPID/ppid-banner";
import PPIDbody from "../Portal PPID/PpidMain";
import NavbarHumas from "../navbar/NavbarHumas";
import Footer from "../Landing Page/Footer";
import NavbarPPID from "../navbar/NavbarPPID";
interface Props {
children: React.ReactNode;
@ -13,9 +16,10 @@ export const PPIDLayout = ({ children, pageTitle }: Props) => {
return (
<section>
<PPIDNavbar />
<NavbarPPID />
<PPIDBanner />
<PPIDbody />
<Footer />
</section>
);
};

140
components/navbar/NavbarHumas.tsx
View File

@ -1,12 +1,16 @@
'use client'
import { Input } from '@nextui-org/input';
import { Navbar, NavbarContent, NavbarItem, NavbarMenuToggle } from '@nextui-org/navbar';
import { Button, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger } from '@nextui-org/react';
import Link from "next/link";
import { ChevronDownIcon, ChevronRightWhite, FbIcon, IdnIcon, IgIcon, SearchIcon, TtIcon, TwIcon, YtIcon } from '../icons';
import { ThemeSwitch } from '../theme-switch';
import { Button, Dropdown, DropdownItem, DropdownMenu, DropdownSection, DropdownTrigger } from '@nextui-org/react';
export default function NavbarHumas() {
const handleClick = () => {
console.log('Link clicked!');
};
const searchInput = (
<Input
aria-label="Search"
@ -23,13 +27,15 @@ export default function NavbarHumas() {
/>
);
return (
<Navbar maxWidth='full' isBlurred={true} className='h-28 md:h-36'>
<Navbar shouldHideOnScroll maxWidth='full' isBlurred={true} className='h-28 md:h-36 '>
<div className='w-1/12 min-w-max'>
<img src="logohumas.png" alt="" />
<img src="/logohumas.png" alt="" />
</div>
<div className='w-11/12 lg:w-8/12 font-semibold hidden md:block '>
<div className='flex justify-around items-center'>
<div>Beranda</div>
<Link href={'/'}>
<div>Beranda</div>
</Link>
<div>
<Dropdown>
<NavbarItem>
@ -62,24 +68,34 @@ export default function NavbarHumas() {
<DropdownItem
endContent={<ChevronRightWhite />}
>
Tentang Humas POLRI
<Link href='/tentang-humas-polri'>
Tentang Humas POLRI
</Link>
</DropdownItem>
<DropdownItem
endContent={<ChevronRightWhite />}
>
Profile Pimpinan POLRI
<Link href='/profile-pimpinan-polri'>
Profile Pimpinan POLRI
</Link>
</DropdownItem>
<DropdownItem
endContent={<ChevronRightWhite />}>
Struktur Organisasi
<Link href='/struktur-organisasi'>
Struktur Organisasi
</Link>
</DropdownItem>
<DropdownItem
endContent={<ChevronRightWhite />}>
Visi & Misi
<Link href='/visi-misi'>
Visi & Misi
</Link>
</DropdownItem>
<DropdownItem
endContent={<ChevronRightWhite />}>
Tugas & Fungsi
<Link href='/tugas-dan-fungsi'>
Tugas & Fungsi
</Link>
</DropdownItem>
<DropdownItem
endContent={<ChevronRightWhite />}>
@ -88,9 +104,107 @@ export default function NavbarHumas() {
</DropdownMenu>
</Dropdown>
</div>
<div>Portal PPID</div>
<div>Pelayanan Masyarakat</div>
<div>Kontak</div>
<div><Link href="/portal-ppid">Portal PPID</Link></div>
<div>
<Dropdown>
<NavbarItem>
<DropdownTrigger>
<Button
disableRipple
className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium font font-semibold"
radius="sm"
variant="light"
endContent={<ChevronDownIcon className="pt-1" />}
>
Pelayanan Masyarakat
</Button>
</DropdownTrigger>
</NavbarItem>
<DropdownMenu
aria-label="pelayanan-masyarakat"
title='pelayanan-masyarakat'
className="pt-4"
classNames={{
list: "gap-2 flex flex-row flex-wrap"
}}
itemClasses={{
base: "w-[350px]"
}}
>
<DropdownItem
endContent={<ChevronRightWhite />}
>
<Link href={'/form-permohonan-informasi'}>
Formulir Permohonan Informasi
</Link>
</DropdownItem>
<DropdownItem
endContent={<ChevronRightWhite />}
>
<Link href='https://www.digitalkorlantas.id/sim/' target="_blank">
Pelayanan SIM
</Link>
</DropdownItem>
<DropdownItem
endContent={<ChevronRightWhite />}>
<Link href='https://erikkes.id/' target="_blank">
Pelayanan e-Rikkes SIM
</Link>
</DropdownItem>
<DropdownItem
endContent={<ChevronRightWhite />}>
<Link href='https://eppsi.id/' target="_blank">
Pelayanan Test Psikologi SIM
</Link>
</DropdownItem>
<DropdownItem
endContent={<ChevronRightWhite />}>
<Link href="https://e-avis.korlantas.polri.go.id/" target='_blank'>
Pelayanan e-Arvis
</Link>
</DropdownItem>
<DropdownItem
endContent={<ChevronRightWhite />}>
<Link href="https://samsatdigital.id/" target='_blank'>
Pelayanan Samsat Digital
</Link>
</DropdownItem>
<DropdownItem
endContent={<ChevronRightWhite />}>
<Link href='https://play.google.com/store/apps/details?id=superapps.polri.presisi.presisi&hl=en_US' target='_blank'>
Pelayanan SKCK
</Link>
</DropdownItem>
<DropdownItem
endContent={<ChevronRightWhite />}>
<Link href='https://play.google.com/store/apps/details?id=com.stk.pengaduanpropam' target='_blank'>
Pelayanan Propam Presisi
</Link>
</DropdownItem>
<DropdownItem
endContent={<ChevronRightWhite />}>
<Link href='https://dumaspresisi.polri.go.id/' target='_blank'>
Pelayanan Dumas Presisi
</Link>
</DropdownItem>
<DropdownItem
endContent={<ChevronRightWhite />}>
<Link href='https://bos.polri.go.id/login' target='_blank'>
Pelayanan Binmas
</Link>
</DropdownItem>
<DropdownItem
endContent={<ChevronRightWhite />}>
<Link href='https://play.google.com/store/apps/details?id=id.go.ssdmpolri.pengaduanappsbarupolri2' target='_blank'>
Whistle Blower System
</Link>
</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
<div>
<Link href={'/kontak-kami'}>Kontak</Link></div>
<div><ThemeSwitch /></div>
</div>
</div>

44
components/navbar/NavbarPPID.tsx Normal file
View File

@ -0,0 +1,44 @@
import { Navbar, NavbarBrand, NavbarContent, NavbarItem, NavbarMenuToggle } from '@nextui-org/navbar'
import React from 'react'
import { ThemeSwitch } from '../theme-switch'
import { FbIcon, IdnIcon, IgIcon, TtIcon, TwIcon, YtIcon } from '../icons'
export default function NavbarPPID() {
return (
<Navbar maxWidth='full' height="8rem">
<div className='w-full'>
<div className='hidden md:flex items-end justify-end'>
<div className='flex items-center justify-between gap-1 md:gap-10'>
<div className="flex gap-1 lg:gap-3 items-center">
<div><FbIcon /></div>
<div><IgIcon /></div>
<div><YtIcon /></div>
<div><TwIcon /></div>
<div><TtIcon /></div>
</div>
<div ><IdnIcon /></div>
</div>
</div>
<div className='flex'>
<div className='w-1/3 lg:w-2/12'>
<img src="/e-ppid.png" alt="logo" className='w-48' />
</div>
<div className='w-2/3 lg:w-9/12 hidden md:flex flex-wrap items-center justify-evenly '>
<NavbarItem>Beranda</NavbarItem>
<div>Informasi Publik</div>
<div>Profile</div>
<div>Layanan Informasi</div>
<div>Standar Layanan</div>
<div>Regulasi</div>
<div>Kontak</div>
<div><ThemeSwitch /></div>
</div>
<NavbarContent className="sm:hidden basis-1 pl-4" justify="end">
<ThemeSwitch />
<NavbarMenuToggle />
</NavbarContent>
</div>
</div>
</Navbar>
)
}

53
components/page/DetailNews.tsx Normal file
View File

@ -0,0 +1,53 @@
'use client'
import Image from 'next/image'
export default function DetailNews() {
return (
<div className=''>
<div className='justify-center px-1 md:px-3'>
<Image
width={1100}
height={500}
alt="NextUI hero Image"
src="/detail.png"
/>
</div>
<div>
<div className='md:flex px-1 md:px-6 text-xs lg:text-medium gap-3'>
<p>Oleh <b>Humas Polri</b></p>
<p className='hidden md:block'>|</p>
<p>Diupdate pada 24-01-2024 13:01:18 WIB</p>
<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>
</div>
<div className='px-1 md:px-5 text-sm md:text-medium space-y-3 py-2'>
<p className='font-bold text-lg'>Bareskrim Polri Kirim Berkas Kasus Korupsi Pengadaan Alat Kesehatan Cath Lab dan CT Scan ke Kejagung</p>
<p>Jakarta, – Direktorat Tindak Pidana Korupsi (Dittipidkor) Bareskrim Polri melakukan pengiriman berkas perkara (tahap I), terkait dugaan korupsi pengadaan alat kesehatan Cath Lab dan belanja alat kedokteran CT Scan di RSUD dr Mohammad Soewandhie Surabaya, yang diduga dilakukan oleh tersangka drg RP.
Kepala Biro Penerangan Masyarakat Divisi Humas Polri Brigjen Pol Trunoyudo Wisnu Andiko mengatakan, perkara dugaan korupsi ini terjadi pada tahun 2012 dimana RSUD dr Mohammad Soewandhie Surabaya telah melakukan pengadaan alat kesehatan Cath Lab dan belanja alat kedokteran CT Scan, dengan menggunakan DPA SKPD tahun anggaran 2012, yakni rinciannya alat kesehatan Cath Lab Rp 17.050.000.000 dan CT Scan Rp 14.500.000.000.
Trunoyudo menuturkan, pengadaan alat kesehatan Cath Lab dan CT Scan itu sendiri diawali sejak tahun 2011 dimana mulai dari tahap perencanaan anggaran, perencanaan lelang, proses lelang, pelaksanaan pekerjaan dan pembayaran terdapat perbuatan melawan hukum yang terjadi dalam proses pengadaan barang dan jasa, diantaranya dengan menunjuk salah satu produk tertentu.
“Pada tanggal 10 November 2022 telah dilakukan pengiriman berkas perkara tahap I atas nama tersangka RP ke Kejaksaan Agung RI,” katanya.
Pada tanggal 25 November 2022, penyidik menerima pengembalian berkas dengan disertai beberapa kekurangan baik petunjuk formil maupun materil yang harus dipenuhi penyidik.
Setelah penyidik melengkapi petunjuk formil maupun materil, kemudian pada 16 Januari 2024 telah melakukan pengiriman kembali berkas perkara atas nama tersangka RP ke Kejaksaan Agung.
Tersangka RP dijerat Pasal 2 ayat (1) dan atau Pasal 3 UU Nomor 31 tahun 1999 tentang Pemberantasan Tindak Pidana Korupsi sebagaimana telah diubah dengan UU nomor 20 tahun 2001 tentang perubahaan atas UU nomor 31 tahun 1999 tentang Pemberantasan Tindak Pidana Korupsi Jo Pasal 55 ayat (1) ke-1 KUHP.
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>
{/* <div className='h-auto lg:h-[350px]'>
</div> */}
</div>
</div >
)
}

64
components/page/RelatedNews.tsx Normal file
View File

@ -0,0 +1,64 @@
'use client'
import { Card, CardBody, CardFooter, Image } from '@nextui-org/react';
import React from 'react'
import { UnderLine } from '../icons';
export default function RelatedNews() {
const list = [
{
title: "Bareskrim Polri Kirim Berkas Kasus Korupsi Pengadaan Alat Kesehatan Cath Lab dan CT Scan ke...",
img: "/relatedNews.png",
desc: "$5.50",
},
{
title: "Bareskrim Polri Kirim Berkas Kasus Korupsi Pengadaan Alat Kesehatan Cath Lab dan CT Scan ke...",
img: "/headernews.png",
price: "$3.00",
},
{
title: "Bareskrim Polri Kirim Berkas Kasus Korupsi Pengadaan Alat Kesehatan Cath Lab dan CT Scan ke...",
img: "/relatedNews.png",
desc: "$5.50",
}, {
title: "Bareskrim Polri Kirim Berkas Kasus Korupsi Pengadaan Alat Kesehatan Cath Lab dan CT Scan ke...",
img: "/relatedNews.png",
desc: "$5.50",
},
{
title: "Bareskrim Polri Kirim Berkas Kasus Korupsi Pengadaan Alat Kesehatan Cath Lab dan CT Scan ke...",
img: "/headernews.png",
price: "$3.00",
},
];
return (
<div className='text-black flex flex-col items-center space-y-10 my-10'>
<div className='text-2xl font-bold flex flex-col items-center'>
<div>Kategori Satker</div>
<div><UnderLine /></div>
</div>
<div className='w-[90%] bg-white'>
<div className="gap-4 grid grid-cols-1 sm:grid-cols-5 w-full bg-white">
{list.map((item, index) => (
<Card className='bg-white text-black' shadow="sm" key={index} isPressable onPress={() => console.log("item pressed")}>
<CardBody className="overflow-visible p-2">
<Image
// shadow="sm"
radius="lg"
width="100%"
alt={item.title}
className="w-full object-cover h-[260px]"
src={item.img}
/>
<p className='text-xs pt-2 pl-1'>24/01/2024 14:08 WIB</p>
</CardBody>
<CardFooter className="text-small text-left p-1 flex flex-col items-start">
<b>{item.title}</b>
<p className='text-xs py-2 text-blue-700'>Lihat Selengkapnya</p>
</CardFooter>
</Card>
))}
</div>
</div>
</div>
)
}

45
components/page/SidebarDetail.tsx Normal file
View File

@ -0,0 +1,45 @@
import React from 'react'
import { UnderLine } from '../icons'
export default function SidebarDetail() {
return (
<div className='mt-2 space-y-5'>
<div className='font-semibold flex flex-col items-center space-y-5'>
<div className='flex flex-col items-center'>
<div>Humas <b>MABES POLRI</b></div>
<div><UnderLine /></div>
</div>
<div className='bg-[#F2F2F2] p-3 flex flex-col items-center w-auto lg:w-[310px]'>
<img src="/detailmabes.png" alt="detail" className=' h-[110px]' />
<p className='text-sm'>Depan Jamaah Habib Syech, Kaops NCS Polri Serukan Jaga Pemilu 2024 Aman dan Damai</p>
</div>
<div className='bg-[#F2F2F2] p-3 flex flex-col items-center w-auto lg:w-[310px]'>
<img src="/detailmabes.png" alt="detail" className=' h-[110px]' />
<p className='text-sm'>Depan Jamaah Habib Syech, Kaops NCS Polri Serukan Jaga Pemilu 2024 Aman dan Damai</p>
</div>
<div className='bg-[#F2F2F2] p-3 flex flex-col items-center w-auto lg:w-[310px]'>
<img src="/detailmabes.png" alt="detail" className=' h-[110px]' />
<p className='text-sm'>Depan Jamaah Habib Syech, Kaops NCS Polri Serukan Jaga Pemilu 2024 Aman dan Damai</p>
</div>
</div>
<div className='font-semibold flex flex-col items-center space-y-5'>
<div className='flex flex-col items-center'>
<div>Humas <b>POLDA</b></div>
<div><UnderLine /></div>
</div>
<div className='bg-[#F2F2F2] p-3 flex flex-col items-center w-auto lg:w-[310px]'>
<img src="/detailmabes.png" alt="detail" className=' h-[110px]' />
<p className='text-sm'>Depan Jamaah Habib Syech, Kaops NCS Polri Serukan Jaga Pemilu 2024 Aman dan Damai</p>
</div>
<div className='bg-[#F2F2F2] p-3 flex flex-col items-center w-auto lg:w-[310px]'>
<img src="/detailmabes.png" alt="detail" className=' h-[110px]' />
<p className='text-sm'>Depan Jamaah Habib Syech, Kaops NCS Polri Serukan Jaga Pemilu 2024 Aman dan Damai</p>
</div>
<div className='bg-[#F2F2F2] p-3 flex flex-col items-center w-auto lg:w-[310px]'>
<img src="/detailmabes.png" alt="detail" className=' h-[110px]' />
<p className='text-sm'>Depan Jamaah Habib Syech, Kaops NCS Polri Serukan Jaga Pemilu 2024 Aman dan Damai</p>
</div>
</div>
</div>
)
}

40
components/testnavbar.tsx Normal file
View File

@ -0,0 +1,40 @@
'use client'
import React from "react";
import { Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button } from "@nextui-org/react";
export default function TestNavbar() {
return (
<Navbar>
<NavbarBrand>
<p className="font-bold text-inherit">ACME</p>
</NavbarBrand>
<NavbarContent className="hidden sm:flex gap-4" justify="center">
<NavbarItem>
<Link color="foreground" key="about" href="/about">
Features
</Link>
</NavbarItem>
<NavbarItem isActive>
<Link href="/docs" aria-current="page">
Customers
</Link>
</NavbarItem>
<NavbarItem>
<Link color="foreground" href="/docs">
Integrations
</Link>
</NavbarItem>
</NavbarContent>
<NavbarContent justify="end">
<NavbarItem className="hidden lg:flex">
<Link href="about">Login</Link>
</NavbarItem>
<NavbarItem>
<Button as={Link} color="primary" href="#" variant="flat">
Sign Up
</Button>
</NavbarItem>
</NavbarContent>
</Navbar>
);
}

4
config/site.ts
View File

@ -1,8 +1,8 @@
export type SiteConfig = typeof siteConfig;
export const siteConfig = {
name: "Next.js + NextUI",
description: "Make beautiful websites regardless of your design experience.",
name: "DIVISI HUMAS POLRI - Pengelola Informasi dan Dokumentasi Polri",
description: "DIVISI HUMAS POLRI - Pengelola Informasi dan Dokumentasi Polri.",
navItems: [
{
label: "Home",

239
package-lock.json generated
View File

@ -8,6 +8,7 @@
"name": "next-app-template",
"version": "0.0.1",
"dependencies": {
"@hookform/resolvers": "^3.3.4",
"@nextui-org/button": "2.0.26",
"@nextui-org/code": "2.0.24",
"@nextui-org/input": "2.1.16",
@ -23,6 +24,7 @@
"@react-aria/visually-hidden": "^3.8.6",
"@types/node": "20.5.7",
"@types/react": "18.2.21",
"@types/react-datepicker": "^6.0.1",
"@types/react-dom": "18.2.7",
"autoprefixer": "10.4.16",
"clsx": "^2.0.0",
@ -34,10 +36,16 @@
"next-themes": "^0.2.1",
"postcss": "8.4.31",
"react": "18.2.0",
"react-datepicker": "^6.1.0",
"react-dom": "18.2.0",
"react-hook-form": "^7.50.1",
"react-tailwindcss-datepicker": "^1.6.6",
"react-tweet": "^3.2.0",
"swiper": "^11.0.6",
"tailwind-variants": "^0.1.18",
"tailwindcss": "3.3.5",
"typescript": "5.0.4"
"typescript": "5.0.4",
"zod": "^3.22.4"
}
},
"node_modules/@aashutoshrathi/word-wrap": {
@ -137,6 +145,54 @@
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
}
},
"node_modules/@floating-ui/core": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz",
"integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==",
"dependencies": {
"@floating-ui/utils": "^0.2.1"
}
},
"node_modules/@floating-ui/dom": {
"version": "1.6.3",
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz",
"integrity": "sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==",
"dependencies": {
"@floating-ui/core": "^1.0.0",
"@floating-ui/utils": "^0.2.0"
}
},
"node_modules/@floating-ui/react": {
"version": "0.26.9",
"resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.9.tgz",
"integrity": "sha512-p86wynZJVEkEq2BBjY/8p2g3biQ6TlgT4o/3KgFKyTWoJLU1GZ8wpctwRqtkEl2tseYA+kw7dBAIDFcednfI5w==",
"dependencies": {
"@floating-ui/react-dom": "^2.0.8",
"@floating-ui/utils": "^0.2.1",
"tabbable": "^6.0.1"
},
"peerDependencies": {
"react": ">=16.8.0",
"react-dom": ">=16.8.0"
}
},
"node_modules/@floating-ui/react-dom": {
"version": "2.0.8",
"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.8.tgz",
"integrity": "sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==",
"dependencies": {
"@floating-ui/dom": "^1.6.1"
},
"peerDependencies": {
"react": ">=16.8.0",
"react-dom": ">=16.8.0"
}
},
"node_modules/@floating-ui/utils": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
"integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
},
"node_modules/@formatjs/ecma402-abstract": {
"version": "1.17.3",
"resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.17.3.tgz",
@ -181,6 +237,14 @@
"tslib": "^2.4.0"
}
},
"node_modules/@hookform/resolvers": {
"version": "3.3.4",
"resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.3.4.tgz",
"integrity": "sha512-o5cgpGOuJYrd+iMKvkttOclgwRW86EsWJZZRC23prf0uU2i48Htq4PuT73AVb9ionFyZrwYEITuOFGF+BydEtQ==",
"peerDependencies": {
"react-hook-form": "^7.0.0"
}
},
"node_modules/@humanwhocodes/config-array": {
"version": "0.11.13",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
@ -2759,6 +2823,25 @@
"csstype": "^3.0.2"
}
},
"node_modules/@types/react-datepicker": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/@types/react-datepicker/-/react-datepicker-6.0.1.tgz",
"integrity": "sha512-oAavACLXz+Vm6kO1XZe1/LQJClOO32UUv4xva9G16KQJ2hNROtXyeGzmRg6mktHrQ+YGLnnNlN6S/XykQE2HMA==",
"dependencies": {
"@floating-ui/react": "^0.26.2",
"@types/react": "*",
"date-fns": "^3.3.1"
}
},
"node_modules/@types/react-datepicker/node_modules/date-fns": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.3.1.tgz",
"integrity": "sha512-y8e109LYGgoQDveiEBD3DYXKba1jWf5BA8YU1FL5Tvm0BTdEfy54WLCwnuYWZNnzzvALy/QQ4Hov+Q9RVRv+Zw==",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/kossnocorp"
}
},
"node_modules/@types/react-dom": {
"version": "18.2.7",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.7.tgz",
@ -3333,6 +3416,11 @@
"node": ">= 6"
}
},
"node_modules/classnames": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
"integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
},
"node_modules/client-only": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@ -3440,6 +3528,27 @@
"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
"integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA=="
},
"node_modules/date-fns": {
"version": "2.30.0",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
"integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
"dependencies": {
"@babel/runtime": "^7.21.0"
},
"engines": {
"node": ">=0.11"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/date-fns"
}
},
"node_modules/dayjs": {
"version": "1.11.10",
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
"integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==",
"peer": true
},
"node_modules/debug": {
"version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@ -5691,6 +5800,31 @@
"node": ">=0.10.0"
}
},
"node_modules/react-datepicker": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-6.1.0.tgz",
"integrity": "sha512-8uz+hAOpvHqZGvD4Ky1hJ0/tLI4S9B0Gu9LV7LtLxRKXODs/xrxEay0aMVp7AW9iizTeImZh/6aA00fFaRZpJw==",
"dependencies": {
"@floating-ui/react": "^0.26.2",
"classnames": "^2.2.6",
"date-fns": "^3.3.1",
"prop-types": "^15.7.2",
"react-onclickoutside": "^6.13.0"
},
"peerDependencies": {
"react": "^16.9.0 || ^17 || ^18",
"react-dom": "^16.9.0 || ^17 || ^18"
}
},
"node_modules/react-datepicker/node_modules/date-fns": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.3.1.tgz",
"integrity": "sha512-y8e109LYGgoQDveiEBD3DYXKba1jWf5BA8YU1FL5Tvm0BTdEfy54WLCwnuYWZNnzzvALy/QQ4Hov+Q9RVRv+Zw==",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/kossnocorp"
}
},
"node_modules/react-dom": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@ -5703,11 +5837,39 @@
"react": "^18.2.0"
}
},
"node_modules/react-hook-form": {
"version": "7.50.1",
"resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.50.1.tgz",
"integrity": "sha512-3PCY82oE0WgeOgUtIr3nYNNtNvqtJ7BZjsbxh6TnYNbXButaD5WpjOmTjdxZfheuHKR68qfeFnEDVYoSSFPMTQ==",
"engines": {
"node": ">=12.22.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/react-hook-form"
},
"peerDependencies": {
"react": "^16.8.0 || ^17 || ^18"
}
},
"node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"node_modules/react-onclickoutside": {
"version": "6.13.0",
"resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.0.tgz",
"integrity": "sha512-ty8So6tcUpIb+ZE+1HAhbLROvAIJYyJe/1vRrrcmW+jLsaM+/powDRqxzo6hSh9CuRZGSL1Q8mvcF5WRD93a0A==",
"funding": {
"type": "individual",
"url": "https://github.com/Pomax/react-onclickoutside/blob/master/FUNDING.md"
},
"peerDependencies": {
"react": "^15.5.x || ^16.x || ^17.x || ^18.x",
"react-dom": "^15.5.x || ^16.x || ^17.x || ^18.x"
}
},
"node_modules/react-remove-scroll": {
"version": "2.5.7",
"resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.7.tgz",
@ -5775,6 +5937,15 @@
}
}
},
"node_modules/react-tailwindcss-datepicker": {
"version": "1.6.6",
"resolved": "https://registry.npmjs.org/react-tailwindcss-datepicker/-/react-tailwindcss-datepicker-1.6.6.tgz",
"integrity": "sha512-kHSUonRO86PoYQQWPqpaSw2JeEn9OafdLsLBG85zO5Sfs23Ku8Ixt/YO+Is3TCBcFeOKnZgzhGLmP3NAXVlFkA==",
"peerDependencies": {
"dayjs": "^1.11.6",
"react": "^17.0.2 || ^18.2.0"
}
},
"node_modules/react-textarea-autosize": {
"version": "8.5.3",
"resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.5.3.tgz",
@ -5791,6 +5962,21 @@
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/react-tweet": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/react-tweet/-/react-tweet-3.2.0.tgz",
"integrity": "sha512-eYLAX5ViOICQT/vkte/IzYZZDoBnl7hDO3Ns4++lKEFr/+BohPK5Rg+Lvbfx78Qtn3AjfDG5c6n+rOt7c2J6qg==",
"dependencies": {
"@swc/helpers": "^0.5.3",
"clsx": "^2.0.0",
"date-fns": "^2.30.0",
"swr": "^2.2.4"
},
"peerDependencies": {
"react": ">= 18.0.0",
"react-dom": ">= 18.0.0"
}
},
"node_modules/read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@ -6253,6 +6439,41 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/swiper": {
"version": "11.0.6",
"resolved": "https://registry.npmjs.org/swiper/-/swiper-11.0.6.tgz",
"integrity": "sha512-W/Me7MQl5rNgdM5x9i3Gll76WsyVpnHn91GhBOyL7RCFUeg62aVnflzlVfIpXzZ/87FtJOfAoDH79ZH2Yq76zA==",
"funding": [
{
"type": "patreon",
"url": "https://www.patreon.com/swiperjs"
},
{
"type": "open_collective",
"url": "http://opencollective.com/swiper"
}
],
"engines": {
"node": ">= 4.7.0"
}
},
"node_modules/swr": {
"version": "2.2.4",
"resolved": "https://registry.npmjs.org/swr/-/swr-2.2.4.tgz",
"integrity": "sha512-njiZ/4RiIhoOlAaLYDqwz5qH/KZXVilRLvomrx83HjzCWTfa+InyfAjv05PSFxnmLzZkNO9ZfvgoqzAaEI4sGQ==",
"dependencies": {
"client-only": "^0.0.1",
"use-sync-external-store": "^1.2.0"
},
"peerDependencies": {
"react": "^16.11.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/tabbable": {
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
"integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
},
"node_modules/tailwind-merge": {
"version": "1.14.0",
"resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.14.0.tgz",
@ -6612,6 +6833,14 @@
}
}
},
"node_modules/use-sync-external-store": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
"integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/util-deprecate": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@ -6743,6 +6972,14 @@
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/zod": {
"version": "3.22.4",
"resolved": "https://registry.npmjs.org/zod/-/zod-3.22.4.tgz",
"integrity": "sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==",
"funding": {
"url": "https://github.com/sponsors/colinhacks"
}
}
}
}

10
package.json
View File

@ -9,6 +9,7 @@
"lint": "next lint"
},
"dependencies": {
"@hookform/resolvers": "^3.3.4",
"@nextui-org/button": "2.0.26",
"@nextui-org/code": "2.0.24",
"@nextui-org/input": "2.1.16",
@ -24,6 +25,7 @@
"@react-aria/visually-hidden": "^3.8.6",
"@types/node": "20.5.7",
"@types/react": "18.2.21",
"@types/react-datepicker": "^6.0.1",
"@types/react-dom": "18.2.7",
"autoprefixer": "10.4.16",
"clsx": "^2.0.0",
@ -35,9 +37,15 @@
"next-themes": "^0.2.1",
"postcss": "8.4.31",
"react": "18.2.0",
"react-datepicker": "^6.1.0",
"react-dom": "18.2.0",
"react-hook-form": "^7.50.1",
"react-tailwindcss-datepicker": "^1.6.6",
"react-tweet": "^3.2.0",
"swiper": "^11.0.6",
"tailwind-variants": "^0.1.18",
"tailwindcss": "3.3.5",
"typescript": "5.0.4"
"typescript": "5.0.4",
"zod": "^3.22.4"
}
}

BIN
public/al.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 926 B

BIN
public/ar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
public/detail.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 588 KiB

BIN
public/detailmabes.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 67 KiB

BIN
public/e-ppid.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
public/fb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

BIN
public/humas.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

BIN
public/kadiv-humas.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 237 KiB

BIN
public/kapolri.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 311 KiB

BIN
public/linkedin.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
public/logohumas.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
public/mabes.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
public/maps.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB

BIN
public/polda.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
public/polres.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 87 KiB

BIN
public/polsek.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

BIN
public/relatedNews.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 87 KiB

BIN
public/spark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 550 B

BIN
public/sparklg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

10
public/temp/ar.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

10
public/temp/calender.svg Normal file
View File

@ -0,0 +1,10 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_988_15814)">
<path d="M5.25 0C5.44891 0 5.63968 0.0790176 5.78033 0.21967C5.92098 0.360322 6 0.551088 6 0.75V1.5H18V0.75C18 0.551088 18.079 0.360322 18.2197 0.21967C18.3603 0.0790176 18.5511 0 18.75 0C18.9489 0 19.1397 0.0790176 19.2803 0.21967C19.421 0.360322 19.5 0.551088 19.5 0.75V1.5H21C21.7956 1.5 22.5587 1.81607 23.1213 2.37868C23.6839 2.94129 24 3.70435 24 4.5V21C24 21.7956 23.6839 22.5587 23.1213 23.1213C22.5587 23.6839 21.7956 24 21 24H3C2.20435 24 1.44129 23.6839 0.87868 23.1213C0.316071 22.5587 0 21.7956 0 21V7.5H24V6H0V4.5C0 3.70435 0.316071 2.94129 0.87868 2.37868C1.44129 1.81607 2.20435 1.5 3 1.5H4.5V0.75C4.5 0.551088 4.57902 0.360322 4.71967 0.21967C4.86032 0.0790176 5.05109 0 5.25 0Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_988_15814">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 961 B

4
public/temp/cs.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.0002 10.999H22.0002C22.0002 5.869 18.1272 2 12.9902 2V4C17.0522 4 20.0002 6.943 20.0002 10.999Z" fill="white"/>
<path d="M12.9998 8.00024C15.1028 8.00024 15.9998 8.89724 15.9998 11.0002H17.9998C17.9998 7.77524 16.2248 6.00024 12.9998 6.00024V8.00024ZM16.4218 13.4432C16.2296 13.2686 15.9771 13.1754 15.7176 13.1835C15.4581 13.1915 15.2118 13.3001 15.0308 13.4862L12.6378 15.9472C12.0618 15.8372 10.9038 15.4762 9.71179 14.2872C8.51979 13.0942 8.15879 11.9332 8.05179 11.3612L10.5108 8.96724C10.6972 8.78637 10.8059 8.54006 10.814 8.28045C10.822 8.02083 10.7287 7.76828 10.5538 7.57624L6.85879 3.51324C6.68384 3.3206 6.44067 3.20374 6.18095 3.1875C5.92122 3.17125 5.66539 3.2569 5.46779 3.42624L3.29779 5.28724C3.1249 5.46075 3.02171 5.69169 3.00779 5.93624C2.99279 6.18624 2.70679 12.1082 7.29879 16.7022C11.3048 20.7072 16.3228 21.0002 17.7048 21.0002C17.9068 21.0002 18.0308 20.9942 18.0638 20.9922C18.3083 20.9786 18.5391 20.8749 18.7118 20.7012L20.5718 18.5302C20.7413 18.3328 20.8271 18.077 20.811 17.8173C20.795 17.5576 20.6783 17.3143 20.4858 17.1392L16.4218 13.4432Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

4
public/temp/hotline.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.0002 10.999H22.0002C22.0002 5.869 18.1272 2 12.9902 2V4C17.0522 4 20.0002 6.943 20.0002 10.999Z" fill="white"/>
<path d="M12.9998 8.00024C15.1028 8.00024 15.9998 8.89724 15.9998 11.0002H17.9998C17.9998 7.77524 16.2248 6.00024 12.9998 6.00024V8.00024ZM16.4218 13.4432C16.2296 13.2686 15.9771 13.1754 15.7176 13.1835C15.4581 13.1915 15.2118 13.3001 15.0308 13.4862L12.6378 15.9472C12.0618 15.8372 10.9038 15.4762 9.71179 14.2872C8.51979 13.0942 8.15879 11.9332 8.05179 11.3612L10.5108 8.96724C10.6972 8.78637 10.8059 8.54006 10.814 8.28045C10.822 8.02083 10.7287 7.76828 10.5538 7.57624L6.85879 3.51324C6.68384 3.3206 6.44067 3.20374 6.18095 3.1875C5.92122 3.17125 5.66539 3.2569 5.46779 3.42624L3.29779 5.28724C3.1249 5.46075 3.02171 5.69169 3.00779 5.93624C2.99279 6.18624 2.70679 12.1082 7.29879 16.7022C11.3048 20.7072 16.3228 21.0002 17.7048 21.0002C17.9068 21.0002 18.0308 20.9942 18.0638 20.9922C18.3083 20.9786 18.5391 20.8749 18.7118 20.7012L20.5718 18.5302C20.7413 18.3328 20.8271 18.077 20.811 17.8173C20.795 17.5576 20.6783 17.3143 20.4858 17.1392L16.4218 13.4432Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

3
public/temp/loc.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 1.5C9.81276 1.50258 7.71584 2.3726 6.16923 3.91922C4.62261 5.46584 3.75259 7.56276 3.75001 9.75C3.74739 11.5374 4.33124 13.2763 5.41201 14.7C5.41201 14.7 5.63701 14.9963 5.67376 15.039L12 22.5L18.3293 15.0353C18.3623 14.9955 18.588 14.7 18.588 14.7L18.5888 14.6978C19.669 13.2747 20.2526 11.5366 20.25 9.75C20.2474 7.56276 19.3774 5.46584 17.8308 3.91922C16.2842 2.3726 14.1873 1.50258 12 1.5ZM12 12.75C11.4067 12.75 10.8266 12.5741 10.3333 12.2444C9.83995 11.9148 9.45543 11.4462 9.22837 10.8981C9.00131 10.3499 8.9419 9.74667 9.05765 9.16473C9.17341 8.58279 9.45913 8.04824 9.87869 7.62868C10.2982 7.20912 10.8328 6.9234 11.4147 6.80764C11.9967 6.69189 12.5999 6.7513 13.1481 6.97836C13.6962 7.20542 14.1648 7.58994 14.4944 8.08329C14.8241 8.57664 15 9.15666 15 9.75C14.999 10.5453 14.6826 11.3078 14.1202 11.8702C13.5578 12.4326 12.7954 12.749 12 12.75Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 989 B

3
public/temp/mail.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22 4H2V20H22V4ZM20 8L12 13L4 8V6L12 11L20 6V8Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 176 B

74
public/temp/underline.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 189 KiB

BIN
public/twitter.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
public/wa.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

6
styles/globals.css
View File

@ -2,6 +2,6 @@
@tailwind components;
@tailwind utilities;
/* *{
border: 1px solid green;
} */
*{
border: 1px solid green;
}

5
tailwind.config.js
View File

@ -1,4 +1,4 @@
import {nextui} from '@nextui-org/theme'
import { nextui } from '@nextui-org/theme'
/** @type {import('tailwindcss').Config} */
module.exports = {
@ -6,7 +6,8 @@ module.exports = {
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
'./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}'
'./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}',
"./node_modules/react-tailwindcss-datepicker/dist/index.esm.js"
],
theme: {
extend: {},