From 906d94e140de1512aed1ab39fc4e85c0da947517 Mon Sep 17 00:00:00 2001
From: ken <viethungpro97@gmail.com>
Date: Mon, 17 Jun 2024 08:53:03 +0700
Subject: [PATCH 1/2] chore: update icon

---
 app/components/Icons.tsx         | 37 ++++++++++++++++++++++++++++++++
 app/modules/Drawer.tsx           |  7 +++---
 app/modules/menu/DesktopMenu.tsx | 33 ++++++++++++++++++++--------
 app/modules/menu/MobileMenu.tsx  | 14 +++++++-----
 4 files changed, 74 insertions(+), 17 deletions(-)

diff --git a/app/components/Icons.tsx b/app/components/Icons.tsx
index 0e6344fa..2d414be1 100644
--- a/app/components/Icons.tsx
+++ b/app/components/Icons.tsx
@@ -1,3 +1,5 @@
+import clsx from "clsx";
+
 type IconProps = JSX.IntrinsicElements["svg"];
 
 // Using icons from https://phosphoricons.com/
@@ -61,3 +63,38 @@ export function IconTag(props: IconProps) {
     </svg>
   );
 }
+
+export function IconCaret(props: IconProps) {
+  let { className, direction = "right", ...rest } = props;
+  let rotate;
+
+  switch (direction) {
+    case "down":
+      rotate = "rotate-0";
+      break;
+    case "up":
+      rotate = "rotate-180";
+      break;
+    case "right":
+      rotate = "-rotate-90";
+      break;
+    case "left":
+      rotate = "rotate-90";
+      break;
+    default:
+      rotate = "rotate-0";
+  }
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="32"
+      height="32"
+      fill="currentColor"
+      viewBox="0 0 256 256"
+      className={clsx(className, rotate)}
+      {...rest}
+    >
+      <path d="M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z"></path>
+    </svg>
+  );
+}
diff --git a/app/modules/Drawer.tsx b/app/modules/Drawer.tsx
index 0b4c6bb9..c78421d5 100644
--- a/app/modules/Drawer.tsx
+++ b/app/modules/Drawer.tsx
@@ -1,9 +1,10 @@
 import { Fragment, useState } from "react";
 import { Dialog, Transition } from "@headlessui/react";
 
-import { Heading, IconCaret, IconClose } from "~/modules";
+import { Heading, IconClose } from "~/modules"; 
 import { cn } from "~/lib/cn";
 import clsx from "clsx";
