function MainComponent() { const [activeTab, setActiveTab] = React.useState('Camera'); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-full w-full font-roboto p-4", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-evenly items-center bg-gray-800 text-white h-[60px] w-full", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center cursor-pointer", onClick: ()=>setActiveTab('Camera'), __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-camera text-2xl", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }, "Camera")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center cursor-pointer", onClick: ()=>setActiveTab('Passenger Count'), __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-users text-2xl", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, "Passenger Count")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center cursor-pointer", onClick: ()=>setActiveTab('Vehicle Health'), __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-heartbeat text-2xl", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, "Vehicle Health")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center cursor-pointer", onClick: ()=>setActiveTab('Map'), __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-map text-2xl", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, "Map"))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-grow bg-gray-200 p-4", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, activeTab === 'Camera' && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 25, columnNumber: 36 }, __self: this }, "Camera Content"), activeTab === 'Passenger Count' && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 26, columnNumber: 45 }, __self: this }, "Passenger Count Content"), activeTab === 'Vehicle Health' && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 27, columnNumber: 44 }, __self: this }, "Vehicle Health Content"), activeTab === 'Map' && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 28, columnNumber: 33 }, __self: this }, "Map Content"))); }