4466ba436b
## Description This PR ensures that the default prettier config is used for examples and templates. This config is compatible with `prettier@3` as well (upgrading prettier is bigger change that can be a future PR). ## Changes - Updated `.prettierrc.json` in root with `"trailingComma": "es5"` (will be needed upgrading to prettier@3) - Added `examples/.prettierrc.json` with default config (this will change every example) - Added `packages/create-next-app/templates/.prettierrc.json` with default config (this will change every template) ## Related - Fixes #54402 - Closes #54409
66 lines
1.4 KiB
TypeScript
66 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import algoliasearch from "algoliasearch/lite";
|
|
import type { Hit as AlgoliaHit } from "instantsearch.js";
|
|
import React from "react";
|
|
import {
|
|
Configure,
|
|
Highlight,
|
|
Hits,
|
|
Pagination,
|
|
RefinementList,
|
|
SearchBox,
|
|
} from "react-instantsearch";
|
|
import { InstantSearchNext } from "react-instantsearch-nextjs";
|
|
|
|
import { Panel } from "./Panel";
|
|
|
|
type HitProps = {
|
|
hit: AlgoliaHit<{
|
|
name: string;
|
|
description: string;
|
|
price: number;
|
|
}>;
|
|
};
|
|
|
|
const APP_ID = "latency";
|
|
const API_KEY = "6be0576ff61c053d5f9a3225e2a90f76";
|
|
const INDEX_NAME = "instant_search";
|
|
|
|
const searchClient = algoliasearch(APP_ID, API_KEY);
|
|
|
|
function Hit({ hit }: HitProps) {
|
|
return (
|
|
<>
|
|
<Highlight hit={hit} attribute="name" className="Hit-label" />
|
|
<span className="Hit-price">${hit.price}</span>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default function Search() {
|
|
return (
|
|
<InstantSearchNext
|
|
searchClient={searchClient}
|
|
indexName={INDEX_NAME}
|
|
routing
|
|
future={{
|
|
preserveSharedStateOnUnmount: true,
|
|
}}
|
|
>
|
|
<Configure hitsPerPage={12} />
|
|
<main>
|
|
<div>
|
|
<Panel header="Brands">
|
|
<RefinementList attribute="brand" showMore />
|
|
</Panel>
|
|
</div>
|
|
<div>
|
|
<SearchBox />
|
|
<Hits hitComponent={Hit} />
|
|
<Pagination />
|
|
</div>
|
|
</main>
|
|
</InstantSearchNext>
|
|
);
|
|
}
|