feat:regulasi ppid

app/portal-ppid/page.tsx

@@ -1,9 +1,8 @@
 'use client'
 import PPIDbody from '@/components/Portal PPID/PpidMain';
 import PPIDBanner from '@/components/Portal PPID/ppid-banner';
-import { PPIDLayout } from '@/components/layout/PPIDLayout';
 import { usePathname } from 'next/navigation';
-import React, { Children } from 'react'
+import React from 'react';
 
 export default function PortalPPID({
     children,

app/portal-ppid/regulasi/page.tsx

@@ -0,0 +1,15 @@
+import PPIDSidebar from '@/components/Portal PPID/PPIDSidebar'
+import RegulationTable from '@/components/table/tabel-regulasi'
+
+export default function RegulasiPage() {
+    return (
+        <div className='md:flex'>
+            <div className='w-auto md:w-[70%] bg-[#E2E2E2]'>
+                <RegulationTable />
+            </div>
+            <div className='w-auto md:w-[30%]'>
+                <PPIDSidebar />
+            </div>
+        </div>
+    )
+}

components/Portal PPID/PPIDSidebar.tsx

@@ -1,40 +1,28 @@
-import { ScrollShadow } from '@nextui-org/react'
+'use client'
+import { Button, Input, ScrollShadow } from '@nextui-org/react'
 import React from 'react'
 import { EyeIcon } from '../icons'
+import GPRKominfo from '../SocialMedia/GprKominfo'
 
 export default function PPIDSidebar() {
     return (
         <div className='bg-white text-black p-1 md:p-2 lg:p-4 space-y-4'>
-            <div>Form Regis</div>
+            <div className='flex justify-center'><img src="/e-ppid-satker.png" alt="satker" className='' /></div>
+            <div className='flex justify-center'><img src="/e-ppid-permohonan-informasi.png" alt="permohonan" /></div>
+            <div className='bg-[#161616] text-white p-3 rounded-lg flex w-full flex-col items-center space-y-2 border-2 border-red-700'>
+                <div>Permohonan Informasi</div>
+                <div className='w-full'>
+                    <Input variant='flat' size='sm' type="name" label="Nama Pengguna" className='w-full' />
+                </div>
+                <div className='w-full'>
+                    <Input variant='flat' size='sm' type="password" label="Password" className='w-full' />
+                </div>
+                <div className='text-xs text-right text-[#DD8306] w-full'>Lupa Password?</div>
+                <div className='w-full'><Button size='sm' className='bg-[#DD8306] w-full'>Masuk</Button></div>
+                <div className='w-full'><Button size='sm' className=' w-full bg-white text-[#DD8306] font-bold'>Register</Button></div>
+            </div>
             <div>
-                <div className='text-lg font-bold border-5 border-blue-950 rounded-tr-lg rounded-tl-lg'>
+                <GPRKominfo />
-                    <img src="/gprheader.png" alt="gpr" className='w-full' />
-                </div>
-                <div className='overflow-y-scroll h-[343px] border-5 border-blue-950 text-black'>
-                    <div className='text-xs text-left m-2 p-2 bg-[#FFFFFF] rounded-md border-dashed border-2 border-sky-500'>
-                        <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>
-                        <p className='flex items-center gap-1'><EyeIcon />82</p>
-                    </div>
-                    <div className='text-xs text-left m-2 p-2 bg-[#FFFFFF] rounded-md border-dashed border-2 border-sky-500'>
-                        <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>
-                        <p className='flex items-center gap-1'><EyeIcon />82</p>
-                    </div>
-                    <div className='text-xs text-left m-2 p-2 bg-[#FFFFFF] rounded-md border-dashed border-2 border-sky-500'>
-                        <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>
-                        <p className='flex items-center gap-1'><EyeIcon />82</p>
-                    </div>
-                    <div className='text-xs text-left m-2 p-2 bg-[#FFFFFF] rounded-md border-dashed border-2 border-sky-500'>
-                        <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>
-                        <p className='flex items-center gap-1'><EyeIcon />82</p>
-                    </div>
-                </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 className='text-xl font-semibold underline underline-offset-4 decoration-red-600 pb-3'>

components/Portal PPID/PpidMain.tsx

@@ -5,12 +5,12 @@ import LatestNews from './LatestNews'
 
 export default function PPIDbody() {
     return (
-        <div className='md:flex '>
+        <div className='md:flex'>
-            <div className='w-auto bg-[#E2E2E2] md:w-[70%]'>
+            <div className='w-auto bg-[#E2E2E2] md:w-2/3 lg:w-[70%] px-5 md:px-2 lg:px-5'>
                 <PublicInformation />
                 <LatestNews />
             </div>
-            <div className='w-auto md:w-[30%]'>
+            <div className='w-auto md:w-1/3 lg:w-[30%]'>
                 <PPIDSidebar />
             </div>
         </div>

components/Portal PPID/PublicInformation.tsx

@@ -6,7 +6,7 @@ export default function PublicInformation() {
             <div className='text-lg font-semibold underline underline-offset-8 decoration-red-600 pb-5'>
                 Informasi Publik
             </div>
-            <div className='grid grid-col-2  md:grid-cols-4 gap-4 text-white font-semibold text-md'>
+            <div className='grid grid-col-2  md:grid-cols-3 lg:grid-cols-4 gap-4 text-white font-semibold text-md'>
                 <div className='flex flex-col items-center gap-2 p-3 bg-[#DD8306] rounded-md'>
                     <div><img src="/infopublik1.png" alt="logo" /></div>
                     <div>Informasi Serta Merta</div>

components/navbar/NavbarPPID.tsx

@@ -299,7 +299,7 @@ export default function NavbarPPID() {
                             </DropdownMenu>
                         </Dropdown>
                         <NavbarItem>
-                            <Link href='/portal-ppid' color='foreground'>
+                            <Link href='/portal-ppid/regulasi' color='foreground'>
                                 Regulasi
                             </Link>
                         </NavbarItem>

components/table/tabel-regulasi.tsx

@@ -0,0 +1,76 @@
+'use client'
+import { Select, SelectItem, SelectSection, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow } from '@nextui-org/react'
+import React from 'react'
+import { EyeFilledIcon } from '../icons';
+
+export default function RegulationTable() {
+    const filters = [
+        { label: "Title", value: "title" },
+        { label: "Date", value: "date" },
+        { label: "Created At", value: "createdAt" },
+    ];
+    return (
+        <div className=' text-black p-1 md:p-2 lg:p-8 space-y-4'>
+            <div className='pt-4 space-y-5'>
+                <div className='font-semibold text-lg border-b-4 border-red-700 leading-loose'>Regulasi</div>
+                <div>
+                    <div className="flex flex-col gap-7">
+                        <Table
+                            color='warning'
+                            selectionMode="single"
+                            defaultSelectedKeys={["1"]}
+                            aria-label="Example static collection table"
+                            classNames={{
+                                wrapper: "bg-white",
+                                base: 'font-bold',
+                                td: "font-medium"
+                            }}
+                        >
+                            <TableHeader>
+                                <TableColumn className=' bg-[#DD8306] text-white text-sm'>Peraturan Mengenai Keterbukaan Informasi Publik</TableColumn>
+                            </TableHeader>
+                            <TableBody>
+                                <TableRow key="1">
+                                    <TableCell className='flex items-center justify-between'>A. Informasi terkait unjuk rasa terutama yang berpotensi anarkis. <EyeFilledIcon color="#DD8306" /></TableCell>
+                                </TableRow>
+                                <TableRow key="2">
+                                    <TableCell className='flex items-center justify-between'>B. Informasi mengenai keamanan dan ketertiban masyarakat terutama yang berpotensi kerusuhan massa. <EyeFilledIcon color="#DD8306" /></TableCell>
+                                </TableRow>
+                                <TableRow key="3">
+                                    <TableCell className='flex items-center justify-between'>C. Informasi terkait bencana alam yang berdampak luas. <EyeFilledIcon color="#DD8306" /></TableCell>
+                                </TableRow>
+                            </TableBody>
+                        </Table>
+
+                        <Table
+                            color='warning'
+                            selectionMode="single"
+                            defaultSelectedKeys={["1"]}
+                            aria-label="Example static collection table"
+                            classNames={{
+                                wrapper: "bg-white",
+                                base: 'font-bold',
+                                td: "font-medium"
+                            }}
+                        >
+                            <TableHeader>
+                                <TableColumn className=' bg-[#DD8306] text-white text-sm'>Peraturan mengenai Keterbukaan Informasi Publik yang dikeluarkan Polri</TableColumn>
+                            </TableHeader>
+                            <TableBody>
+                                <TableRow key="1">
+                                    <TableCell className='flex items-center justify-between'>A. Informasi terkait unjuk rasa terutama yang berpotensi anarkis. <EyeFilledIcon color="#DD8306" /></TableCell>
+                                </TableRow>
+                                <TableRow key="2">
+                                    <TableCell className='flex items-center justify-between'>B. Informasi mengenai keamanan dan ketertiban masyarakat terutama yang berpotensi kerusuhan massa. <EyeFilledIcon color="#DD8306" /></TableCell>
+                                </TableRow>
+                                <TableRow key="3">
+                                    <TableCell className='flex items-center justify-between'>C. Informasi terkait bencana alam yang berdampak luas. <EyeFilledIcon color="#DD8306" /></TableCell>
+                                </TableRow>
+                            </TableBody>
+                        </Table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}