function MainComponent() { const categories = [ 'Pizza', 'Burgers', 'Sushi', 'Salad', 'Desserts' ]; const CategoryItem = ({ category })=>/*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center mb-4", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-20 h-20 rounded-full bg-[#FDE047] flex items-center justify-center mb-2", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, category.slice(0, 2))), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-sm", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, category)); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 px-4 py-2 overflow-auto", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-around", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, categories.map((category)=>/*#__PURE__*/ React.createElement(CategoryItem, { key: category, category: category, __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("nav", { className: "bg-[#FFFFFF] border-t-2 border-[#E5E7EB] p-2", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-around", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "font-roboto flex flex-col items-center text-xs", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home fa-lg", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }), "Home"), /*#__PURE__*/ React.createElement("button", { className: "font-roboto flex flex-col items-center text-xs", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search fa-lg", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }), "Search"), /*#__PURE__*/ React.createElement("button", { className: "font-roboto flex flex-col items-center text-xs", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user fa-lg", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }), "Account"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, ` @media (max-width: 640px) { body { font-size: 14px; } } `)); }