search: apply same menu list updated on search page and add cart button

src/pages/search/page.tsx

@@ -4,13 +4,15 @@ import SearchIcon from "components/Icons/SearchIcon";
 import LoadingSpinner from "components/LoadingSpinner";
 import ProHeader from "components/ProHeader/ProHeader";
 import ProText from "components/ProText";
+import useBreakPoint from "hooks/useBreakPoint";
+import { CartButton } from "pages/menu/components/CartButton/CartButton";
+import { SearchMenu } from "pages/menu/components/SearchMenu/SearchMenu";
 import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link, useParams, useSearchParams } from "react-router-dom";
 import { useGetMenuQuery } from "redux/api/others";
 import { useAppSelector } from "redux/hooks";
 import { Product } from "utils/types/appTypes";
-import { ProductCard } from "../menu/components/ProductCard/ProductCard";
 import styles from "./search.module.css";
 
 export default function SearchPage() {
@@ -22,6 +24,7 @@ export default function SearchPage() {
   const [searchResults, setSearchResults] = useState<Product[]>([]);
   const [isSearching, setIsSearching] = useState(false);
   const restaurantID = localStorage.getItem("restaurantID");
+  const { isDesktop } = useBreakPoint();
 
   const { data: menuData } = useGetMenuQuery(restaurantID as string, {
     skip: !restaurantID,
@@ -52,7 +55,7 @@ export default function SearchPage() {
         setIsSearching(false);
       }, 300);
     },
-    [menuData]
+    [menuData],
   );
 
   // Handle input change and update search params
@@ -67,7 +70,7 @@ export default function SearchPage() {
         setSearchParams({});
       }
     },
-    [setSearchParams]
+    [setSearchParams],
   );
 
   // Debounced search effect
@@ -93,7 +96,6 @@ export default function SearchPage() {
 
       <div
         style={{
-          height: "82vh",
           display: "flex",
           flexDirection: "column",
           gap: 16,
@@ -152,7 +154,7 @@ export default function SearchPage() {
               <LoadingSpinner size="large" spinning={true} showText={true} />
             </div>
           ) : searchQuery && searchResults?.length > 0 ? (
-            <ProductCard products={searchResults} />
+            <SearchMenu products={searchResults} />
           ) : searchQuery && searchResults?.length === 0 && !isSearching ? (
             <div className={styles.noResults}>
               <ProText className={styles.noResultsText}>
@@ -169,29 +171,33 @@ export default function SearchPage() {
           ) : null}
         </div>
       </div>
-      <Row
-        style={{
-          width: "100%",
-          padding: "16px 16px 0",
-          position: "fixed",
-          bottom: 0,
-          left: 0,
-          backgroundColor: themeName === "light" ? "white" : ProBlack2,
-          boxShadow: "0px -1px 3px rgba(0, 0, 0, 0.1)",
-          height: "10vh",
-          zIndex: 999,
-        }}
-      >
-        <Link to={`${id}/cart`} style={{ width: "100%" }}>
-          <Button
-            type="primary"
-            shape="round"
-            style={{ width: "100%", height: 48, marginBottom: 16 }}
-          >
-            {t("menu.cart")}
-          </Button>
-        </Link>
-      </Row>
+      {!isDesktop ? (
+        <Row
+          style={{
+            width: "100%",
+            padding: "16px 16px 0",
+            position: "fixed",
+            bottom: 0,
+            left: 0,
+            backgroundColor: themeName === "light" ? "white" : ProBlack2,
+            boxShadow: "0px -1px 3px rgba(0, 0, 0, 0.1)",
+            height: "10vh",
+            zIndex: 999,
+          }}
+        >
+          <Link to={`/${id}/cart`} style={{ width: "100%" }}>
+            <Button
+              type="primary"
+              shape="round"
+              style={{ width: "100%", height: 48, marginBottom: 16 }}
+            >
+              {t("menu.cart")}
+            </Button>
+          </Link>
+        </Row>
+      ) : (
+        <CartButton />
+      )}
     </>
   );
 }