+import { IconCaret } from "~/components/Icons";
 
 /**
  * Drawer component that opens on user click.
@@ -88,11 +89,11 @@ export function Drawer({
                     {isBackMenu && (
                       <button
                         type="button"
-                        className="p-2 -m-4 transition text-body hover:text-body/50"
+                        className="p-2 -ml-4 transition text-body hover:text-body/50"
                         onClick={onClose}
                         data-test="close-cart"
                       >
-                        <IconCaret className="w-6 h-6" direction="left" aria-label="Close panel" />
+                        <IconCaret className="w-4 h-4" direction="left" aria-label="Close panel" />
                       </button>
                     )}
                     {heading !== null && (
diff --git a/app/modules/menu/DesktopMenu.tsx b/app/modules/menu/DesktopMenu.tsx
index 5834967f..c45b1c74 100644
--- a/app/modules/menu/DesktopMenu.tsx
+++ b/app/modules/menu/DesktopMenu.tsx
@@ -1,11 +1,12 @@
 import { Link } from "@remix-run/react";
 import { Image } from "@shopify/hydrogen";
-import{
+import {
   Nav_Items,
   type ImageMenuProps,
   type MultiMenuProps,
   type SingleMenuProps,
 } from "./defines";
+import clsx from "clsx";
 
 const MenuByType = {
   multi: MultiMenu,
@@ -13,6 +14,9 @@ const MenuByType = {
   single: SingleMenu,
 };
 
+const commonAnimatedClass =
+  "absolute h-0 opacity-0 overflow-hidden bg-white shadow-md transition-all ease-out group-hover:opacity-100 group-hover:border-t duration-500 group-hover:duration-300 group-hover:z-50 "; 
+
 export function DesktopMenu() {
   return (
     <nav className="flex items-stretch h-full">
@@ -42,7 +46,12 @@ function MultiMenu(props: MultiMenuProps) {
   return (
     <div className="group">
       <ItemHeader title={title} to={to} />
-      <div className="w-screen top-full left-0 h-0 overflow-hidden group-hover:h-96 group-hover:border-t bg-white shadow-md transition-all duration-75 absolute">
+      <div
+        className={clsx(
+          "w-screen top-full left-0 group-hover:h-96",
+          commonAnimatedClass,
+        )}
+      >
         <div className="container mx-auto py-8">
           <div className="grid grid-cols-6 gap-4 w-full">
             {items.map((item, id) => (
@@ -99,15 +108,16 @@ function SingleMenu(props: SingleMenuProps) {
   return (
     <div className="group">
       <ItemHeader title={title} to={to} />
-      <div className="top-full left-1/2 translate-x-1/2 h-0 bg-white shadow-md overflow-hidden group-hover:h-40 group-hover:border-t transition-all duration-75 absolute">
+      <div
+        className={clsx(
+          "top-full left-1/2 translate-x-1/2 group-hover:h-40",
+          commonAnimatedClass,
+        )}
+      >
         <div className="p-8">
           <div>
             <h5 className="mb-4 uppercase font-medium">
-              <Link
-                to={to}
-                prefetch="intent"
-                className="animate-hover"
-              >
+              <Link to={to} prefetch="intent" className="animate-hover">
                 {title}
               </Link>
             </h5>
@@ -135,7 +145,12 @@ function ImageMenu({ title, imageItems, to }: ImageMenuProps) {
   return (
     <div className="group">
       <ItemHeader title={title} to={to} />
-      <div className="w-screen top-full left-0 h-0 overflow-hidden group-hover:h-96 group-hover:border-t bg-white shadow-md transition-all duration-75 absolute">
+      <div
+        className={clsx(
+          "w-screen top-full left-0 group-hover:h-96",
+          commonAnimatedClass,
+        )}
+      >
         <div className="py-8">
           <div className="grid grid-cols-4 gap-6 w-fit container mx-auto">
             {imageItems.map((item, id) => (
diff --git a/app/modules/menu/MobileMenu.tsx b/app/modules/menu/MobileMenu.tsx
index 9c3e41f3..e5b6c7ba 100644
--- a/app/modules/menu/MobileMenu.tsx
+++ b/app/modules/menu/MobileMenu.tsx
@@ -1,6 +1,5 @@
 import { Link } from "@remix-run/react";
 import { Drawer, useDrawer } from "../Drawer";
-import { IconCaret } from "../Icon";
 import { Disclosure } from "@headlessui/react";
 import { Image } from "@shopify/hydrogen";
 import {
@@ -9,6 +8,7 @@ import {
   type ImageItem,
   type MultiMenuProps,
 } from "./defines";
+import { IconCaret } from "~/components/Icons";
 
 const MenuByType = {
   multi: MultiMenu,
@@ -54,7 +54,10 @@ function MultiMenu(props: MultiMenuProps) {
                     <h5 className="flex justify-between py-3 w-full uppercase font-medium">
                       {item.title}
                       <span className="md:hidden">
-                        <IconCaret direction={open ? "down" : "right"} />
+                        <IconCaret
+                          className="w-4 h-4"
+                          direction={open ? "down" : "right"}
+                        />
                       </span>
                     </h5>
                   </Disclosure.Button>
@@ -98,7 +101,8 @@ function MultiMenu(props: MultiMenuProps) {
         onClick={openMenu}
       >
         <span className="uppercase font-medium">{title}</span>{" "}
-        <IconCaret direction="right" />
+        <IconCaret className="w-4 h-4" />
+        
       </div>
       {content}
     </div>
@@ -148,7 +152,7 @@ function ImageMenu({
         onClick={openMenu}
       >
         <span className="uppercase font-medium">{title}</span>{" "}
-        <IconCaret direction="right" />
+        <IconCaret className="w-4 h-4" />
       </div>
       {content}
     </div>
@@ -197,7 +201,7 @@ function SingleMenu(props: SingleMenuProps) {
         onClick={openMenu}
       >
         <span className="uppercase font-medium">{title}</span>{" "}
-        <IconCaret direction="right" />
+        <IconCaret className="w-4 h-4" />
       </div>
       {content}
     </div>

From 053909a5c9cb25df0dbda75172d47553febac789 Mon Sep 17 00:00:00 2001
From: ken <viethungpro97@gmail.com>
Date: Tue, 18 Jun 2024 11:09:08 +0700
Subject: [PATCH 2/2] chore: fix search

---
 .../predictive-search/usePredictiveSearch.ts         | 12 +++++++++---
 app/modules/menu/DesktopMenu.tsx                     |  1 +
 app/modules/menu/MobileMenu.tsx                      |  2 +-
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/app/components/predictive-search/usePredictiveSearch.ts b/app/components/predictive-search/usePredictiveSearch.ts
index e5316509..6ef1aeaa 100644
--- a/app/components/predictive-search/usePredictiveSearch.ts
+++ b/app/components/predictive-search/usePredictiveSearch.ts
@@ -1,6 +1,6 @@
 import { useFetchers } from "@remix-run/react";
-import { useEffect, useRef } from "react";
-import { NormalizedPredictiveSearch, NormalizedPredictiveSearchResults, UseSearchReturn } from "./types";
+import { useEffect, useRef, useState } from "react";
+import type { NormalizedPredictiveSearch, NormalizedPredictiveSearchResults, UseSearchReturn } from "./types";
 
 export const NO_PREDICTIVE_SEARCH_RESULTS: NormalizedPredictiveSearchResults = [
   {type: 'queries', items: []},
@@ -15,12 +15,18 @@ export function usePredictiveSearch(): UseSearchReturn {
   const searchTerm = useRef<string>('');
   const searchInputRef = useRef<HTMLInputElement | null>(null);
   const searchFetcher = fetchers.find((fetcher) => fetcher.data?.searchResults);
+  let [results, setResults] = useState<NormalizedPredictiveSearchResults>();
+  useEffect(() => {
+    if (searchFetcher) {
+      setResults(searchFetcher.data?.searchResults);
+    }
+  }, [searchFetcher]);
 
   if (searchFetcher?.state === 'loading') {
     searchTerm.current = (searchFetcher.formData?.get('q') || '') as string;
   }
 
-  const search = (searchFetcher?.data?.searchResults || {
+  const search = (results || {
     results: NO_PREDICTIVE_SEARCH_RESULTS,
     totalResults: 0,
   }) as NormalizedPredictiveSearch;
diff --git a/app/modules/menu/DesktopMenu.tsx b/app/modules/menu/DesktopMenu.tsx
index c45b1c74..d166b68b 100644
--- a/app/modules/menu/DesktopMenu.tsx
+++ b/app/modules/menu/DesktopMenu.tsx
@@ -159,6 +159,7 @@ function ImageMenu({ title, imageItems, to }: ImageMenuProps) {
                   <Image
                     data={item.data}
                     className="w-full h-full object-cover"
+                    sizes="auto"
                   />
                   <div className="absolute w-full top-1/2 left-0 text-center -translate-y-1/2 text-white font-medium pointer-events-none">
                     {item.title}
diff --git a/app/modules/menu/MobileMenu.tsx b/app/modules/menu/MobileMenu.tsx
index e5b6c7ba..d4dc896f 100644
--- a/app/modules/menu/MobileMenu.tsx
+++ b/app/modules/menu/MobileMenu.tsx
@@ -134,7 +134,7 @@ function ImageMenu({
         {imageItems.map((item, id) => (
           <Link to={item.to} prefetch="intent" key={id}>
             <div className="w-full aspect-square relative">
-              <Image data={item.data} className="w-full h-full object-cover" />
+              <Image data={item.data} className="w-full h-full object-cover" sizes="auto"/>
               <div className="absolute w-full top-1/2 left-0 text-center -translate-y-1/2 text-white font-medium pointer-events-none">
                 {item.title}
               </div>