function MainComponent() { const [weather, setWeather] = React.useState([]); const [location, setLocation] = React.useState('取得中'); React.useEffect(()=>{ navigator.geolocation.getCurrentPosition((position)=>{ fetch(`https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&lat=${position.coords.latitude}&lon=${position.coords.longitude}&lang=ja`).then((response)=>response.json()).then((data)=>{ setWeather([ { name: data.location.name, condition: data.current.condition.text, icon: data.current.condition.icon, temperature: `${data.current.temp_c}℃` } ]); setLocation(data.location.name); }); }); }, []); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#3a3d40] flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-6 max-w-2xl bg-[#ffffff] rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-3xl mb-4 text-center font-roboto", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "天気予報"), /*#__PURE__*/ React.createElement("h3", { className: "font-semibold text-xl mb-2 text-center font-roboto", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, "現在地: ", location), /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, weather.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "text-center font-roboto", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, "天気データを取得中...") : weather.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-4 flex items-center justify-center", __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-semibold", __source: { fileName: "", lineNumber: 32, columnNumber: 17 }, __self: this }, item.name), /*#__PURE__*/ React.createElement("div", { className: "ml-4", __source: { fileName: "", lineNumber: 33, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: item.icon, alt: `${item.name} の天気アイコン`, className: "inline w-12 h-12", __source: { fileName: "", lineNumber: 34, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2 text-lg", __source: { fileName: "", lineNumber: 35, columnNumber: 19 }, __self: this }, item.temperature)), /*#__PURE__*/ React.createElement("div", { className: "ml-4 text-xl", __source: { fileName: "", lineNumber: 37, columnNumber: 17 }, __self: this }, item.condition))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 43, columnNumber: 5 }, __self: this }, ` body { background-image: url('/images/background-weather.jpg'); background-size: cover; background-position: center; } `)); }

天気予報

現在地: 取得中