function CityInputForm({ placeholder, value, onChange }) { return /*#__PURE__*/ React.createElement("input", { type: "text", name: "city", placeholder: placeholder, className: "w-full p-2 mb-4 border-2 border-[#B0BEC5] rounded-md font-roboto", value: value, onChange: onChange, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function CityInputFormStory() { const [city, setCity] = React.useState(""); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CityInputForm, { placeholder: "Введите название города", value: city, onChange: (e)=>setCity(e.target.value), __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this })); } function MainComponent() { const [city, setCity] = React.useState(''); const [weather, setWeather] = React.useState({ temp: '', humidity: '', wind: '' }); const [error, setError] = React.useState(''); const fetchWeather = async (e)=>{ e.preventDefault(); if (!city) { setError('Введите название города'); return; } setError(''); try { setWeather({ temp: '20°C', humidity: '60%', wind: '5 м/с' }); } catch (error) { setError('Ошибка при получении данных о погоде'); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#E0F7FA] p-4", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-roboto text-[#455A64] mb-6", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, "Просмотр погоды по России"), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col items-center w-full max-w-md", onSubmit: fetchWeather, __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(CityInputForm, { placeholder: "Введите название города", value: city, onChange: (e)=>setCity(e.target.value), __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-6 py-2 bg-[#29B6F6] text-white font-roboto rounded-md hover:bg-[#039BE5] transition-colors", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, "Показать погоду")), error && /*#__PURE__*/ React.createElement("div", { className: "text-red-500 font-roboto mt-4", __source: { fileName: "", lineNumber: 35, columnNumber: 17 }, __self: this }, error), /*#__PURE__*/ React.createElement("div", { className: "mt-8 w-full max-w-md bg-white p-6 rounded-lg shadow-lg font-roboto text-[#455A64]", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-lg mb-4", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, "Погода в ", city || '[название города]'), /*#__PURE__*/ React.createElement("div", { className: "mb-3", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, "🌡 Температура: ", weather.temp || '-'), /*#__PURE__*/ React.createElement("div", { className: "mb-3", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, "💧 Влажность: ", weather.humidity || '-'), /*#__PURE__*/ React.createElement("div", { className: "mb-3", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "🌬 Ветер: ", weather.wind || '-'))); }