function LyricLocationInput({ placeholder, onFocus, onBlur }) { return /*#__PURE__*/ React.createElement("input", { type: "text", id: "location", name: "location", placeholder: placeholder, className: "w-full h-12 px-3 border rounded shadow-sm focus:outline-none focus:ring-2 focus:ring-[#5B9BD5] focus:border-transparent", onFocus: onFocus, onBlur: onBlur, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function LyricLocationInputStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(LyricLocationInput, { placeholder: "例：京都", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this })); } function SearchButtonDesign({ onClick }) { return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "h-12 px-6 font-bold rounded bg-[#5B9BD5] text-white", onClick: onClick, __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "検索")); } function SearchButtonDesignStory() { const handleSearchClick = ()=>{ console.log("Search button clicked"); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SearchButtonDesign, { onClick: handleSearchClick, __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this })); } function MainComponent() { const [location, setLocation] = React.useState(''); const [lyrics, setLyrics] = React.useState('ここに抽出された情報が表示されます'); const fetchMapInfo = async ()=>{ const locationInfo = fetch(`https://api.geoapify.com/v1/geocode/search?text=${location}&apiKey=YOUR_API_KEY`).then((response)=>response.json()); const mapDetails = await locationInfo; const { features } = mapDetails; const naturalFeatures = features.map((feature)=>`${feature.properties.category}: ${feature.properties.name}`).join(', '); setLyrics(`初めての場所に降り立った時、${naturalFeatures}が目に映った。`); }; const handleSearchClick = ()=>{ fetchMapInfo(); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#F0F8FF] p-4", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "location", className: "block mb-2 text-lg font-roboto text-[#333]", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, "地名を入力してください:"), /*#__PURE__*/ React.createElement(LyricLocationInput, { placeholder: "例：京都", onFocus: ()=>setLocation(''), onBlur: (e)=>setLocation(e.target.value), __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement(SearchButtonDesign, { onClick: handleSearchClick, __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto text-[#333]", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "地図情報に基づく歌詞:"), /*#__PURE__*/ React.createElement("p", { className: "mt-4 text-lg font-roboto text-[#666]", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, lyrics)))); }