Update PredictiveSearchResult component to adjust spacing based on it…

…em type
kobykotiv · Aug 17, 2024 · fff9bfc · fff9bfc
1 parent 30c1156
commit fff9bfc
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/app/components/predictive-search/PredictiveSearchResult.tsx b/app/components/predictive-search/PredictiveSearchResult.tsx
@@ -35,7 +35,9 @@ export function PredictiveSearchResult({
         <ul
           className={clsx(
             "pt-5",
-            type === "products" ? "space-y-4" : "space-y-1",
+            type === "queries" && "space-y-1",
+            type === "articles" && "space-y-3",
+            type === "products" && "space-y-4",
           )}
         >
           {items.map((item: NormalizedPredictiveSearchResultItem) => (

diff --git a/app/components/predictive-search/PredictiveSearchResults.tsx b/app/components/predictive-search/PredictiveSearchResults.tsx
@@ -1,6 +1,7 @@
 import { Link } from "@remix-run/react";
 import { PredictiveSearchResult } from "./PredictiveSearchResult";
 import { usePredictiveSearch } from "./usePredictiveSearch";
+import { IconArrowRight } from "../Icons";
 
 export function PredictiveSearchResults() {
   let { results, totalResults, searchTerm, searchInputRef } =
@@ -64,8 +65,10 @@ export function PredictiveSearchResults() {
               <Link
                 onClick={goToSearchResult}
                 to={`/search?q=${searchTerm.current}`}
+                className="flex items-center gap-2"
               >
                 <span className="underline-animation">View all products</span>
+                <IconArrowRight className="w-4 h-4 mb-[3px]" />
               </Link>
             </div>
           )}