function MainComponent() { const [intervalId, setIntervalId] = React.useState(null); const [seasonTicket, setSeasonTicket] = React.useState(''); const [restaurants, setRestaurants] = React.useState([]); const [trafficData, setTrafficData] = React.useState(null); const [isLoading, setIsLoading] = React.useState(false); const handleSubmit = (e)=>{ e.preventDefault(); setIsLoading(true); fetchRestaurants(seasonTicket).then((data)=>{ setRestaurants(data); setIsLoading(false); }); fetchTrafficData(seasonTicket).then((data)=>{ setTrafficData(data); setIsLoading(false); }); }; React.useEffect(()=>{ const id = setInterval(()=>{ console.log("Reading periodic information..."); }, 5000); setIntervalId(id); return ()=>clearInterval(id); }, []); return /*#__PURE__*/ React.createElement("div", { className: "p-4 h-screen w-full bg-gray-100", __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-sans", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, "マップアプリ")), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "seasonTicket", value: seasonTicket, onChange: (e)=>setSeasonTicket(e.target.value), placeholder: "定期券情報を入力してください", className: "p-2 border border-gray-300 rounded w-full mb-2", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "p-2 bg-blue-500 text-white rounded w-full", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, "飲食店を検索")), /*#__PURE__*/ React.createElement("div", { className: "relative flex-grow", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("iframe", { className: "w-full h-[50vh] rounded-lg shadow-md mb-4", title: "Map", src: "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.8354345093745!2d144.9537353159049!3d-37.8162796797517!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642af0f11fd81%3A0xf0727c0c0e0f5679!2sTokyo%2C%20Japan!5e0!3m2!1sja!2sjp!4v1613992293819!5m2!1sja!2sjp", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }), isLoading && /*#__PURE__*/ React.createElement("p", { className: "text-center text-lg", __source: { fileName: "", lineNumber: 58, columnNumber: 23 }, __self: this }, "読み込み中..."), /*#__PURE__*/ React.createElement("div", { className: "w-full", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, restaurants.map((restaurant, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-2 border-b border-gray-300", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold font-sans", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, restaurant.name), /*#__PURE__*/ React.createElement("p", { className: "font-sans", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, "評価: ", restaurant.rating), /*#__PURE__*/ React.createElement("p", { className: "font-sans", __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, restaurant.review_count, "件のレビュー")))), trafficData && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold font-sans", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, "交通量データ"), /*#__PURE__*/ React.createElement("p", { className: "font-sans", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, "混雑度: ", trafficData.congestion), /*#__PURE__*/ React.createElement("p", { className: "font-sans", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "おすすめ時間: ", trafficData.recommended_time)))); function fetchRestaurants(seasonTicket) { return new Promise((resolve)=>{ setTimeout(()=>{ resolve([ { name: 'レストランA', rating: 4.5, review_count: 120 }, { name: 'レストランB', rating: 4.0, review_count: 80 } ]); }, 2000); }); } function fetchTrafficData(seasonTicket) { return new Promise((resolve)=>{ setTimeout(()=>{ resolve({ congestion: '中', recommended_time: '14:00-16:00' }); }, 2000); }); } }