function MainComponent() { const [restaurants, setRestaurants] = React.useState([]); const [categories, setCategories] = React.useState([]); React.useEffect(()=>{ setRestaurants([ { id: 1, name: "Restaurant 1", image: "/images/restaurant1.jpg", cuisine: "Italian, Chinese", deliveryTime: "40-50 mins" }, { id: 2, name: "Restaurant 2", image: "/images/restaurant2.jpg", cuisine: "Mexican, Indian", deliveryTime: "30-40 mins" }, { id: 3, name: "Restaurant 3", image: "/images/restaurant3.jpg", cuisine: "Thai, Vietnamese", deliveryTime: "25-35 mins" }, { id: 4, name: "Restaurant 4", image: "/images/restaurant4.jpg", cuisine: "American, BBQ", deliveryTime: "20-30 mins" } ]); setCategories([ { id: 1, name: "Pizza", icon: "fas fa-pizza-slice" }, { id: 2, name: "Fast Food", icon: "fas fa-burger-soda" }, { id: 3, name: "Spicy", icon: "fas fa-pepper-hot" }, { id: 4, name: "Desserts", icon: "fas fa-ice-cream" } ]); }, []); return /*#__PURE__*/ React.createElement("div", { className: "font-roboto min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-white shadow p-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-red-500", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, "FoodOrderingApp"), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "cursor-pointer", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { className: "text-gray-700", __source: { fileName: "", lineNumber: 51, columnNumber: 44 }, __self: this }, "Home")), /*#__PURE__*/ React.createElement("li", { className: "cursor-pointer", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { className: "text-gray-700", __source: { fileName: "", lineNumber: 52, columnNumber: 44 }, __self: this }, "Restaurants")), /*#__PURE__*/ React.createElement("li", { className: "cursor-pointer", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { className: "text-gray-700", __source: { fileName: "", lineNumber: 53, columnNumber: 44 }, __self: this }, "Orders")), /*#__PURE__*/ React.createElement("li", { className: "cursor-pointer", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { className: "text-gray-700", __source: { fileName: "", lineNumber: 54, columnNumber: 44 }, __self: this }, "Profile"))))), /*#__PURE__*/ React.createElement("main", { className: "p-4", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "mb-8", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "Popular Restaurants"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, restaurants.map((restaurant)=>/*#__PURE__*/ React.createElement("div", { key: restaurant.id, className: "bg-white p-4 shadow rounded", __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: restaurant.image, alt: `${restaurant.name} food`, className: "w-full h-[150px] object-cover rounded mb-2", __source: { fileName: "", lineNumber: 65, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-lg", __source: { fileName: "", lineNumber: 66, columnNumber: 17 }, __self: this }, restaurant.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 67, columnNumber: 17 }, __self: this }, restaurant.cuisine), /*#__PURE__*/ React.createElement("p", { className: "text-red-500", __source: { fileName: "", lineNumber: 68, columnNumber: 17 }, __self: this }, restaurant.deliveryTime))))), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, "Categories"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 overflow-x-auto", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, categories.map((category)=>/*#__PURE__*/ React.createElement("div", { key: category.id, className: "bg-white p-4 shadow rounded flex flex-col items-center min-w-[100px]", __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${category.icon} text-3xl text-red-500 mb-2`, __source: { fileName: "", lineNumber: 79, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700", __source: { fileName: "", lineNumber: 80, columnNumber: 17 }, __self: this }, category.name))))))); }