function LandscapeSongGenerator({ placeName }) { const [inputPlaceName, setInputPlaceName] = React.useState(placeName || ""); const [landscapeInfo, setLandscapeInfo] = React.useState(""); const [schoolSong, setSchoolSong] = React.useState(""); const fetchLandscapeInfo = async ()=>{ const response = await fetch(`https://maps.googleapis.com/maps/api/place/textsearch/json?query=${inputPlaceName}&key=YOUR_API_KEY`); const data = await response.json(); if (data.results.length > 0) { const description = "周辺の土地の景観: " + data.results[0].formatted_address; setLandscapeInfo(description); generateSchoolSong(description); } else { setLandscapeInfo("情報が見つかりませんでした。"); } }; const generateSchoolSong = (info)=>{ setSchoolSong(`この美しい場所, ${info} に捧げる歌`); }; return /*#__PURE__*/ React.createElement("div", { className: "p-6 bg-[#f0ebe1]", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-4", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto text-[#334856]", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, "学校の校歌ジェネレーター"), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-roboto text-[#687980]", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, "地名: ", placeName), landscapeInfo && /*#__PURE__*/ React.createElement("p", { className: "text-sm font-roboto text-[#687980]", __source: { fileName: "", lineNumber: 29, columnNumber: 27 }, __self: this }, landscapeInfo), schoolSong && /*#__PURE__*/ React.createElement("p", { className: "text-sm font-roboto text-[#687980]", __source: { fileName: "", lineNumber: 30, columnNumber: 24 }, __self: this }, schoolSong)), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "shadow-lg p-2 w-full max-w-sm rounded border border-[#cdd9e5]", type: "text", placeholder: "地名を入力", name: "placeNameInput", value: inputPlaceName, onChange: (e)=>setInputPlaceName(e.target.value), __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "ml-3 bg-[#5b8c85] hover:bg-[#4a766e] text-white font-semibold py-2 px-4 border border-[#4a766e] rounded", onClick: fetchLandscapeInfo, __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, "情報取得"))); } function LandscapeSongGeneratorStory() { return /*#__PURE__*/ React.createElement("div", { className: "m-4", __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(LandscapeSongGenerator, { placeName: "京都", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(LandscapeSongGenerator, { placeName: "東京", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(LandscapeSongGenerator, { placeName: "札幌", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this })); } function MainComponent({ placeName }) { const [inputPlaceName, setInputPlaceName] = React.useState(placeName || ""); const [landscapeInfo, setLandscapeInfo] = React.useState(""); const [schoolSong, setSchoolSong] = React.useState(""); const fetchLandscapeInfo = async ()=>{ const response = await fetch(`https://maps.googleapis.com/maps/api/place/textsearch/json?query=${inputPlaceName}&key=YOUR_API_KEY`); const data = await response.json(); if (data.results.length > 0) { const description = "周辺の土地の景観: " + data.results[0].formatted_address; setLandscapeInfo(description); generateSchoolSong(description); } else { setLandscapeInfo("情報が見つかりませんでした。"); } }; const generateSchoolSong = (info)=>{ setSchoolSong(`この美しい場所, ${info} に捧げる歌`); }; return /*#__PURE__*/ React.createElement("div", { className: "p-6 bg-[#f0ebe1]", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-4", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto text-[#334856]", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, "学校の校歌ジェネレーター"), landscapeInfo && /*#__PURE__*/ React.createElement("p", { className: "text-sm font-roboto text-[#687980]", __source: { fileName: "", lineNumber: 28, columnNumber: 27 }, __self: this }, landscapeInfo), schoolSong && /*#__PURE__*/ React.createElement("p", { className: "text-sm font-roboto text-[#687980]", __source: { fileName: "", lineNumber: 29, columnNumber: 24 }, __self: this }, schoolSong)), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "shadow-lg p-2 w-full max-w-sm rounded border border-[#cdd9e5]", type: "text", placeholder: "地名を入力", name: "placeNameInput", value: inputPlaceName, onChange: (e)=>setInputPlaceName(e.target.value), __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "ml-3 bg-[#5b8c85] hover:bg-[#4a766e] text-white font-semibold py-2 px-4 border border-[#4a766e] rounded", onClick: fetchLandscapeInfo, __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "情報取得"))); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { className: "m-4", __source: { fileName: "", lineNumber: 53, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { placeName: "京都", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { placeName: "東京", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { placeName: "札幌", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this })); }