web-humas-fe/components/table/informasi-sertamerta.tsx

"use client";
import {
  BreadcrumbItem,
  Breadcrumbs,
  Button,
  Input,
  Select,
  SelectItem,
  SelectSection,
  Table,
  TableBody,
  TableCell,
  TableColumn,
  TableHeader,
  TableRow,
} from "@heroui/react";
import { EyeFilledIcon, SearchIcon } from "../icons";
import PPIDSidebar from "../layout/portal-ppid/PPIDSidebar";

export default function InformasiSertaMerta() {
  const searchInput = (
    <Input
      aria-label="Search"
      className="w-full"
      classNames={{
        inputWrapper: "bg-white hover:!bg-gray-100",
        input: "text-sm",
        innerWrapper: "text-red-500",
      }}
      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 filters = [
    { 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-2/3 lg:w-[75%] px-2 md:px-0 lg:px-5 text-black">
        <div className="p-1 md:p-5 lg:p-8">
          <div className="font-bold text-xl">Informasi Serta Merta</div>
          <div className="pt-2">
            <Breadcrumbs color="primary">
              <BreadcrumbItem>Beranda</BreadcrumbItem>
              <BreadcrumbItem>Informasi Publik</BreadcrumbItem>
              <BreadcrumbItem>Informasi Serta Merta</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 Serta Merta
            </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>
                  {filters.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>
                  {filters.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>
                  </TableBody>
                </Table>
              </div>
            </div>
          </div>
        </div>
        <div></div>
      </div>
      <div className="w-auto md:w-1/3 lg:w-[25%]">
        <PPIDSidebar />
      </div>
    </div>
  );
}