function MainComponent() { const stations = [ "新宿", "渋谷", "池袋" ]; const [selectedStation, setSelectedStation] = React.useState(stations[0]); const [restaurants, setRestaurants] = React.useState({ 新宿: [], 渋谷: [], 池袋: [] }); const handleSubmit = (event)=>{ event.preventDefault(); const url = event.target["restaurant-url"].value; const station = event.target["nearest-station"].value; if (validateURL(url)) { fetchRestaurantInfo(url).then((restaurantInfo)=>{ setRestaurants((prev)=>({ ...prev, [station]: [ ...prev[station], restaurantInfo ] })); }); } }; const validateURL = (url)=>{ const pattern = /(https?:\/\/(tabelog|goo.gl)\/maps\/[\w-]+)/; return pattern.test(url); }; const fetchRestaurantInfo = (url)=>{ return new Promise((resolve)=>{ setTimeout(()=>{ resolve({ name: "サンプルレストラン", address: "サンプル住所", rating: 4, image: "./restaurant.jpg", url }); }, 1000); }); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#ffffff] text-black min-h-screen flex flex-col", __source: { fileName: "", lineNumber: 44, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-black text-white p-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-playfair-display", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, "みんなのおすすめレストラン"), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#home", className: "hover:text-gold", __source: { fileName: "", lineNumber: 50, columnNumber: 17 }, __self: this }, "ホーム")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#add-restaurant", className: "hover:text-gold", __source: { fileName: "", lineNumber: 51, columnNumber: 17 }, __self: this }, "レストラン追加")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#contact", className: "hover:text-gold", __source: { fileName: "", lineNumber: 52, columnNumber: 17 }, __self: this }, "お問い合わせ"))))), /*#__PURE__*/ React.createElement("main", { className: "flex-grow p-8 bg-[#fafafa]", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { id: "add-restaurant", className: "mb-10", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-playfair-display mb-4", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "レストランの追加"), /*#__PURE__*/ React.createElement("form", { id: "restaurant-form", className: "bg-white p-6 shadow-lg rounded-lg", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-4", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-lg font-montserrat", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, "レストランのURLを入力してください（食べログまたはGoogleMAP）"), /*#__PURE__*/ React.createElement("input", { type: "url", name: "restaurant-url", placeholder: "例: https://tabelog.com/... または https://goo.gl/maps/...", className: "mt-2 p-2 border rounded w-full", required: true, __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("label", { className: "block mb-4", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-lg font-montserrat", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, "最寄り駅を選択してください"), /*#__PURE__*/ React.createElement("select", { name: "nearest-station", className: "mt-2 p-2 border rounded w-full", required: true, __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, stations.map((station)=>/*#__PURE__*/ React.createElement("option", { key: station, value: station, __source: { fileName: "", lineNumber: 68, columnNumber: 42 }, __self: this }, station)))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-black text-white py-2 px-4 rounded hover:bg-gold", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, "追加"))), /*#__PURE__*/ React.createElement("section", { id: "restaurant-list", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-playfair-display mb-4", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, "おすすめのレストラン"), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex border-b", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, stations.map((station, index)=>{ const selectedStyle = selectedStation === station ? 'border-t-2 border-r-2 border-l-2' : 'border-t-2 border-r-2'; return /*#__PURE__*/ React.createElement("button", { key: station, onClick: ()=>setSelectedStation(station), className: `flex-1 py-2 px-4 text-center ${selectedStyle}`, __source: { fileName: "", lineNumber: 82, columnNumber: 19 }, __self: this }, station); })), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 94, columnNumber: 15 }, __self: this }, restaurants[selectedStation].length > 0 ? restaurants[selectedStation].map((restaurant, idx)=>/*#__PURE__*/ React.createElement("div", { key: idx, className: "bg-white p-4 shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 98, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: restaurant.image, alt: `レストラン ${idx + 1}`, className: "w-full h-48 object-cover rounded mb-4", __source: { fileName: "", lineNumber: 99, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-playfair-display mb-2", __source: { fileName: "", lineNumber: 100, columnNumber: 25 }, __self: this }, restaurant.name), /*#__PURE__*/ React.createElement("p", { className: "text-[#555] font-montserrat mb-2", __source: { fileName: "", lineNumber: 101, columnNumber: 25 }, __self: this }, restaurant.address), /*#__PURE__*/ React.createElement("div", { className: "text-yellow-500 mb-4", __source: { fileName: "", lineNumber: 102, columnNumber: 25 }, __self: this }, [ ...Array.from({ length: restaurant.rating }) ].map((_, starIdx)=>/*#__PURE__*/ React.createElement("i", { key: starIdx, className: "fas fa-star", __source: { fileName: "", lineNumber: 103, columnNumber: 95 }, __self: this }))), /*#__PURE__*/ React.createElement("a", { href: restaurant.url, className: "text-black underline hover:no-underline", __source: { fileName: "", lineNumber: 105, columnNumber: 25 }, __self: this }, "詳細を見る"))) : /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 107, columnNumber: 26 }, __self: this }, "レストランが見つかりません。")))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-black text-white p-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 115, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-montserrat", __source: { fileName: "", lineNumber: 116, columnNumber: 9 }, __self: this }, "© 2024 みんなのおすすめレストラン"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 117, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-white hover:text-gold", __source: { fileName: "", lineNumber: 118, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-facebook-f", __source: { fileName: "", lineNumber: 118, columnNumber: 62 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-white hover:text-gold", __source: { fileName: "", lineNumber: 119, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-twitter", __source: { fileName: "", lineNumber: 119, columnNumber: 62 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-white hover:text-gold", __source: { fileName: "", lineNumber: 120, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-instagram", __source: { fileName: "", lineNumber: 120, columnNumber: 62 }, __self: this })))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 124, columnNumber: 7 }, __self: this }, ` .hover\\:text-gold:hover { color: #ffd700; } .hover\\:bg-gold:hover { background-color: #ffd700; } `)); }