function MainComponent() { const [selectedState, setSelectedState] = React.useState(null); const [selectedCity, setSelectedCity] = React.useState(null); const [searchTerm, setSearchTerm] = React.useState(''); const states = [ "Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming" ]; const cities = { "Alabama": [ "Birmingham", "Montgomery" ], "California": [ "Los Angeles", "San Francisco", "San Diego" ], "Texas": [ "Houston", "Dallas", "Austin", "San Antonio" ] }; const weatherInfo = { "Birmingham": { temp: "29°C", rain: "20%", dateTime: "3:00 PM, Oct 5", futureRain: "20%" }, "Montgomery": { temp: "31°C", rain: "15%", dateTime: "3:00 PM, Oct 5", futureRain: "10%" }, "Los Angeles": { temp: "25°C", rain: "0%", dateTime: "12:00 PM, Oct 5", futureRain: "N/A" }, "San Francisco": { temp: "18°C", rain: "10%", dateTime: "12:00 PM, Oct 5", futureRain: "N/A" }, "San Diego": { temp: "22°C", rain: "0%", dateTime: "12:00 PM, Oct 5", futureRain: "N/A" }, "Houston": { temp: "33°C", rain: "30%", dateTime: "1:00 PM, Oct 5", futureRain: "25%" }, "Dallas": { temp: "32°C", rain: "10%", dateTime: "1:00 PM, Oct 5", futureRain: "15%" }, "Austin": { temp: "35°C", rain: "20%", dateTime: "1:00 PM, Oct 5", futureRain: "10%" }, "San Antonio": { temp: "34°C", rain: "25%", dateTime: "1:00 PM, Oct 5", futureRain: "20%" } }; const filteredStates = states.filter((state)=>state.toLowerCase().includes(searchTerm.toLowerCase())); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-r from-blue-500 to-green-500 text-white p-8 font-crimson-text", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, !selectedCity && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-extrabold mb-8 text-center", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "Latest Weather Updates 🌦️"), /*#__PURE__*/ React.createElement("div", { className: "text-center mb-4", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", placeholder: "Search for a state...", className: "p-2 rounded text-black w-full max-w-[400px] mb-4", value: searchTerm, onChange: (e)=>setSearchTerm(e.target.value), __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-4 justify-center", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, filteredStates.map((state)=>/*#__PURE__*/ React.createElement("button", { key: state, className: "bg-[#ffffff] text-[#000000] px-4 py-2 rounded transform hover:scale-105 transition", onClick: ()=>{ setSelectedState(state); setSelectedCity(null); }, __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }, state)))), selectedState && !selectedCity && /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold mb-4 text-center", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, "Cities in ", selectedState), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-4 justify-center", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, cities[selectedState] && cities[selectedState].map((city)=>{ const { temp, rain, dateTime, futureRain } = weatherInfo[city]; return /*#__PURE__*/ React.createElement("div", { key: city, className: "p-4 text-center bg-[#000000] text-[#ffffff] rounded transition", __source: { fileName: "", lineNumber: 84, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#ffffff] text-[#000000] px-4 py-2 rounded transform hover:scale-105 transition", onClick: ()=>setSelectedCity(city), __source: { fileName: "", lineNumber: 85, columnNumber: 19 }, __self: this }, city), /*#__PURE__*/ React.createElement("p", { className: "mt-2", __source: { fileName: "", lineNumber: 91, columnNumber: 19 }, __self: this }, "Temp: ", temp), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 92, columnNumber: 19 }, __self: this }, "Rain: ", rain), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 93, columnNumber: 19 }, __self: this }, "Time: ", dateTime), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 94, columnNumber: 19 }, __self: this }, "Future Rain: ", futureRain)); }))), selectedCity && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 flex flex-col justify-center items-center bg-[#ffffff] text-[#000000] p-8 transition transform scale-105", __source: { fileName: "", lineNumber: 103, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold mb-4", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, "Weather in ", selectedCity), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-2xl", __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }, "Temp: ", weatherInfo[selectedCity].temp), /*#__PURE__*/ React.createElement("p", { className: "text-2xl", __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this }, "Rain: ", weatherInfo[selectedCity].rain), /*#__PURE__*/ React.createElement("p", { className: "text-2xl", __source: { fileName: "", lineNumber: 110, columnNumber: 13 }, __self: this }, "Date/Time: ", weatherInfo[selectedCity].dateTime), /*#__PURE__*/ React.createElement("p", { className: "text-2xl", __source: { fileName: "", lineNumber: 111, columnNumber: 13 }, __self: this }, "Future Rain: ", weatherInfo[selectedCity].futureRain)), /*#__PURE__*/ React.createElement("img", { src: `./images/${selectedCity.toLowerCase().replace(/ /g, "_")}.jpg`, alt: `Current weather in ${selectedCity}`, className: "w-[300px] h-[200px] mb-4 rounded-md", __source: { fileName: "", lineNumber: 113, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white px-4 py-2 rounded transform hover:scale-105 transition", onClick: ()=>{ setSelectedCity(null); setSelectedState(null); }, __source: { fileName: "", lineNumber: 118, columnNumber: 11 }, __self: this }, "Back to States")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 129, columnNumber: 7 }, __self: this }, ` .transition { transition: all 0.5s ease-in-out; } .transform { transform: scale(1); } `)); }