Untitled

import { Table } from "react-daisyui";
import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
import { useState } from "react";

const Pagination = ({ params, paginationFunctions }) => {
  return (
    <div className={"flex items-center gap-4 my-2 text-sm"}>
      <div className={"flex-1 flex gap-4"}>
        <h3>
          <span className={"font-bold"}>Page {params.page}</span> of{" "}
          <span className={"font-bold"}>{params.totalPages}</span>
        </h3>
      </div>
      <div className={"flex-none flex gap-4"}>
        <button
          className={
            "border-2 border-orange-600 rounded text-orange-600 disabled:border-orange-300 disabled:text-orange-300"
          }
          onClick={() => {
            paginationFunctions.setPage(params.page - 1);
          }}
          disabled={params.page === 1}
        >
          <ChevronLeftIcon className={"h-6 w-6"} />
        </button>
        <button
          className={
            "border-2 border-orange-600 rounded text-orange-600 disabled:border-orange-300 disabled:text-orange-300"
          }
          onClick={() => {
            paginationFunctions.setPage(params.page + 1);
          }}
          disabled={params.page === params.totalPages}
        >
          <ChevronRightIcon className={"h-6 w-6"} />
        </button>
      </div>
    </div>
  );
};

const DataTable = ({
  columns,
  values = [],
  params = undefined,
  onDelete = undefined,
  onEdit = undefined,
  paginationFunctions = undefined,
  onSearch = undefined,
}) => {
  const [searchParams, setSearchParams] = useState(false);

  return (
    <div className={"my-4"}>
      {onSearch && (
        <div className={""}>
          <form
            onSubmit={(e) => {
              e.preventDefault();
              onSearch(searchParams);
            }}
          >
            <input
              type={"text"}
              className={"input border rounded border-orange-600 w-full"}
              placeholder={"Search"}
              onChange={(e) => setSearchParams(e.currentTarget.value)}
            />
          </form>
        </div>
      )}
      <Pagination params={params} paginationFunctions={paginationFunctions} />
      <Table className={"w-full"} zebra>
        <thead>
          <tr>
            {Object.keys(columns).map((key) => {
              return <th key={`column-${key}`}>{columns[key]}</th>;
            })}
            {onEdit || onDelete ? <th></th> : false}
          </tr>
        </thead>
        <tbody>
          {values.map((value) => {
            return (
              <tr key={`row-${value.id}`}>
                {Object.keys(columns).map((key) => {
                  return (
                    <td
                      key={`column-item-${key}-${value.id}`}
                      className={"text-ellipsis"}
                    >
                      {value[key]}
                    </td>
                  );
                })}
                {(onEdit || onDelete) && (
                  <td className={"flex gap-4 justify-end"}>
                    {onEdit && (
                      <button
                        className={
                          "bg-orange-600 text-xs text-white font-bold py-1 px-8 rounded"
                        }
                        onClick={onEdit(value)}
                      >
                        Edit
                      </button>
                    )}
                    {onDelete && (
                      <button
                        className={
                          "bg-red-600 text-xs text-white font-bold py-1 px-8 rounded"
                        }
                        onClick={onDelete(value)}
                      >
                        Delete
                      </button>
                    )}
                  </td>
                )}
              </tr>
            );
          })}
        </tbody>
      </Table>
      <Pagination params={params} paginationFunctions={paginationFunctions} />
    </div>
  );
};

export default DataTable;