add: categories list

src/app/globals.css

@@ -71,4 +71,37 @@ input[type="password"] {
 
   /* add spacing to better separate each image */
   letter-spacing: 2px;
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.noscrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.noscrollbar {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+
+/* width */
+::-webkit-scrollbar {
+  width: 10px;
+  height: 6px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  border-radius: 12px;
+  background: #888;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
 }

src/app/menu/page.tsx

@@ -1,20 +1,87 @@
 'use client';
 
+import { useCallback, useState } from "react";
 import SearchBox from "@/components/input/SearchBox";
-import { useState } from "react";
+import CategoryItemRenderer from "@/components/listview/CategoryItemRenderer";
+import HorizontalScrollView from "@/components/listview/HorizontalScrollView";
+import Image from "next/image";
+
+const categories = [
+  {
+    title: 'خوراک', icon: '',
+  },
+  {
+    title: 'خوراک', icon: '',
+  },
+  {
+    title: 'خوراک', icon: '',
+  },
+  {
+    title: 'خوراک', icon: '',
+  },
+  {
+    title: 'خوراک', icon: '',
+  },
+  {
+    title: 'خوراک', icon: '',
+  },
+  {
+    title: 'خوراک', icon: '',
+  },
+  {
+    title: 'خوراک', icon: '',
+  },
+  {
+    title: 'خوراک', icon: '',
+  },
+  {
+    title: 'خوراک', icon: '',
+  },
+  {
+    title: 'خوراک', icon: '',
+  },
+  {
+    title: 'خوراک', icon: '',
+  },
+  {
+    title: 'خوراک', icon: '',
+  }
+]
 
 export default function MenuIndex() {
   const [search, setSearch] = useState('');
+  const [selectedCategory, setSelectedCategory] = useState(0);
+
+  const updateSearch = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearch(e.target.value);
+  }, []);
+
+  const updateCategory = useCallback((id: number) => {
+    setSelectedCategory(id);
+  }, []);
 
-  const updateSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e) {
-      setSearch(() => e.target.value);
-    }
-  }
 
   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>
+      }}>
+        {categories.map((item, index) => {
+          return (
+            <div key={index}>
+              <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>
     </div>
   );
 }