function MainComponent() { const [prompt, setPrompt] = React.useState(""); const [searchResults, setSearchResults] = React.useState([]); const [selectedSpot, setSelectedSpot] = React.useState(null); const handleSearch = async ()=>{ // Placeholder search function. Replace with actual search logic. const results = await fakeAISearch(prompt); setSearchResults(results); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-6", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-[300px] h-[300px] mb-4", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "mascot.png", alt: "Cute mascot character", className: "w-full h-full object-contain", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("input", { type: "text", name: "prompt", value: prompt, onChange: (e)=>setPrompt(e.target.value), placeholder: "場所を検索...", className: "p-2 border border-gray-300 rounded w-full mb-4", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSearch, className: "px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 mb-4", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, "検索"), /*#__PURE__*/ React.createElement("div", { className: "w-full flex", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-1/2 h-[400px] border border-gray-300 rounded", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 overflow-auto h-full", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, searchResults.map((result, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "cursor-pointer hover:bg-gray-200 p-2", onClick: ()=>setSelectedSpot(result), __source: { fileName: "", lineNumber: 34, columnNumber: 17 }, __self: this }, result.name)))), /*#__PURE__*/ React.createElement("div", { id: "map", className: "w-1/2 h-[400px] border border-gray-300 rounded ml-4", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this })), selectedSpot && /*#__PURE__*/ React.createElement("div", { className: "w-full mt-4 p-4 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-2", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, selectedSpot.name), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, selectedSpot.details), /*#__PURE__*/ React.createElement("a", { href: selectedSpot.url, target: "_blank", rel: "noopener noreferrer", className: "text-blue-500 hover:underline", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "外部ページへ"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, ` #map { background-color: #e5e5e5; } `)); } async function fakeAISearch(prompt) { // Placeholder data. Replace with actual search logic. return [ { name: "スポット1", details: "詳細情報1", url: "https://example.com/1" }, { name: "スポット2", details: "詳細情報2", url: "https://example.com/2" } ]; }