add: menu list

improve: ux

src/app/menu/page.tsx

@@ -1,10 +1,16 @@
 'use client';
 
-import { useCallback, useState } from "react";
+import { Fragment, useCallback, useState } from "react";
 import SearchBox from "@/components/input/SearchBox";
 import CategoryItemRenderer from "@/components/listview/CategoryItemRenderer";
 import HorizontalScrollView from "@/components/listview/HorizontalScrollView";
 import Image from "next/image";
+import EqualizerIcon from "@/components/icons/EqualizerIcon";
+import TextAlignIcon from "@/components/icons/TextAlignIcon";
+import PlusIcon from "@/components/icons/PlusIcon";
+import MinusIcon from "@/components/icons/MinusIcon";
+import VerticalScrollView from "@/components/listview/VerticalScrollView";
+import MenuItemRenderer from "@/components/listview/MenuItemRenderer";
 
 const categories = [
   {
@@ -48,6 +54,93 @@ const categories = [
   }
 ]
 
+const foods = [
+  {
+    category: 0,
+    price: '69.000',
+    name: 'کباب چوبی ژیوان )سیخ چوبی(',
+    contains: 'فیله گوساله / سس سفید / قارچ و سیب زمینی/ پنیر پارمزان'
+  },
+  {
+    category: 1,
+    price: '49.000',
+    name: 'برگر گوشت گوساله',
+    contains: 'گوشت گوساله / پنیر چدار / کاهو / گوجه'
+  },
+  {
+    category: 2,
+    price: '29.000',
+    name: 'ساندویچ مرغ',
+    contains: 'مرغ / کاهو / گوجه / سس مایونز'
+  },
+  {
+    category: 0,
+    price: '89.000',
+    name: 'کباب ماهی',
+    contains: 'ماهی / سس لیمو / قارچ و سیب زمینی'
+  },
+  {
+    category: 1,
+    price: '39.000',
+    name: 'سالاد فصل',
+    contains: 'کاهو / گوجه / خیار / پنیر فتا'
+  },
+  {
+    category: 3,
+    price: '59.000',
+    name: 'پاستا گوشت',
+    contains: 'گوشت گوساله / پاستا / سس گوجه'
+  },
+  {
+    category: 2,
+    price: '49.000',
+    name: 'ساندویچ تن ماهی',
+    contains: 'تن ماهی / کاهو / گوجه / سس مایونز'
+  },
+  {
+    category: 0,
+    price: '79.000',
+    name: 'کباب گوشت گوسفندی',
+    contains: 'گوشت گوسفندی / سس سفید / قارچ و سیب زمینی'
+  },
+  {
+    category: 1,
+    price: '29.000',
+    name: 'برگر مرغ',
+    contains: 'مرغ / پنیر چدار / کاهو / گوجه'
+  },
+  {
+    category: 3,
+    price: '69.000',
+    name: 'سالاد میگو',
+    contains: 'میگو / کاهو / گوجه / خیار'
+  },
+  {
+    category: 2,
+    price: '39.000',
+    name: 'ساندویچ شاورما',
+    contains: 'مرغ / کاهو / گوجه / سس تارتار'
+  },
+  {
+    category: 0,
+    price: '99.000',
+    name: 'کباب گوشت بوقلمون',
+    contains: 'گوشت بوقلمون / سس سفید / قارچ و سیب زمینی'
+  },
+  {
+    category: 1,
+    price: '59.000',
+    name: 'برگر ماهی',
+    contains: 'ماهی / پنیر چدار / کاهو / گوجه'
+  },
+  {
+    category: 3,
+    price: '49.000',
+    name: 'سالاد مرغ',
+    contains: 'مرغ / کاهو / گوجه / خیار'
+  },
+];
+
 export default function MenuIndex() {
   const [search, setSearch] = useState('');
   const [selectedCategory, setSelectedCategory] = useState(0);
@@ -64,24 +157,82 @@ export default function MenuIndex() {
   return (
     <div className="flex flex-col gap-4 pt-4 items-center">
       <SearchBox value={search} onChange={updateSearch} />
-      <HorizontalScrollView className="w-full not-sm:noscrollbar py-4!" itemRenderer={(child, index) => {
-        return <CategoryItemRenderer className={`${index === selectedCategory && 'bg-white!'}`} onClick={() => updateCategory(index)}  key={index}>{child}</CategoryItemRenderer>
+      <HorizontalScrollView className="w-full noscrollbar py-4!" itemRenderer={(child, index) => {
+        return <CategoryItemRenderer className={`${index === selectedCategory && 'bg-white!'}`} onClick={() => updateCategory(index)} key={index}>{child}</CategoryItemRenderer>
       }}>
         {categories.map((item, index) => {
           return (
             <div key={index}>
-              <Image 
+              <Image
                 priority
                 src={'/assets/images/food-image.png'}
                 width={32}
                 height={32}
                 alt="category image"
-                />
+              />
               <span className="text-xs text-black">{item.title}</span>
             </div>
           )
         })}
       </HorizontalScrollView>
+
+      <section className="w-full">
+        <div className="flex justify-between items-center">
+          <span className="text-base font-semibold">{categories[selectedCategory].title}</span>
+          <div className="inline-flex gap-2 justify-around items-center">
+            <button className="rounded-xl h-8 bg-white ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]">
+              <EqualizerIcon />
+              <span className="text-xs leading-5">فیلتر بر اساس</span>
+            </button>
+            <button className="rounded-lg h-8 bg-white p-1.5">
+              <TextAlignIcon />
+            </button>
+          </div>
+        </div>
+
+        <VerticalScrollView
+          className="mt-5! overflow-y-auto h-full"
+          itemRenderer={(child, index) => {
+            return (
+              <MenuItemRenderer key={index}>{child}</MenuItemRenderer>
+            )
+          }}
+        >
+          {foods.map((food, index) => {
+            return (
+              <Fragment key={index}>
+                <Image
+                  className="rounded-xl w-28 h-28"
+                  src={'/assets/images/food-preview.png'}
+                  height={100}
+                  width={100}
+                  alt="Food image"
+                />
+                <div className="w-full h-full inline-flex flex-col justify-between">
+                  <div>
+                    <div className="text-sm2 font-semibold">{food.name}</div>
+                    <div className="text-[#7F7F7F] text-xs leading-5 font-normal mt-2">{food.contains}</div>
+                  </div>
+                  <div className="inline-flex justify-between w-full items-end">
+                    <span className="w-full" dir="ltr">{food.price} T</span>
+                    <div className="bg-background max-w-[115px] rounded-lg w-full h-8 inline-flex py-1 px-[5px] justify-between items-center gap-2">
+                      {/* <PlusIcon />
+                  <div className="text-sm2 pt-0.5 font-semibold" style={{verticalAlign: 'end'}}>افزودن</div> */}
+
+                      <PlusIcon className="bg-white rounded-sm p-2" size={26} />
+                      <div className="text-sm2 pt-0.5 font-semibold" style={{ verticalAlign: 'end' }}>2</div>
+                      <MinusIcon className="bg-white rounded-sm p-2" size={26} />
+                    </div>
+                  </div>
+                </div>
+              </Fragment>
+            )
+          })}
+
+        </VerticalScrollView>
+
+
+      </section>
     </div>
   );
 }