function MainComponent() { const apps = [ { name: 'Messages', icon: 'fa-comment-dots', color: 'bg-[#007aff]' }, { name: 'Mail', icon: 'fa-envelope', color: 'bg-[#c8232c]' }, { name: 'Photos', icon: 'fa-image', color: 'bg-[#ff9500]' }, { name: 'Camera', icon: 'fa-camera', color: 'bg-[#4cd964]' }, { name: 'Clock', icon: 'fa-clock', color: 'bg-[#ff3b30]' }, { name: 'Maps', icon: 'fa-map-marked-alt', color: 'bg-[#ff9500]' }, { name: 'Weather', icon: 'fa-cloud-sun', color: 'bg-[#4cd964]' }, { name: 'Notes', icon: 'fa-sticky-note', color: 'bg-[#ffcc00]' } ]; const bottomApps = [ { icon: 'fa-phone', tooltip: 'Phone' }, { icon: 'fa-safari', tooltip: 'Safari' }, { icon: 'fa-comment-dots', tooltip: 'Messages' }, { icon: 'fa-music', tooltip: 'Music' } ]; const appGrid = apps.map((app, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex flex-col items-center mb-6", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `rounded-full p-5 ${app.color} w-[60px] h-[60px] flex items-center justify-center`, __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${app.icon} text-white text-3xl`, __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "font-roboto mt-2 text-xs text-[#000000]", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, app.name))); const bottomBar = bottomApps.map((app, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "relative flex flex-col items-center justify-center w-12 h-12", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${app.icon} text-[#007aff] text-2xl`, __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "absolute top-full font-roboto text-[#007aff] text-xs mt-1", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, app.tooltip))); return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen bg-[#f2f2f7]", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "pt-20 px-6 grid grid-cols-4 gap-6", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, appGrid), /*#__PURE__*/ React.createElement("div", { className: "fixed inset-x-0 bottom-0 mb-6 mx-auto w-[68%] sm:w-64 h-16 bg-white rounded-3xl overflow-hidden shadow-lg flex items-center justify-evenly", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, bottomBar)); }