add: categories list

src/app/globals.css

@@ -72,3 +72,36 @@ 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>
   );
 }

src/components/listview/CategoryItemRenderer.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+type Props = {
+    children: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+function CategoryItemRenderer({ children, ...rest }: Props) {
+    return (
+        <div className={`${rest.className} transition-all duration-200 ease-out border-2 border-solid border-white overflow-hidden rounded-xl backdrop-blur-md bg-white/40`}>
+            <div
+                {...rest}
+                className="rounded-normal w-[88px] h-[88px] flex flex-col justify-center items-center gap-2"
+            >
+                {children}
+            </div>
+        </div>
+    );
+}
+
+export default CategoryItemRenderer;

src/components/listview/HorizontalScrollView.tsx

@@ -0,0 +1,33 @@
+import React, { ReactElement, ReactNode } from 'react';
+
+type Props = {
+    itemRenderer?: (child: ReactNode, index: number) => ReactElement;
+    children: ReactNode;
+} & React.OlHTMLAttributes<HTMLUListElement>;
+
+function HorizontalScrollView({ itemRenderer, children, ...restProps }: Props) {
+    const items = React.Children.toArray(children);
+
+    return (
+        <ul
+            {...restProps}
+            style={{
+                display: 'flex',
+                overflowX: 'auto',
+                gap: '1rem',
+                padding: 0,
+                margin: 0,
+                listStyle: 'none',
+                ...restProps.style,
+            }}
+        >
+            {items.map((child, index) => (
+                <li key={index} style={{ flex: '0 0 auto' }}>
+                    {itemRenderer ? itemRenderer(child, index) : child}
+                </li>
+            ))}
+        </ul>
+    );
+}
+
+export default HorizontalScrollView;