Update PredictiveSearch component and related files

kobykotiv · Aug 17, 2024 · 1c71652 · 1c71652
1 parent 363ebb9
commit 1c71652
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 48 deletions.
diff --git a/app/components/predictive-search/PredictiveSearch.tsx b/app/components/predictive-search/PredictiveSearch.tsx
@@ -3,10 +3,9 @@ import { Input } from "~/modules";
 import { PredictiveSearchResults } from "./PredictiveSearchResults";
 import { PredictiveSearchForm } from "./SearchForm";
 
-export function PredictiveSearch(props: { isOpen?: boolean }) {
-  let { isOpen } = props;
+export function PredictiveSearch({ isOpen }: { isOpen?: boolean }) {
   return (
-    <div className="relative border-t border-line">
+    <div className="relative pt-[var(--topbar-height)] transition-all">
       <PredictiveSearchForm>
         {({ fetchResults, inputRef }) => (
           <div className="mx-auto w-full max-w-[560px] p-6">

diff --git a/app/components/predictive-search/PredictiveSearchResult.tsx b/app/components/predictive-search/PredictiveSearchResult.tsx
@@ -20,8 +20,8 @@ export function PredictiveSearchResult({
 
   return (
     <div
-      className="predictive-search-result flex flex-col gap-4 divide-y divide-line"
       key={type}
+      className="predictive-search-result flex flex-col gap-4 divide-y divide-line/50"
     >
       <Link
         prefetch="intent"

diff --git a/app/components/predictive-search/PredictiveSearchResults.tsx b/app/components/predictive-search/PredictiveSearchResults.tsx
@@ -5,9 +5,9 @@ import { usePredictiveSearch } from "./usePredictiveSearch";
 export function PredictiveSearchResults() {
   let { results, totalResults, searchTerm, searchInputRef } =
     usePredictiveSearch();
-  let queries = results?.find((result) => result.type === "queries");
-  let articles = results?.find((result) => result.type === "articles");
-  let products = results?.find((result) => result.type === "products");
+  let queries = results?.find(({ type }) => type === "queries");
+  let articles = results?.find(({ type }) => type === "articles");
+  let products = results?.find(({ type }) => type === "products");
 
   function goToSearchResult(event: React.MouseEvent<HTMLAnchorElement>) {
     let type = event.currentTarget.dataset.type;
@@ -32,7 +32,7 @@ export function PredictiveSearchResults() {
     );
   }
   return (
-    <div className="absolute left-1/2 top-20 z-10 flex w-fit -translate-x-1/2 items-center justify-center shadow-header">
+    <div className="absolute left-1/2 top-full z-10 flex w-fit -translate-x-1/2 items-center justify-center shadow-mega-menu">
       <div className="grid w-screen min-w-[430px] max-w-[720px] grid-cols-1 gap-6 bg-white p-6 lg:grid-cols-[1fr_2fr] max-h-[80vh] overflow-y-auto">
         <div className="space-y-8">
           <div className="flex flex-col gap-4 divide-y divide-line">
@@ -52,20 +52,22 @@ export function PredictiveSearchResults() {
             />
           </div>
         </div>
-        <div>
+        <div className="space-y-6">
           <PredictiveSearchResult
             goToSearchResult={goToSearchResult}
             items={products?.items?.slice(0, 5)}
             searchTerm={searchTerm}
             type="products"
           />
           {searchTerm.current && (
-            <Link
-              onClick={goToSearchResult}
-              to={`/search?q=${searchTerm.current}`}
-            >
-              <p className="mt-6 underline">View all products</p>
-            </Link>
+            <div>
+              <Link
+                onClick={goToSearchResult}
+                to={`/search?q=${searchTerm.current}`}
+              >
+                <span className="underline-animation">View all products</span>
+              </Link>
+            </div>
           )}
         </div>
       </div>

diff --git a/app/components/predictive-search/ResultItem.tsx b/app/components/predictive-search/ResultItem.tsx
@@ -1,61 +1,71 @@
-import { Link } from "@remix-run/react";
 import { Image, Money } from "@shopify/hydrogen";
 import type { SearchResultItemProps } from "./types";
+import { Link } from "~/modules/Link";
+import clsx from "clsx";
+import type { MoneyV2 } from "@shopify/hydrogen/storefront-api-types";
+import { CompareAtPrice } from "../CompareAtPrice";
+import { getImageAspectRatio, isDiscounted } from "~/lib/utils";
 
 export function SearchResultItem({
   goToSearchResult,
-  item,
+  item: {
+    id,
+    __typename,
+    image,
+    compareAtPrice,
+    price,
+    title,
+    url,
+    vendor,
+    styledTitle,
+  },
 }: SearchResultItemProps) {
   return (
-    <li key={item.id}>
+    <li key={id}>
       <Link
         className="flex gap-4"
         onClick={goToSearchResult}
-        to={item.url}
-        data-type={item.__typename}
+        to={url}
+        data-type={__typename}
       >
-        {item.__typename === "Product" && (
+        {__typename === "Product" && (
           <div className="h-20 w-20 shrink-0">
-            {item.image?.url && (
+            {image?.url && (
               <Image
-                alt={item.image.altText ?? ""}
-                src={item.image.url}
-                width={80}
-                height={80}
-                className="h-full w-full object-cover"
+                alt={image.altText ?? ""}
+                src={image.url}
+                width={200}
+                height={200}
+                aspectRatio={getImageAspectRatio(image, "adapt")}
+                className="h-full w-full object-cover object-center"
               />
             )}
           </div>
         )}
         <div className="space-y-1">
-          {item.vendor && <div className="text-gray-500">By {item.vendor}</div>}
-          {item.styledTitle ? (
+          {vendor && <div className="text-body/50 text-sm">By {vendor}</div>}
+          {styledTitle ? (
             <div
-              dangerouslySetInnerHTML={{
-                __html: item.styledTitle,
-              }}
+              className="underline-animation"
+              dangerouslySetInnerHTML={{ __html: styledTitle }}
             />
           ) : (
             <div
-              className={
-                item.__typename === "Product" ? "line-clamp-1" : "line-clamp-2"
-              }
+              className={clsx(
+                __typename === "Product" ? "line-clamp-1" : "line-clamp-2",
+              )}
             >
-              {item.title}
+              <span className="underline-animation">{title}</span>
+            </div>
+          )}
+          {price && (
+            <div className="flex gap-2 text-sm">
+              <Money withoutTrailingZeros data={price as MoneyV2} />
+              {isDiscounted(price as MoneyV2, compareAtPrice as MoneyV2) && (
+                <CompareAtPrice data={compareAtPrice as MoneyV2} />
+              )}
             </div>
           )}
-          <div className="flex gap-2">
-            {item?.compareAtPrice && (
-              <span className="text-label-sale line-through">
-                <Money data={item.compareAtPrice} />
-              </span>
-            )}
-            {item?.price && (
-              <span>
-                <Money data={item.price} />
-              </span>
-            )}
-          </div>
         </div>
       </Link>
     </li>