feat: add instantsearch page

app/instantsearch/instantsearch.tsx

@@ -1,9 +1,15 @@
 "use client";
-import { Hits, SearchBox } from "react-instantsearch";
+import { useTranslations } from "next-intl";
+import { Configure, Hits, Pagination, RefinementList, SearchBox } from "react-instantsearch";
 import { InstantSearchNext } from "react-instantsearch-nextjs";
 import TypesenseInstantSearchAdapter, { type SearchClient } from "typesense-instantsearch-adapter";
 
+import { ClickablePublicationThumbnail } from "@/components/publication-cover";
+import type { Publication } from "@/types/model";
+
 export function InstantSearch() {
+	const t = useTranslations("SearchPage");
+
 	const typesenseInstantsearchAdapter = new TypesenseInstantSearchAdapter({
 		server: {
 			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -29,11 +35,57 @@ export function InstantSearch() {
 	// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 	const searchClient = typesenseInstantsearchAdapter.searchClient as unknown as SearchClient;
 
+	function DefaultRefinementList({
+		attribute,
+		attributeName,
+	}: {
+		attribute: string;
+		attributeName: string;
+	}) {
+		return (
+			<RefinementList
+				attribute={attribute}
+				classNames={{
+					count: 'before:content-["("] after:content-[")"]',
+					labelText: "px-1",
+				}}
+				searchable={true}
+				searchablePlaceholder={`${t("filter")} ${attributeName}`}
+				showMore={true}
+				showMoreLimit={100}
+			/>
+		);
+	}
+
 	return (
 		// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 		<InstantSearchNext indexName="thomas-bernhard" searchClient={searchClient}>
-			<SearchBox />
-			<Hits />
+			<Configure hitsPerPage={12} />
+			<div>
+				<DefaultRefinementList attribute="language" attributeName="languages" />
+				<DefaultRefinementList attribute="contains.work.title" attributeName="works" />
+				<DefaultRefinementList attribute="contains.translators.name" attributeName="translators" />
+			</div>
+			<div>
+				<div className="flex place-content-between">
+					<SearchBox placeholder={t("filter_publications")} />
+					<Pagination
+						classNames={{
+							root: "float-right",
+							list: "flex gap-1",
+							noRefinementRoot: "hidden",
+						}}
+					/>
+				</div>
+				<Hits
+					classNames={{
+						list: "m-2 grid grid-cols-1 md:grid-cols-4",
+					}}
+					hitComponent={({ hit }) => {
+						return <ClickablePublicationThumbnail publication={hit as unknown as Publication} />;
+					}}
+				/>
+			</div>
 		</InstantSearchNext>
 	);
 }

components/app-header.tsx

@@ -23,6 +23,10 @@ export function AppHeader(): ReactNode {
 			href: createHref({ pathname: "/translator" }),
 			label: t("links.translators"),
 		},
+		search: {
+			href: createHref({ pathname: "/instantsearch" }),
+			label: t("links.search"),
+		},
 	} satisfies Record<string, { href: LinkProps["href"]; label: string }>;
 
 	return (

messages/en.json

@@ -21,6 +21,7 @@
 			"home": "home",
 			"works": "explore works",
 			"languages": "languages",
+			"search": "search",
 			"translators": "translators"
 		},
 		"navigation-primary": "Primary"