updated menu page

donutshop_ecommerce/src/app/menu/page.js

@@ -1,9 +1,72 @@
-import React from 'react'
+"use client"
+import React, { useEffect, useState } from 'react'
+import Menu from '../../components/menu/Menu';
+import Slider from "react-slick";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
 
 const MenuPage = () => {
+    const [categories, setCategories] = useState([]);
+    const [menuItems, setMenuItems] = useState([]);
+
+    useEffect(() => {
+        fetch('/api/categories').then(res => {
+            res.json().then(categories => setCategories(categories))
+        });
+        fetch('/api/menu-items').then(res => {
+            res.json().then(menuItems => setMenuItems(menuItems))
+        });
+
+    }, []);
+
+    //slider
+    var menuSlide = {
+        dots: false,
+        infinite: false,
+        speed: 500,
+        slidesToShow: 2,
+        responsive: [
+          {
+            breakpoint: 640,
+            settings: {
+            slidesToShow: 2,
+            slidesToScroll: 2,
+            infinite: true,
+            dots: false
+            }
+          },
+          {
+            breakpoint: 480,
+            settings: {
+            slidesToShow: 1,
+            slidesToScroll: 1
+            }
+          }
+        ]
+    };
+
+
   return (
-    <div>
-        This is menu page
+    <div className='w-full h-full pb-20 md:pb-40'>
+        {categories?.length > 0 && categories.map(c => (
+            <div className='px-5 lg:px-10 py-5 sm:py-10'>
+                <p className='text-center text-3xl md:text-4xl text-pink-500 uppercase font-bold drop-shadow-[0_2px_2px_rgba(105,105,105,1)]'>{c.name}</p>
+                <div className='block md:hidden py-5 sm:py-10 px-5 sm:px-10'>
+                    <Slider arrows={false} {...menuSlide}>
+                        {menuItems.filter(item => item.category === c._id).map(item => (
+                            <div className='px-2'>
+                                <Menu {...item}/>
+                            </div>
+                        ))}
+                    </Slider>
+                </div>
+                <div className='hidden md:grid grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-5 mt-10'>
+                    {menuItems.filter(item => item.category === c._id).map(item => (
+                        <Menu {...item}/>
+                    ))}
+                </div>
+            </div>
+        ))}
     </div>
   )
 }

donutshop_ecommerce/src/components/menu/Menu.js

@@ -0,0 +1,16 @@
+import Image from 'next/image'
+import React from 'react'
+
+const Menu = ({menuImg, itemName, description, basePrice, sizes}) => {
+  return (
+    <div className='py-1 sm:py-5 flex flex-col gap-2 sm:gap-4 justify-center items-center text-center rounded-xl border border-pink-500 h-[300px] sm:h-[450px] shadow-md hover:shadow-[#E78895] duration-300'>
+      <Image src={menuImg} width={300} height={300} alt='menu-donut' className='w-[150px] sm:w-[230px]'/>
+      <p className='text-sm sm:text-base font-semibold capitalize text-[#95743D] px-2'>{itemName}</p>
+      <p className='text-xs sm:text-sm px-2 line-clamp-2'>{description}</p>
+      <p className='text-[#95743D] text-sm'>${basePrice}</p>
+      <button className='px-2 py-1 sm:px-4 sm:py-2 rounded-full text-xs sm:text-sm border border-[#E78895] text-[#95743D] font-semibold hover:bg-[#E78895] hover:text-[#FDE2DE] duration-300'>Add to cart</button>
+    </div>
+  )
+}
+
+export default Menu