function MainComponent() { const [places, setPlaces] = React.useState([ { name: 'Example Place', address: '123 Example Street' } ]); const handleAddPlace = (e)=>{ e.preventDefault(); const formData = new FormData(e.target); const newPlace = { name: formData.get('placeName'), address: formData.get('address') }; setPlaces([ ...places, newPlace ]); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-roboto mb-4", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, "Localisation Places"), /*#__PURE__*/ React.createElement("form", { className: "mb-4", onSubmit: handleAddPlace, __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "placeName", className: "block text-sm font-roboto mb-1", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, "Place Name"), /*#__PURE__*/ React.createElement("input", { id: "placeName", name: "placeName", type: "text", className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "address", className: "block text-sm font-roboto mb-1", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, "Address"), /*#__PURE__*/ React.createElement("input", { id: "address", name: "address", type: "text", className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, "Add Place")), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full bg-white border border-gray-300", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "py-2 px-4 border-b font-roboto text-left", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, "Name"), /*#__PURE__*/ React.createElement("th", { className: "py-2 px-4 border-b font-roboto text-left", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, "Address"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, places.map((place, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "py-2 px-4 border-b font-roboto", __source: { fileName: "", lineNumber: 41, columnNumber: 17 }, __self: this }, place.name), /*#__PURE__*/ React.createElement("td", { className: "py-2 px-4 border-b font-roboto", __source: { fileName: "", lineNumber: 42, columnNumber: 17 }, __self: this }, place.address))))))); }