239 lines
16 KiB
TypeScript
239 lines
16 KiB
TypeScript
'use client'
|
|
import { BreadcrumbItem, Breadcrumbs, Button, Input, Select, SelectItem, SelectSection, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow } from "@nextui-org/react";
|
|
import PPIDSidebar from '../Portal PPID/PPIDSidebar';
|
|
import { EyeFilledIcon, SearchIcon } from '../icons';
|
|
|
|
|
|
export default function InformasiSetiapSaat() {
|
|
const searchInput = (
|
|
<Input
|
|
aria-label="Search"
|
|
className="w-full"
|
|
classNames={{
|
|
inputWrapper: "bg-white hover:!bg-gray-100",
|
|
input: "text-sm",
|
|
}}
|
|
labelPlacement="outside"
|
|
placeholder="Search..."
|
|
startContent={
|
|
<SearchIcon className="text-base text-default-400 pointer-events-none flex-shrink-0" />
|
|
}
|
|
endContent={
|
|
<Button size="sm" className="bg-[#DD8306] font-semibold">Cari</Button>
|
|
}
|
|
type="search"
|
|
/>
|
|
)
|
|
|
|
const animals = [
|
|
{ label: "Title", value: "title" },
|
|
{ label: "Date", value: "date" },
|
|
{ label: "Created At", value: "createdAt" },
|
|
];
|
|
return (
|
|
<div className='md:flex '>
|
|
<div className='w-auto bg-[#E2E2E2] md:w-[70%] text-black'>
|
|
<div className='p-1 md:p-5 lg:p-8'>
|
|
<div className='font-bold text-xl'>Informasi Setiap Saat</div>
|
|
<div className="pt-2">
|
|
<Breadcrumbs color='primary'>
|
|
<BreadcrumbItem>Beranda</BreadcrumbItem>
|
|
<BreadcrumbItem>Informasi Publik</BreadcrumbItem>
|
|
<BreadcrumbItem>Informasi Setiap Saat</BreadcrumbItem>
|
|
</Breadcrumbs>
|
|
</div>
|
|
<div className='pt-4 space-y-5'>
|
|
<div className='font-semibold text-lg border-b-4 border-red-700 leading-loose'>Informasi Publik Tersedia Setiap Saat</div>
|
|
<div className="flex items-center gap-3">
|
|
{searchInput}
|
|
<Select
|
|
label="Sort By"
|
|
size="sm"
|
|
className="w-1/5"
|
|
classNames={{
|
|
// base: "bg-red-500",
|
|
// mainWrapper: "border-2 border-red-500",
|
|
label: "text-black",
|
|
value: "!text-black",
|
|
trigger: "bg-white hover:!bg-gray-100",
|
|
// innerWrapper: "bg-red-500"
|
|
// selectorIcon: "bg-red-500"
|
|
// listboxWrapper: "bg-red-500"
|
|
// listbox: "bg-red-500"
|
|
popoverContent: "bg-white"
|
|
}}
|
|
listboxProps={{
|
|
itemClasses: {
|
|
base: "text-black",
|
|
wrapper: "!bg-white ",
|
|
}
|
|
}}
|
|
// onChange={onChangeFilterEnterprising}
|
|
>
|
|
<SelectSection >
|
|
{animals.map((list: any) => (
|
|
<SelectItem key={list.id}>{list.label}</SelectItem>
|
|
))}
|
|
</SelectSection>
|
|
</Select>
|
|
<Select
|
|
label="Tanggal Publikasi"
|
|
size="sm"
|
|
className="w-1/4"
|
|
classNames={{
|
|
// base: "bg-red-500",
|
|
// mainWrapper: "border-2 border-red-500",
|
|
label: "text-black",
|
|
value: "!text-black",
|
|
trigger: "bg-white hover:!bg-gray-100",
|
|
// innerWrapper: "bg-red-500"
|
|
// selectorIcon: "bg-red-500"
|
|
// listboxWrapper: "bg-red-500"
|
|
// listbox: "bg-red-500"
|
|
popoverContent: "bg-white"
|
|
}}
|
|
listboxProps={{
|
|
itemClasses: {
|
|
base: "text-black",
|
|
wrapper: "!bg-white ",
|
|
}
|
|
}}
|
|
// onChange={onChangeFilterEnterprising}
|
|
>
|
|
<SelectSection >
|
|
{animals.map((list: any) => (
|
|
<SelectItem key={list.id}>{list.label}</SelectItem>
|
|
))}
|
|
</SelectSection>
|
|
</Select>
|
|
</div>
|
|
<div>
|
|
<div className="flex flex-col gap-3">
|
|
<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'>DAFTAR 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>
|
|
<TableRow key="4">
|
|
<TableCell className='flex items-center justify-between'>D. Informasi tentang pristiwa yang meresahkan masyarakat. <EyeFilledIcon color="#DD8306" /></TableCell>
|
|
</TableRow>
|
|
<TableRow key="5">
|
|
<TableCell className='flex items-center justify-between'>E. Kecelakaan moda transportasi yang menarik perhatian masyarakat. <EyeFilledIcon color="#DD8306" /></TableCell>
|
|
</TableRow>
|
|
<TableRow key="6">
|
|
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
|
|
</TableRow>
|
|
<TableRow key="7">
|
|
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
|
|
</TableRow>
|
|
<TableRow key="8">
|
|
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
|
|
</TableRow>
|
|
<TableRow key="9">
|
|
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
|
|
</TableRow>
|
|
<TableRow key="10">
|
|
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
|
|
</TableRow>
|
|
<TableRow key="11">
|
|
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
|
|
</TableRow>
|
|
<TableRow key="12">
|
|
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
|
|
</TableRow>
|
|
<TableRow key="13">
|
|
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
|
|
</TableRow>
|
|
<TableRow key="14">
|
|
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
|
|
</TableRow>
|
|
<TableRow key="15">
|
|
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
|
|
</TableRow>
|
|
<TableRow key="16">
|
|
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
|
|
</TableRow>
|
|
<TableRow key="17">
|
|
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
|
|
</TableRow>
|
|
<TableRow key="18">
|
|
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
|
|
</TableRow>
|
|
<TableRow key="19">
|
|
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
|
|
</TableRow>
|
|
<TableRow key="20">
|
|
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
|
|
</TableRow>
|
|
<TableRow key="21">
|
|
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
|
|
</TableRow>
|
|
<TableRow key="22">
|
|
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
|
|
</TableRow>
|
|
<TableRow key="23">
|
|
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
|
|
</TableRow>
|
|
<TableRow key="24">
|
|
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
|
|
</TableRow>
|
|
<TableRow key="25">
|
|
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
|
|
</TableRow>
|
|
<TableRow key="26">
|
|
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
|
|
</TableRow>
|
|
<TableRow key="27">
|
|
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
|
|
</TableRow>
|
|
<TableRow key="28">
|
|
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
|
|
</TableRow>
|
|
<TableRow key="29">
|
|
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
|
|
</TableRow>
|
|
<TableRow key="30">
|
|
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
|
|
</TableRow>
|
|
<TableRow key="31">
|
|
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
|
|
</TableRow>
|
|
<TableRow key="32">
|
|
<TableCell className='flex items-center justify-between'>F. Informasi tentang ancaman/peristiwa peledakan bom. <EyeFilledIcon color="#DD8306" /></TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
|
|
</div>
|
|
</div>
|
|
<div className='w-auto md:w-[30%]'>
|
|
<PPIDSidebar />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|