function MainComponent() { const [products, setProducts] = React.useState([]); const [formMode, setFormMode] = React.useState("view"); // view, insert, update const [currentProduct, setCurrentProduct] = React.useState(null); const handleInputChange = (event)=>{ const { name, value } = event.target; setCurrentProduct({ ...currentProduct, [name]: value }); }; const submitProduct = (event)=>{ event.preventDefault(); if (formMode === "insert") { setProducts([ ...products, currentProduct ]); } else if (formMode === "update") { setProducts(products.map((product)=>product.id === currentProduct.id ? currentProduct : product)); } setCurrentProduct(null); setFormMode("view"); }; const deleteProduct = (productId)=>{ setProducts(products.filter((product)=>product.id !== productId)); }; const handleAddButtonClick = ()=>{ setCurrentProduct({ id: Date.now(), name: "", price: "", type: "food" }); setFormMode("insert"); }; const handleEditButtonClick = (product)=>{ setCurrentProduct(product); setFormMode("update"); }; let formContent; if (formMode === "view") { formContent = /*#__PURE__*/ React.createElement("button", { onClick: handleAddButtonClick, type: "button", className: "px-4 py-2 bg-[#0d6efd] text-white font-semibold hover:bg-[#0b5ed7] transition-colors rounded", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, "Add Food"); } else { formContent = /*#__PURE__*/ React.createElement("form", { onSubmit: submitProduct, className: "flex flex-col gap-3", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", className: "p-2 border-2 border-gray-300 rounded", placeholder: "Product Name", value: currentProduct.name, onChange: handleInputChange, __source: { fileName: "", lineNumber: 48, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "price", className: "p-2 border-2 border-gray-300 rounded", placeholder: "Price", value: currentProduct.price, onChange: handleInputChange, __source: { fileName: "", lineNumber: 56, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-[#198754] text-white font-semibold hover:bg-[#157347] transition-colors rounded", __source: { fileName: "", lineNumber: 64, columnNumber: 17 }, __self: this }, "Save Food")); } return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, formContent), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full text-sm text-left text-gray-500", __source: { fileName: "", lineNumber: 77, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "text-xs text-gray-700 uppercase bg-gray-50", __source: { fileName: "", lineNumber: 78, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 79, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("th", { scope: "col", className: "py-3 px-6", __source: { fileName: "", lineNumber: 80, columnNumber: 29 }, __self: this }, "PRODUCT NAME"), /*#__PURE__*/ React.createElement("th", { scope: "col", className: "py-3 px-6", __source: { fileName: "", lineNumber: 81, columnNumber: 29 }, __self: this }, "PRICE"), /*#__PURE__*/ React.createElement("th", { scope: "col", className: "py-3 px-6", __source: { fileName: "", lineNumber: 82, columnNumber: 29 }, __self: this }, "TYPE"), /*#__PURE__*/ React.createElement("th", { scope: "col", className: "py-3 px-6", __source: { fileName: "", lineNumber: 83, columnNumber: 29 }, __self: this }, "ACTIONS"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 86, columnNumber: 21 }, __self: this }, products.map((product)=>/*#__PURE__*/ React.createElement("tr", { className: "bg-white border-b", key: product.id, __source: { fileName: "", lineNumber: 88, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "py-4 px-6", __source: { fileName: "", lineNumber: 89, columnNumber: 33 }, __self: this }, product.name), /*#__PURE__*/ React.createElement("td", { className: "py-4 px-6", __source: { fileName: "", lineNumber: 90, columnNumber: 33 }, __self: this }, product.price), /*#__PURE__*/ React.createElement("td", { className: "py-4 px-6", __source: { fileName: "", lineNumber: 91, columnNumber: 33 }, __self: this }, "Food"), /*#__PURE__*/ React.createElement("td", { className: "py-4 px-6", __source: { fileName: "", lineNumber: 92, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleEditButtonClick(product), type: "button", className: "font-medium text-[#0d6efd] hover:underline mr-2", __source: { fileName: "", lineNumber: 93, columnNumber: 37 }, __self: this }, "Edit"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>deleteProduct(product.id), type: "button", className: "font-medium text-[#dc3545] hover:underline", __source: { fileName: "", lineNumber: 96, columnNumber: 37 }, __self: this }, "Delete")))))))); }