"use client";
import { instantMeiliSearch } from "@meilisearch/instant-meilisearch";
import { InfiniteHits, InstantSearch, SearchBox } from "react-instantsearch";
import { env } from "~/env";
export const { searchClient } = instantMeiliSearch(
env.NEXT_PUBLIC_SEARCH_API_URL,
env.NEXT_PUBLIC_SEARCH_API_KEY,
);
export default function InstantSearchComponent() {
return (
// @ts-ignore
<InstantSearch indexName="steam-videogames" searchClient={searchClient}>
{/* @ts-ignore */}
<SearchBox />
{/* @ts-ignore */}
<InfiniteHits hitComponent={Hit} />
</InstantSearch>
);
}
function Hit({
hit,
}: {
hit: {
id: string;
image: string;
name: string;
description: string;
};
}) {
return (
<article key={hit.id}>
<img src={hit.image} alt={hit.name} />
<h1>{hit.name}</h1>
<p>${hit.description}</p>
</article>
);
}
"use client";
import { instantMeiliSearch } from "@meilisearch/instant-meilisearch";
import { InfiniteHits, InstantSearch, SearchBox } from "react-instantsearch";
import { env } from "~/env";
export const { searchClient } = instantMeiliSearch(
env.NEXT_PUBLIC_SEARCH_API_URL,
env.NEXT_PUBLIC_SEARCH_API_KEY,
);
export default function InstantSearchComponent() {
return (
// @ts-ignore
<InstantSearch indexName="steam-videogames" searchClient={searchClient}>
{/* @ts-ignore */}
<SearchBox />
{/* @ts-ignore */}
<InfiniteHits hitComponent={Hit} />
</InstantSearch>
);
}
function Hit({
hit,
}: {
hit: {
id: string;
image: string;
name: string;
description: string;
};
}) {
return (
<article key={hit.id}>
<img src={hit.image} alt={hit.name} />
<h1>{hit.name}</h1>
<p>${hit.description}</p>
</article>
);
}