function MainComponent() { const [city, setCity] = React.useState(''); const [weatherInfo, setWeatherInfo] = React.useState(null); const fetchWeather = async (event)=>{ event.preventDefault(); if (!city) return; const response = await fetch(`/integrations/weather-by-city/weather/${city}`, { method: 'GET' }); const data = await response.json(); setWeatherInfo(data); }; const handleChange = (event)=>{ setCity(event.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-screen overflow-hidden", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 w-full h-full bg-[url('/images/waves.jpg')] bg-cover bg-no-repeat", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 w-full h-full bg-black opacity-50", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center space-y-8", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[#FFFFFF] font-roboto text-5xl", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, "Welcome to Your Wellness Zone"), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col items-center space-y-4", onSubmit: fetchWeather, __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "city", type: "text", placeholder: "Enter your city", className: "w-[300px] p-2 rounded-lg font-roboto placeholder:text-[#000]", value: city, onChange: handleChange, __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#FFFFFF] p-2 w-[150px] rounded-lg font-roboto text-[#000]", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, "Check Weather")), weatherInfo && /*#__PURE__*/ React.createElement("div", { className: "text-[#FFFFFF] font-roboto text-lg", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, `Location: ${weatherInfo.location.name}, ${weatherInfo.location.region}, ${weatherInfo.location.country}`), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, `Temperature: ${weatherInfo.current.temp_c}°C / ${weatherInfo.current.temp_f}°F`), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, `Condition: ${weatherInfo.current.condition.text}`), /*#__PURE__*/ React.createElement("img", { src: `https:${weatherInfo.current.condition.icon}`, alt: "Weather condition icon", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, ` @keyframes wave { 0% { background-position: 0 0; } 100% { background-position: 1000px 0; } } `)); }