function RestaurantFinderAi({ title, region, setRegion, genre, setGenre, handleSearch, results, handleRestaurantClick, selectedRestaurant }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center w-full min-h-screen bg-white", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-4xl font-bold mt-10", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { className: "w-[400px] mt-5", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "region", value: region, onChange: (e)=>setRegion(e.target.value), className: "w-full p-2 border border-gray-300 rounded", placeholder: "地域", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-[400px] mt-3", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "genre", value: genre, onChange: (e)=>setGenre(e.target.value), className: "w-full p-2 border border-gray-300 rounded", placeholder: "ジャンル", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "mt-3 bg-blue-500 text-white font-roboto py-2 px-4 rounded", onClick: handleSearch, __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, "検索"), /*#__PURE__*/ React.createElement("div", { className: "w-full mt-5 flex flex-wrap justify-center gap-4", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, results.map((result, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "w-[200px] border border-gray-300 p-2 rounded shadow-sm cursor-pointer", onClick: ()=>handleRestaurantClick(result), __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: result.image, alt: `レストラン ${result.name}`, className: "w-full h-[150px] object-cover rounded", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "font-crimson-text text-lg mt-2", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, result.name), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, result.description)))), selectedRestaurant && /*#__PURE__*/ React.createElement("div", { className: "w-full mt-5 bg-gray-100 p-5 rounded shadow-md", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-crimson-text text-2xl mb-3", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, selectedRestaurant.name), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, selectedRestaurant.links.map((link, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: link.url, className: "text-blue-500 underline", target: "_blank", rel: "noopener noreferrer", __source: { fileName: "", lineNumber: 50, columnNumber: 17 }, __self: this }, link.site)))))); } function RestaurantFinderAiStory() { const [region, setRegion] = React.useState(""); const [genre, setGenre] = React.useState(""); const [results, setResults] = React.useState([]); const [selectedRestaurant, setSelectedRestaurant] = React.useState(null); const handleSearch = ()=>{ // Dummy Search Function setResults([ { image: "path/to/image1.jpg", name: "レストラン1", description: "レストラン1の説明" }, { image: "path/to/image2.jpg", name: "レストラン2", description: "レストラン2の説明" } ]); }; const handleRestaurantClick = (restaurant)=>{ setSelectedRestaurant({ name: restaurant.name, links: [ { site: "サイト1", url: "https://example1.com" }, { site: "サイト2", url: "https://example2.com" } ] }); }; return /*#__PURE__*/ React.createElement(RestaurantFinderAi, { title: "飲食店検索AI", region: region, setRegion: setRegion, genre: genre, setGenre: setGenre, handleSearch: handleSearch, results: results, handleRestaurantClick: handleRestaurantClick, selectedRestaurant: selectedRestaurant, __source: { fileName: "", lineNumber: 95, columnNumber: 5 }, __self: this }); } function MainComponent() { const [region, setRegion] = React.useState(""); const [genre, setGenre] = React.useState(""); const [results, setResults] = React.useState([]); const [selectedRestaurant, setSelectedRestaurant] = React.useState(null); const handleSearch = ()=>{ // Dummy Search Function setResults([ { image: "path/to/image1.jpg", name: "レストラン1", description: "レストラン1の説明" }, { image: "path/to/image2.jpg", name: "レストラン2", description: "レストラン2の説明" } ]); }; const handleRestaurantClick = (restaurant)=>{ setSelectedRestaurant({ name: restaurant.name, links: [ { site: "サイト1", url: "https://example1.com" }, { site: "サイト2", url: "https://example2.com" } ] }); }; return /*#__PURE__*/ React.createElement(RestaurantFinderAi, { title: "飲食店検索AI", region: region, setRegion: setRegion, genre: genre, setGenre: setGenre, handleSearch: handleSearch, results: results, handleRestaurantClick: handleRestaurantClick, selectedRestaurant: selectedRestaurant, __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }); }