125 lines
6.8 KiB
TypeScript
125 lines
6.8 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';
|
|
import Link from "next/link";
|
|
|
|
|
|
export default function ListNews() {
|
|
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 listNews = [
|
|
{
|
|
id: 1,
|
|
thumnbnail: '/headernews.png',
|
|
title: 'Divisi Humas Polri Gelar Bimtek Dan Uji Konsekuensi Informasi Di Maluku Utara',
|
|
date: "06 Maret, 2024 16:14 HUMAS POLRI",
|
|
description: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, rerum temporibus qui similique odio ducimus sit iure magnam consequatur dolore corrupti quisquam distinctio possimus et optio neque error earum quod!"
|
|
},
|
|
{
|
|
id: 2,
|
|
thumnbnail: '/headernews.png',
|
|
title: 'Divisi Humas Polri Gelar Bimtek Dan Uji Konsekuensi Informasi Di Maluku Utara',
|
|
date: "06 Maret, 2024 16:14 HUMAS POLRI",
|
|
description: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, rerum temporibus qui similique odio ducimus sit iure magnam consequatur dolore corrupti quisquam distinctio possimus et optio neque error earum quod!"
|
|
},
|
|
{
|
|
id: 3,
|
|
thumnbnail: '/headernews.png',
|
|
title: 'Divisi Humas Polri Gelar Bimtek Dan Uji Konsekuensi Informasi Di Maluku Utara',
|
|
date: "06 Maret, 2024 16:14 HUMAS ",
|
|
description: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, rerum temporibus qui similique odio ducimus sit iure magnam consequatur dolore corrupti quisquam distinctio possimus et optio neque error earum quod!"
|
|
},
|
|
{
|
|
id: 4,
|
|
thumnbnail: '/headernews.png',
|
|
title: 'Divisi Humas Polri Gelar Bimtek Dan Uji Konsekuensi Informasi Di Maluku Utara',
|
|
date: "06 Maret, 2024 16:14 HUMAS POLRI",
|
|
description: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, rerum temporibus qui similique odio ducimus sit iure magnam consequatur dolore corrupti quisquam distinctio possimus et optio neque error earum quod!"
|
|
},
|
|
{
|
|
id: 5,
|
|
thumnbnail: '/headernews.png',
|
|
title: 'Divisi Humas Polri Gelar Bimtek Dan Uji Konsekuensi Informasi Di Maluku Utara',
|
|
date: "06 Maret, 2024 16:14 HUMAS POLRI",
|
|
description: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, rerum temporibus qui similique odio ducimus sit iure magnam consequatur dolore corrupti quisquam distinctio possimus et optio neque error earum quod!"
|
|
},
|
|
{
|
|
id: 6,
|
|
thumnbnail: '/headernews.png',
|
|
title: 'Divisi Humas Polri Gelar Bimtek Dan Uji Konsekuensi Informasi Di Maluku Utara',
|
|
date: "06 Maret, 2024 16:14 HUMAS POLRI",
|
|
description: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, rerum temporibus qui similique odio ducimus sit iure magnam consequatur dolore corrupti quisquam distinctio possimus et optio neque error earum quod!"
|
|
},
|
|
{
|
|
id: 7,
|
|
thumnbnail: '/headernews.png',
|
|
title: 'Divisi Humas Polri Gelar Bimtek Dan Uji Konsekuensi Informasi Di Maluku Utara',
|
|
date: "06 Maret, 2024 16:14 HUMAS POLRI",
|
|
description: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, rerum temporibus qui similique odio ducimus sit iure magnam consequatur dolore corrupti quisquam distinctio possimus et optio neque error earum quod!"
|
|
},
|
|
{
|
|
id: 8,
|
|
thumnbnail: '/headernews.png',
|
|
title: 'Divisi Humas Polri Gelar Bimtek Dan Uji Konsekuensi Informasi Di Maluku Utara',
|
|
date: "06 Maret, 2024 16:14 HUMAS POLRI",
|
|
description: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, rerum temporibus qui similique odio ducimus sit iure magnam consequatur dolore corrupti quisquam distinctio possimus et optio neque error earum quod!"
|
|
},
|
|
{
|
|
id: 9,
|
|
thumnbnail: '/headernews.png',
|
|
title: 'Divisi Humas Polri Gelar Bimtek Dan Uji Konsekuensi Informasi Di Maluku Utara',
|
|
date: "06 Maret, 2024 16:14 HUMAS POLRI",
|
|
description: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, rerum temporibus qui similique odio ducimus sit iure magnam consequatur dolore corrupti quisquam distinctio possimus et optio neque error earum quod!"
|
|
},
|
|
|
|
]
|
|
|
|
return (
|
|
<div className='self-center mx-auto text-black py-5'>
|
|
<Breadcrumbs color="primary" >
|
|
<BreadcrumbItem href="/">Beranda</BreadcrumbItem>
|
|
<BreadcrumbItem>Berita</BreadcrumbItem>
|
|
</Breadcrumbs>
|
|
<div className="flex-wrap grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 pt-5 place-items-center gap-7">
|
|
{listNews.map((news) => (
|
|
<Link href={`/news/detail/${news.id}`}>
|
|
<div className="h-auto w-[300px] text-xs">
|
|
<div className="h-[50%]">
|
|
<img src={news.thumnbnail} alt="" className="w-max" />
|
|
</div>
|
|
<div className="px-3 py-3">
|
|
<div className="font-medium text-sm leading-5 ">{news.title}</div>
|
|
<div className="flex pb-1">
|
|
<div className="text-xs">{news.date}</div>
|
|
{/* <div>jam</div>
|
|
<div>creator</div> */}
|
|
</div>
|
|
<div className="text-clip">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis est quas soluta deserunt ullam. Sapiente facilis modi vitae. Aspernatur excepturi quo amet omnis laudantium inventore praesentium illum hic reiciendis error.</div>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|