CrudPanel.js

import React from "react";

import { Modal } from "src/components";

const CrudPanel = ({ key, data, tableFields, entryFields, operations }) => {
  const [isModalVisible, setIsModalVisible] = React.useState(false);
  const openModal = () => setIsModalVisible(true);
  const closeModal = () => setIsModalVisible(false);

  return (
    <React.Fragment>
      {/* *********** */}
      {/* CRUD Header */}
      {/* *********** */}
      <div className="flex justify-between">
        <div className="flex items-center">
          <h2 className="text-orange-400 font-bold text-2xl">Produtos</h2>
          <button
            className="ml-4 bg-orange-400 rounded text-white shadow px-3 py-1 items-center"
            onClick={openModal}
          >
            <i className="fa fa-plus-circle fa-xs mr-2"></i>
            Novo Produto
          </button>
        </div>
        <div className="flex items-center">
          <div className="bg-gray-700 rounded-full p-3 text-white shadow">
            <i className="fa fa-filter fa-sm"></i>
          </div>
          <div className="bg-gray-700 rounded-full p-3 text-white ml-4 shadow">
            <i className="fa fa-search fa-sm"></i>
          </div>
        </div>
      </div>

      {/* **** */}
      {/* List */}
      {/* **** */}
      <div className="mt-8">
        {/* List Header */}
        <div className="flex font-bold border-b-2 bg-gray-200 border-gray-400 p-4">
          {tableFields.map((field) => (
            <p className={`${field.className} md:w-${field.colSize}/12`}>
              {field.label ?? field.name}
            </p>
          ))}
          <p className="md:w-1/12">&nbsp;</p>
        </div>

        {/* List Items */}
        {data.map((entry) => (
          <div className="flex border-b-2 border-gray-200 p-4">
            {tableFields.map((field) => (
              <p className={`${field.className} md:w-${field.colSize}/12`}>
                {typeof field.render === "function"
                  ? field.render(entry)
                  : entry[field.name]}
              </p>
            ))}

            {/* <p className="md:w-2/12">Foto</p>
            <p className="md:w-5/12">
              Produto muito interessante sendo vendido nos PetShops
            </p>
            <p className="md:w-2/12">R$ 19,90</p>
            <p className="md:w-2/12">10</p> */}

            <p className="md:w-1/12">
              <i className="fa fa-trash text-gray-600"></i>
            </p>
          </div>
        ))}
      </div>

      {/* ******************** */}
      {/* Add/Edit Entry Modal */}
      {/* ******************** */}
      <Modal visible={isModalVisible} closeModal={closeModal}>
        Test
      </Modal>
    </React.Fragment>
  );
};

export default CrudPanel;

Screen.js

import React from "react";
import { Link } from "react-router-dom";
import { CrudPanel } from "src/components";
import { SAMPLE_PRODUCTS } from "src/utils/sample_data";

const CompanyListScreen = () => {
  return (
    <div className="h-full">
      <div className="grid md:grid-cols-5 grid-cols-1 gap-4 h-full">
        <div className="md:col-span-1 bg-orange-300 text-gray-900 shadow-md">
          <h1 className="text-2xl font-bold p-4">ADMIN</h1>
          <div className="mt-4 bg-orange-400 py-3 px-4 font-bold">
            <Link>
              <i className="fa fa-shopping-bag w-10"></i>
              Produtos
            </Link>
          </div>
          <div className="py-3 px-4 font-bold">
            <Link>
              <i className="fa fa-file-alt w-10"></i>
              Pedidos
            </Link>
          </div>
          <div className="py-3 px-4 font-bold">
            <Link>
              <i className="fa fa-store w-10"></i>
              Empresas
            </Link>
          </div>
        </div>
        <div className="md:col-span-4">
          <div className="p-4">
            <CrudPanel
              key="_id"
              data={SAMPLE_PRODUCTS}
              tableFields={[
                {
                  name: "image",
                  label: "Foto",
                  render: (item) => (
                    <img style={{ width: 50 }} src={item.image} />
                  ),
                  colSize: 1,
                },
                {
                  name: "name",
                  label: "Nome",
                  colSize: 6,
                },
                {
                  name: "price",
                  label: "Preço",
                  colSize: 2,
                },
                {
                  name: "amount",
                  label: "Estoque",
                  colSize: 2,
                },
              ]}
              entryFields={[]}
              dataProvider={{
                add: () => {},
                edit: () => {},
                getInitialData: () => {},
                getMoreData: () => {},
                remove: () => {},
                search: () => {},
              }}
            />
          </div>
        </div>
      </div>
    </div>
  );
};

export default CompanyListScreen;