function MainComponent() { const [selectedTab, setSelectedTab] = React.useState('ROM'); const [movementData, setMovementData] = React.useState([ { time: 0, value: 0 }, { time: 200, value: 20 }, { time: 400, value: 10 }, { time: 600, value: 20 }, { time: 800, value: 10 }, { time: 1000, value: 20 }, { time: 1200, value: 10 } ]); const renderGraph = ()=>{ const maxValue = Math.max(...movementData.map((d)=>d.value)); const maxTime = Math.max(...movementData.map((d)=>d.time)); return /*#__PURE__*/ React.createElement("svg", { className: "w-full h-40", viewBox: `0 0 ${maxTime} ${maxValue}`, __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: `M ${movementData.map((d)=>`${d.time},${maxValue - d.value}`).join(' L ')}`, fill: "none", stroke: "#4299e1", strokeWidth: "2", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this })); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#E6F4FF] min-h-screen p-4 font-roboto", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto bg-white rounded-lg shadow-lg overflow-hidden", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#00B4D8] p-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold text-white", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, "Mr. rashi"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-white", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, "13 Apr 2023 • session_6")), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-full p-2 w-10 h-10 flex items-center justify-center", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#00B4D8] font-bold", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, "H2")), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-full p-2 w-10 h-10 flex items-center justify-center", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#00B4D8] font-bold", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, "2")), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-full p-2 w-10 h-10 flex items-center justify-center", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#00B4D8] font-bold", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, "8")), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-full p-2 w-10 h-10 flex items-center justify-center", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#00B4D8] font-bold", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, "88")))), /*#__PURE__*/ React.createElement("div", { className: "p-4 flex", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-1/2", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./hand.png", alt: "Hand with blue dots", className: "w-full", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-1/2 pl-4", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex mb-4", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `flex-1 py-2 ${selectedTab === 'ROM' ? 'bg-[#00B4D8] text-white' : 'bg-gray-200'}`, onClick: ()=>setSelectedTab('ROM'), __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }, "ROM"), /*#__PURE__*/ React.createElement("button", { className: `flex-1 py-2 ${selectedTab === 'Movement Data' ? 'bg-[#00B4D8] text-white' : 'bg-gray-200'}`, onClick: ()=>setSelectedTab('Movement Data'), __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this }, "Movement Data")), /*#__PURE__*/ React.createElement("div", { className: "bg-[#F0F9FF] p-4 rounded-lg", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-3xl font-bold", __source: { fileName: "", lineNumber: 74, columnNumber: 17 }, __self: this }, "20°"), /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 75, columnNumber: 17 }, __self: this }, "Time (s)")), renderGraph(), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mt-2", __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 79, columnNumber: 17 }, __self: this }, "0"), /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 80, columnNumber: 17 }, __self: this }, "1200"))))))); }