function MainComponent() { const [forecastData, setForecastData] = React.useState([]); const clothingAdvice = (temp)=>{ if (temp < 10) return "温かい服"; if (temp < 20) return "軽めのジャケット"; return "半袖と短パン"; }; React.useEffect(()=>{ fetch('/integrations/weather-by-city/weather/Chiyoda').then((response)=>response.json()).then((data)=>{ // Assuming that the returned data includes a forecast property for a week's forecast const today = new Date(data.location.localtime); const forecast = data.forecast.forecastday.slice(1, 8).map((dayForecast, i)=>{ const date = new Date(today); date.setDate(today.getDate() + (i + 1)); const day = date.toLocaleDateString('ja-JP', { weekday: 'long' }); return { day, condition: dayForecast.day.condition.text, temp: `${dayForecast.day.mintemp_c}°C / ${dayForecast.day.maxtemp_c}°C`, icon: dayForecast.day.condition.icon, advice: clothingAdvice(dayForecast.day.mintemp_c) }; }); setForecastData(forecast); }); }, []); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f8ff] p-4", __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-crimson-text mb-4", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, "千代田区の天気予報"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-3 lg:grid-cols-7", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, forecastData.map((forecast, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white shadow-md rounded-lg p-4 text-center", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: forecast.icon, alt: `${forecast.condition} weather in Chiyoda`, className: "mx-auto w-[64px] h-[64px]", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, forecast.day), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, forecast.condition), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, forecast.temp), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-blue-500", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, forecast.advice))))); }