function CompactWeatherApp({ weatherData, handleSearch }) { return /*#__PURE__*/ React.createElement("div", { className: "w-[320px] h-[400px] mx-auto mt-10 p-4 rounded-lg shadow-lg bg-[#f0f4f8]", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-lg font-medium text-[#333]", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, "Weather App"), /*#__PURE__*/ React.createElement("i", { className: `fas ${weatherData.icon} text-[#333] text-xl`, __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-4", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSearch, className: "w-full flex", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "city", placeholder: "Enter city name", className: "w-[200px] p-2 rounded-lg border border-[#ddd] focus:outline-none focus:ring-2 focus:ring-[#1e90ff] font-roboto text-sm", __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "ml-2 p-2 rounded-lg bg-[#1e90ff] text-white font-roboto text-sm", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, "Search"))), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-[#555]", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, "City: ", /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 22, columnNumber: 62 }, __self: this }, weatherData.city)), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-[#555]", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, "Temperature: ", /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 23, columnNumber: 69 }, __self: this }, weatherData.temperature, " °C")), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-[#555]", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "Condition: ", /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 24, columnNumber: 67 }, __self: this }, weatherData.condition)), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-[#555]", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, "Humidity: ", /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 25, columnNumber: 66 }, __self: this }, weatherData.humidity, "%")), /*#__PURE__*/ React.createElement("i", { className: `fas ${weatherData.icon} text-[#f4a261] text-4xl mt-4`, __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }))); } function CompactWeatherAppStory() { const mockWeatherData = { city: "New York", temperature: 20, condition: "Cloudy", humidity: 65, icon: "fa-cloud" }; const handleSearch = (event)=>{ event.preventDefault(); // Mock search logic console.log("Search initiated for city:", event.target.city.value); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 48, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CompactWeatherApp, { weatherData: mockWeatherData, handleSearch: handleSearch, __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this })); } function MainComponent() { const [weatherData, setWeatherData] = React.useState({ city: '--', temperature: '--', condition: '--', humidity: '--', icon: 'fa-sun' }); const fetchWeather = async (city)=>{ setWeatherData({ city: 'Sample City', temperature: '25', condition: 'Clear', humidity: '60', icon: 'fa-sun' }); }; const handleSearch = (event)=>{ event.preventDefault(); const city = event.target.elements.city.value; fetchWeather(city); }; return /*#__PURE__*/ React.createElement(CompactWeatherApp, { weatherData: weatherData, handleSearch: handleSearch, __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }); }