function MainComponent() { const [surfCondition, setSurfCondition] = React.useState(null); const [locationInput, setLocationInput] = React.useState(""); const [selectedMapLocation, setSelectedMapLocation] = React.useState(null); const [isMapClicked, setIsMapClicked] = React.useState(false); const handleLocationInputChange = (e)=>{ setLocationInput(e.target.value); setIsMapClicked(false); }; const handleMapClick = (e)=>{ const mapLocation = { latitude: e.nativeEvent.offsetY, longitude: e.nativeEvent.offsetX }; setSelectedMapLocation(mapLocation); setIsMapClicked(true); checkSurfCondition(mapLocation); }; const checkSurfCondition = (location)=>{ const condition = getSurfCondition(location); setSurfCondition(condition); }; const getSurfCondition = (location)=>{ return location && Math.random() > 0.5 ? 'good' : 'bad'; }; const handleUseCurrentLocation = ()=>{ if (navigator.geolocation) { navigator.geolocation.getCurrentPosition((position)=>{ const currentLocation = { latitude: position.coords.latitude, longitude: position.coords.longitude }; setIsMapClicked(false); setSelectedMapLocation(currentLocation); checkSurfCondition(currentLocation); }); } }; const handleSubmit = (e)=>{ e.preventDefault(); setIsMapClicked(false); checkSurfCondition(locationInput); }; const conditionEmoji = surfCondition === 'good' ? '👍' : '👎'; const mapboxSrc = selectedMapLocation ? `https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/pin-s-l+555555(${selectedMapLocation.longitude},${selectedMapLocation.latitude})/${selectedMapLocation.longitude},${selectedMapLocation.latitude},14/300x300?access_token=YOUR_MAPBOX_ACCESS_TOKEN` : null; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-4", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold font-roboto", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "Go 👍 or No 👎"), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-light font-roboto", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "Your ELI5 Surf Report")), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "w-full max-w-sm", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center border-b border-teal-500 py-2", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none", type: "text", placeholder: "Enter location", "aria-label": "Location", name: "location", disabled: isMapClicked, value: isMapClicked ? `${selectedMapLocation.latitude}, ${selectedMapLocation.longitude}` : locationInput, onChange: handleLocationInputChange, __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "flex-shrink-0 bg-teal-500 hover:bg-teal-700 border-teal-500 hover:border-teal-700 text-sm border-4 text-white py-1 px-2 rounded", type: "submit", disabled: isMapClicked, __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, "Check"))), /*#__PURE__*/ React.createElement("div", { className: "relative h-[300px] w-full bg-gray-300 mb-4 cursor-pointer", onClick: handleMapClick, __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, selectedMapLocation ? /*#__PURE__*/ React.createElement("img", { src: mapboxSrc, alt: "Selected location map", width: "100%", height: "100%", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }) : /*#__PURE__*/ React.createElement("span", { className: `absolute inset-0 m-auto h-8 w-8 text-center ${surfCondition ? 'visible' : 'invisible'}`, __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, conditionEmoji)), /*#__PURE__*/ React.createElement("button", { onClick: handleUseCurrentLocation, className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, "Use Current Location"), /*#__PURE__*/ React.createElement("div", { className: "text-4xl", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, !isMapClicked && surfCondition && conditionEmoji))); }