function MainComponent() { const [coordinatesList, setCoordinatesList] = React.useState([]); const [newCoordinates, setNewCoordinates] = React.useState(''); const [newSignature, setNewSignature] = React.useState(''); const handleCoordinateChange = (e)=>{ setNewCoordinates(e.target.value); }; const handleSignatureChange = (e)=>{ setNewSignature(e.target.value); }; const handleSubmit = (e)=>{ e.preventDefault(); if (newCoordinates && newSignature) { setCoordinatesList([ ...coordinatesList, { coordinates: newCoordinates, signature: newSignature } ]); setNewCoordinates(''); setNewSignature(''); } }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto flex flex-col items-center p-4 bg-[#f7f7f7] min-h-screen", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl text-[#121212] mb-6", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, "Coordinate Storage"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "flex flex-col w-full max-w-md mb-8", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "p-2 border border-gray-300 mb-4", type: "text", name: "coordinates", placeholder: "Enter coordinates", value: newCoordinates, onChange: handleCoordinateChange, __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "p-2 border border-gray-300 mb-4", type: "text", name: "signature", placeholder: "Enter signature", value: newSignature, onChange: handleSignatureChange, __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, "Save Coordinates")), /*#__PURE__*/ React.createElement("ul", { className: "w-full max-w-md list-disc", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, coordinatesList.map((item, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex justify-between items-center mb-2 bg-white p-4 border border-gray-300", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: `geo:${item.coordinates.replace(/ /g, '')}`, className: "text-blue-600 hover:underline", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, item.signature, "'s location - ", item.coordinates), /*#__PURE__*/ React.createElement("span", { className: "px-3 py-1 bg-gray-200 text-gray-800", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, item.signature))))); }