add: search box

src/app/menu/page.tsx

@@ -1,10 +1,20 @@
 'use client';
 
+import SearchBox from "@/components/input/SearchBox";
+import { useState } from "react";
+
 export default function MenuIndex() {
+  const [search, setSearch] = useState('');
+
+  const updateSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e) {
+      setSearch(() => e.target.value);
+    }
+  }
 
   return (
-    <>
+    <div className="flex flex-col gap-4 pt-4 items-center">
-      Menu
+      <SearchBox value={search} onChange={updateSearch} />
-    </>
+    </div>
   );
 }

src/components/icons/SearchIcon.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+interface SearchIconProps {
+  className?: string;
+  stroke?: string;
+  strokeWidth?: number;
+  size?: number;
+}
+
+const SearchIcon: React.FC<SearchIconProps> = ({
+  className = '',
+  stroke = '#8C90A3',
+  strokeWidth = 1.5,
+  size = 24,
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z"
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M22 22L20 20"
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default SearchIcon;

src/components/input/SearchBox.jsx

@@ -1,11 +0,0 @@
-import React from 'react'
-import { CiSearch } from "react-icons/ci";
-
-export default function SearchBox() {
-    return (
-        <div className='bg-[#EEF0F7] inline-flex rounded-xl px-4 h-12 w-full md:w-[370px] items-center content-center' >
-            <CiSearch className='text-[#8C90A3]' size={24} />
-            <input placeholder='جستجو' className='text-[#8C90A3] block outline-none border-none focus:ring-0 focus:outline-none text-sm px-[7px] h-full items-center w-full' type='text' />
-        </div>
-    )
-}

src/components/input/SearchBox.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import SearchIcon from '../icons/SearchIcon';
+
+type Props = {
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+};
+
+export default function SearchBox({ value, onChange }: Props) {
+  return (
+    <div className="bg-white inline-flex rounded-xl px-4 h-12 w-full items-center content-center">
+      <SearchIcon stroke="#8C90A3" />
+      <input
+        onChange={onChange}
+        value={value}
+        placeholder="جستجو"
+        className="text-[#8C90A3] block outline-none border-none focus:ring-0 focus:outline-none text-sm px-[7px] h-full items-center w-full"
+        type="text"
+      />
+    </div>
+  );
+}

src/components/wrapper/ClientMenuRouteWrapper.tsx.tsx

@@ -44,7 +44,7 @@ function ClientMenuRouteWrapper({ children }: Props) {
           searchModalState={searchModal} toggleSearchModalState={toggleSearchModal}
           nightModeState={nightMode} toggleNightModeState={toggleNightMode} />
       </header>
-      <main className="h-full pb-0">
+      <main className="h-full px-4 pb-0">
         {children}
       </main>
       <aside>