Tested to add algolia search

components/search/search.tsx

@@ -0,0 +1,52 @@
+import algoliasearch from 'algoliasearch/lite';
+import { Highlight, Hits, InstantSearch, SearchBox } from 'react-instantsearch';
+
+const searchClient = algoliasearch(
+  `${process.env.NEXT_PUBLIC_ALGOLIA_APPLICATION_ID}`,
+  `${process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_ONLY_API_KEY}`
+);
+
+export default function Search() {
+  // Hit.
+  function Hit(props: any) {
+    return (
+      <li>
+        <a href={`/product/${props.hit.handle}`} className="flex gap-4">
+          <div className="relative aspect-square h-16 w-16 bg-neutral-300" />
+          <div>
+            <h3 className="mt-2 flex text-lg font-bold text-gray-900">
+              <Highlight attribute="title" hit={props.hit} />
+            </h3>
+            <p className="text-gray-700">{props.hit.price} SEK</p>
+          </div>
+        </a>
+      </li>
+    );
+  }
+  return (
+    <div className="flex flex-col overflow-auto">
+      <InstantSearch searchClient={searchClient} indexName="shopify_products">
+        {/* Widgets */}
+        <SearchBox
+          placeholder="Vad letar du efter?"
+          classNames={{
+            root: 'mt-4',
+            form: 'relative',
+            input:
+              'block w-full appearance-none rounded-none h-11 pl-9 pr-3 py-2 bg-white border border-ui-border',
+            submit: 'absolute flex items-center justify-center top-0 left-0 bottom-0 w-11 h-11',
+            submitIcon: 'w-4 h-4'
+          }}
+        />
+
+        <Hits
+          classNames={{
+            root: 'flex flex-col mt-4',
+            list: 'grid grid-cols-1 gap-4'
+          }}
+          hitComponent={Hit}
+        />
+      </InstantSearch>
+    </div>
+  );
+}