Iterated search experience

components/layout/header/header.tsx

@@ -47,7 +47,7 @@ export default async function Header({ locale }: HeaderProps) {
                 {mainMenu.map((item: { title: string; slug: string }, i: number) => {
                   return (
                     <li key={i}>
-                      <Link className="font-medium" href={`${locale}/category/${item.slug}`}>
+                      <Link className="font-medium" href={`/${locale}/category/${item.slug}`}>
                         {item.title}
                       </Link>
                     </li>

components/layout/header/search/modal.tsx

@@ -1,26 +1,64 @@
 'use client';
 
-import Search from '@/components/search/search';
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
+import Text from '@/components/ui/text/text';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
 import OpenSearch from './open-search';
 
+import { Highlight, Hits } from 'react-instantsearch';
+
+import Search from '@/components/search/search';
+import Link from 'next/link';
+
 export default function SearchModal() {
   const [isOpen, setIsOpen] = useState(false);
   const t = useTranslations('search');
 
+  const Hit = (props: any) => {
+    const { hit } = props;
+    const { handle, price } = props.hit;
+
+    return (
+      <Link
+        onClick={() => setIsOpen(!isOpen)}
+        href={`/product/${handle}`}
+        className="flex w-full gap-4 outline-offset-0"
+      >
+        <div className="relative aspect-square h-16 w-16 bg-neutral-300" />
+        <div>
+          <Text className="!text-sm text-low-contrast" variant="label">
+            Brand
+          </Text>
+          <h3 className="flex text-sm font-normal text-high-contrast">
+            <Highlight attribute="title" hit={hit} />
+          </h3>
+          <p className="text-sm font-bold ">{price} SEK</p>
+        </div>
+      </Link>
+    );
+  };
+
   return (
     <>
       <Sheet open={isOpen} onOpenChange={() => setIsOpen(!isOpen)}>
-        <SheetTrigger aria-label="Open search">
-          <OpenSearch />
+        <SheetTrigger asChild>
+          <button aria-label="Open search">
+            <OpenSearch />
+          </button>
         </SheetTrigger>
-        <SheetContent side="right" className="bg-app">
+        <SheetContent side="right" className="flex flex-col bg-app">
           <SheetHeader>
             <SheetTitle className="text-lg font-semibold">{t('search')}</SheetTitle>
           </SheetHeader>
-          <Search />
+          <Search>
+            <Hits
+              hitComponent={Hit}
+              classNames={{
+                list: 'mt-4 grid w-full grid-cols-1 overflow-auto gap-6'
+              }}
+            />
+          </Search>
         </SheetContent>
       </Sheet>
     </>