function Example() {
const pipeline = new Pipeline(
{
account: '1594153711901724220',
collection: 'bestbuy',
},
'query',
);
const SearchPlayground = React.memo(() => {
const { search } = useSearch();
const { resultsPerPage, setResultsPerPage } = useResultsPerPage();
const { query } = useQuery();
return (
<div className="flex flex-col space-y-6">
<div className="flex space-x-4">
<div className="w-3/5">
<Input value={query} onChange={(value) => search(value)} />
</div>
<div className="w-2/5">
<Select value={`${resultsPerPage}`} onChange={(value) => setResultsPerPage(Number(value))}>
<Option value="3">3</Option>
<Option value="5">5</Option>
<Option value="10">10</Option>
<Option value="15">15</Option>
</Select>
</div>
</div>
<Results />
</div>
);
});
return (
<SearchProvider
search={{
pipeline,
fields: new FieldDictionary({
subtitle: (data) => data.level4 || data.level3 || data.level2 || data.level1 || data.brand,
title: 'name',
}),
}}
>
<SearchPlayground />
</SearchProvider>
);
}