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 Link from "next/link";
import { SearchIcon } from "../icons";

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}`} key={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>
  );
}