web-humas-fe/components/detail/ListNews.tsx

'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>
    )
}