Merge branch 'Weaverse:main' into main

Weaverse · Jun 18, 2024 · f165aaf · f165aaf
2 parents fe81a59 + 30deee2
commit f165aaf
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 20 deletions.
diff --git 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/components/predictive-search/usePredictiveSearch.ts b/app/components/predictive-search/usePredictiveSearch.ts
@@ -1,10 +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: [] },
@@ -19,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;
+  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/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.
@@ -101,7 +102,7 @@ export function Drawer({
                           data-test="close-cart"
                         >
                           <IconCaret
-                            className="w-6 h-6"
+                            className="w-4 h-4"
                             direction="left"
                             aria-label="Close panel"
                           />

diff --git a/app/modules/menu/DesktopMenu.tsx b/app/modules/menu/DesktopMenu.tsx
@@ -6,13 +6,17 @@ import {
   type MultiMenuProps,
   type SingleMenuProps,
 } from "./defines";
+import clsx from "clsx";
 
 const MenuByType = {
   multi: MultiMenu,
   image: ImageMenu,
   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,7 +108,12 @@ 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">
@@ -131,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) => (
@@ -140,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
@@ -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>
@@ -130,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>
@@ -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>