function SkyStyleWeatherApp({ city, onCityChange, weather, clothingSuggestion }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center font-roboto", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-bold text-[100px] text-black", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "SKY STYLE"), /*#__PURE__*/ React.createElement("h2", { className: "text-[25px] text-black", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, "Today's weather attire"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "city", value: city, onChange: onCityChange, className: "w-[200%] h-[120%] border-black rounded bg-white text-[16px] text-black p-2 mt-4", placeholder: "Enter city", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }), weather && /*#__PURE__*/ React.createElement("div", { className: "flex mt-8", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(WeatherImage, { src: "/images/sunny.jpg", alt: "Sunny weather", overlayText: "Sunny", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement(WeatherImage, { src: "/images/rainy.jpg", alt: "Rainy weather", overlayText: "Rainy", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-center", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, weather && /*#__PURE__*/ React.createElement("div", { className: "text-black", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, `Temperature: ${weather.current.temp_c}°C`), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, `Suggestion: ${clothingSuggestion}`)))); } function WeatherImage({ src, alt, overlayText }) { return /*#__PURE__*/ React.createElement("div", { className: "relative w-1/2 p-2", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: src, alt: alt, className: "rounded-[30px] w-full", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-white italic text-[50px]", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, overlayText))); } function SkyStyleWeatherAppStory() { const [city, setCity] = React.useState(''); const [weather, setWeather] = React.useState(null); const [clothingSuggestion, setClothingSuggestion] = React.useState(''); React.useEffect(()=>{ if (city !== "") { fetch(`/integrations/weather-by-city/weather/${city}`).then((response)=>response.json()).then((data)=>{ setWeather(data); const temperature = data.current.temp_c; if (temperature >= 25) { setClothingSuggestion('T-shirt and shorts'); } else if (temperature >= 15) { setClothingSuggestion('Long-sleeve shirt and pants'); } else if (temperature >= 5) { setClothingSuggestion('Jacket and jeans'); } else { setClothingSuggestion('Coat, scarf, and gloves'); } }); } }, [ city ]); const handleCityChange = (event)=>{ setCity(event.target.value); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 85, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SkyStyleWeatherApp, { city: city, onCityChange: handleCityChange, weather: weather, clothingSuggestion: clothingSuggestion, __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this })); } function Component({ src, alt }) { return /*#__PURE__*/ React.createElement("div", { className: "w-1/2", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/c1603d2d-3d29-428e-b48a-713a1d897557/", alt: alt, className: "h-full w-full object-cover", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this })); } function ComponentStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Component, { src: "/images/rainy_park.jpg", alt: "雨の公園", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this })); } function MainComponent() { const [city, setCity] = React.useState(''); const [date, setDate] = React.useState(''); const [weather, setWeather] = React.useState(null); const [clothingSuggestion, setClothingSuggestion] = React.useState(''); const [gender, setGender] = React.useState('mens'); const [recommendations, setRecommendations] = React.useState([]); React.useEffect(()=>{ if (city !== "" && date !== "") { fetch(`/integrations/weather-by-city/weather/${city}`).then((response)=>response.json()).then((data)=>{ setWeather(data); const temperature = data.current.temp_c; let suggestion = ''; if (temperature >= 25) { suggestion = 'T-shirt and shorts'; } else if (temperature >= 15) { suggestion = 'Long-sleeve shirt and pants'; } else if (temperature >= 5) { suggestion = 'Jacket and jeans'; } else { suggestion = 'Coat, scarf, and gloves'; } setClothingSuggestion(suggestion); fetch(`/integrations/google-search/search?q=${gender}+${suggestion.replace(/ /g, '+')}+site:zozo.jp`).then((response)=>response.json()).then((result)=>{ setRecommendations(result.items.slice(0, 3)); }); }); } }, [ city, date, gender ]); const handleCityChange = (event)=>{ setCity(event.target.value); }; const handleDateChange = (event)=>{ setDate(event.target.value); }; const handleGenderChange = (event)=>{ setGender(event.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-row font-roboto w-full h-screen", __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-1/2", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(Component, { src: "/images/rainy_park.jpg", alt: "Rainy park", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-1/2 flex items-center justify-center", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(SkyStyleWeatherApp, { city: city, date: date, onCityChange: handleCityChange, onDateChange: handleDateChange, weather: weather, clothingSuggestion: clothingSuggestion, gender: gender, onGenderChange: handleGenderChange, recommendations: recommendations, __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, ` .rainbow-text { background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet); -webkit-background-clip: text; color: transparent; } `)); } function SkyStyleWeatherApp({ city, date, weather, clothingSuggestion, gender, onCityChange, onDateChange, onGenderChange, recommendations }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center font-roboto", __source: { fileName: "", lineNumber: 79, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-bold text-[100px] rainbow-text", __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }, "SKY STYLE"), /*#__PURE__*/ React.createElement("h2", { className: "text-[25px] text-black", __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this }, "Today's weather attire"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "city", value: city, onChange: onCityChange, className: "w-[33%] h-[120%] border-[#000000] rounded bg-white text-[16px] text-black p-2 mt-4", placeholder: "Enter city", __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "date", name: "date", value: date, onChange: onDateChange, className: "w-[33%] h-[120%] border-[#000000] rounded bg-white text-[16px] text-black p-2 mt-4", placeholder: "Select date", __source: { fileName: "", lineNumber: 90, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 98, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("select", { name: "gender", value: gender, onChange: onGenderChange, className: "w-[33%] h-[120%] border-[#000000] rounded bg-white text-[16px] text-black p-2 mt-4", __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "mens", __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, "Mens"), /*#__PURE__*/ React.createElement("option", { value: "womens", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, "Womens"))), weather && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-center", __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-black", __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }, `Temperature: ${weather.current.temp_c}°C`), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }, `Weather: ${weather.current.condition.text}`), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this }, `Suggestion: ${clothingSuggestion}`))), recommendations.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 114, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 115, columnNumber: 11 }, __self: this }, recommendations.map((item, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "text-black", __source: { fileName: "", lineNumber: 117, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: item.link, target: "_blank", rel: "noopener noreferrer", __source: { fileName: "", lineNumber: 118, columnNumber: 17 }, __self: this }, item.title)))))); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 130, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { __source: { fileName: "", lineNumber: 131, columnNumber: 7 }, __self: this })); }