function MainComponent() { const [selectedDate, setSelectedDate] = React.useState(''); const [timelapseUrl, setTimelapseUrl] = React.useState(''); const [temperatureData, setTemperatureData] = React.useState([]); const [humidityData, setHumidityData] = React.useState([]); React.useEffect(()=>{ if (selectedDate !== '') { const fetchTimelapseVideo = async ()=>{ const videoUrl = `https://example.com/timelapse/${selectedDate}.mp4`; setTimelapseUrl(videoUrl); }; const fetchSensorData = async ()=>{ const tempData = [ 22, 23, 24, 25, 24, 23, 22 ]; const humData = [ 55, 56, 57, 58, 57, 56, 55 ]; setTemperatureData(tempData); setHumidityData(humData); }; fetchTimelapseVideo(); fetchSensorData(); } }, [ selectedDate ]); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f2f5]", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 max-w-4xl w-full", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "date", className: "block text-xl font-roboto text-[#333] mb-2", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, "日付を選択してください:"), /*#__PURE__*/ React.createElement("input", { type: "date", name: "date", className: "p-2 w-full border-2 border-[#ccc] rounded-md", onChange: (e)=>setSelectedDate(e.target.value), __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto text-[#333] mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, "タイムラプス映像"), /*#__PURE__*/ React.createElement("div", { className: "w-full h-[300px]", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, timelapseUrl ? /*#__PURE__*/ React.createElement("video", { src: timelapseUrl, controls: true, className: "w-full h-full", __source: { fileName: "", lineNumber: 43, columnNumber: 17 }, __self: this }) : /*#__PURE__*/ React.createElement("div", { className: "bg-[#eaeaea] flex items-center justify-center w-full h-full", __source: { fileName: "", lineNumber: 45, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#aaa] font-roboto", __source: { fileName: "", lineNumber: 46, columnNumber: 19 }, __self: this }, "映像がここに表示されます")))), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto text-[#333] mb-4", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, "温湿度情報"), /*#__PURE__*/ React.createElement("div", { className: "w-full h-[200px] flex justify-center items-center", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { viewBox: "0 0 100 100", className: "w-full h-full", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("polyline", { points: "10,90 20,80 30,70 40,60 50,50 60,40 70,30 80,20", fill: "none", stroke: "#ff4500", strokeWidth: "2", __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("polyline", { points: "10,70 20,70 30,60 40,60 50,50 60,50 70,40 80,40", fill: "none", stroke: "#00bfff", strokeWidth: "2", __source: { fileName: "", lineNumber: 56, columnNumber: 17 }, __self: this }))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, ` @keyframes temperature-humidity-rise { 0% { transform: scale(0); } 100% { transform: scale(1); } } svg { animation: temperature-humidity-rise 2s ease-out; } `))); }