92 lines
3.8 KiB
TypeScript
92 lines
3.8 KiB
TypeScript
'use client'
|
|
import { Card, CardBody, Tab, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow, Tabs, getKeyValue } from '@nextui-org/react'
|
|
import React from 'react'
|
|
import { Checklist, EyeFilledIcon } from '../icons'
|
|
|
|
export default function AnnualReport() {
|
|
|
|
const tableData = [
|
|
{
|
|
key: "1",
|
|
tahun: "2024",
|
|
download: <Checklist />
|
|
},
|
|
{
|
|
key: "2",
|
|
tahun: "2023",
|
|
download: <Checklist />
|
|
},
|
|
{
|
|
key: "3",
|
|
tahun: "2022",
|
|
download: <Checklist />
|
|
},
|
|
{
|
|
key: "4",
|
|
tahun: "2021",
|
|
download: <Checklist />
|
|
},
|
|
];
|
|
|
|
const header = [
|
|
{
|
|
key: "tahun",
|
|
label: "Tahun",
|
|
},
|
|
{
|
|
key: "download",
|
|
label: "Download"
|
|
}
|
|
]
|
|
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'>Laporan Layanan Informasi Publik Tahunan</div>
|
|
<div className='hidden md:block absolute pb-10 pl-[690px]'><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 space-y-5'>
|
|
<div>
|
|
Laporan Tahunan Pejabat Pengelola Informasi dan Dokumentasi (PPID) Humas Polri merupakan kinerja PPID Utama dalam memberikan layanan informasi publik kepada masyarakat.
|
|
</div>
|
|
<div className='border-2 w-full'>
|
|
<Table
|
|
color='warning'
|
|
selectionMode="single"
|
|
defaultSelectedKeys={["1"]}
|
|
aria-label="Example static collection table"
|
|
classNames={{
|
|
wrapper: "bg-white",
|
|
base: 'font-bold',
|
|
td: "font-medium"
|
|
}}
|
|
>
|
|
{/* <TableHeader className='border-2 border-red-600'>
|
|
<TableColumn className=' bg-[#DD8306] text-white text-sm w-full'>Tahun</TableColumn>
|
|
<TableColumn className=' bg-[#DD8306] text-white text-sm'>Download</TableColumn>
|
|
</TableHeader> */}
|
|
<TableHeader columns={header}>
|
|
{(column) => <TableColumn className=' bg-[#DD8306] text-white text-sm w-full' key={column.key}>{column.label}</TableColumn>}
|
|
</TableHeader>
|
|
{/* <TableRow key="1">
|
|
<TableCell className=''>2024</TableCell>
|
|
<TableCell className='text-center flex justify-center'><Checklist /></TableCell>
|
|
</TableRow>
|
|
<TableRow key="2">
|
|
<TableCell className='flex items-center justify-between'>2023</TableCell>
|
|
<TableCell>ceklis</TableCell>
|
|
</TableRow> */}
|
|
<TableBody items={tableData}>
|
|
{(item) => (
|
|
<TableRow key={item.key}>
|
|
{(columnKey) => <TableCell>{getKeyValue(item, columnKey)}</TableCell>}
|
|
</TableRow>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|