function Example() {
const pipeline = new Pipeline(
{
account: '1594153711901724220',
collection: 'bestbuy',
},
'query',
);
const priceFilter = new RangeFilterBuilder({
name: 'price',
field: 'price',
});
const ratingFilter = new RangeFilterBuilder({
name: 'rating',
field: 'rating',
});
const FilterRender = React.memo(({ name, title }) => {
const { range, setRange, min, max } = useRangeFilter(name);
if (!range || max === 0) {
return null;
}
return (
<div className="mb-4">
<div className="flex items-center justify-between mb-2">
<Heading as="h6" className="font-medium tracking-wide text-gray-400 uppercase">
{title}
</Heading>
</div>
<RangeInput min={min} max={max} value={range} onChange={setRange} />
</div>
);
});
const PriceFilter = () => <FilterRender name="price" title="Price" />;
const RatingFilter = () => <FilterRender name="rating" title="Rating" />;
const SearchPlayground = React.memo(() => {
const { results } = useSearch();
return (
<div className="flex flex-col space-y-6">
<Input />
<div className="flex -mx-3">
<div className="w-1/4 px-3 border-gray-100 border-r space-y-6">
{results && (
<>
<PriceFilter />
<RatingFilter />
</>
)}
</div>
<div className="w-3/4 px-3">
<Results />
</div>
</div>
</div>
);
});
return (
<SearchProvider
search={{
pipeline,
fields: new FieldDictionary({
title: 'name',
subtitle: (data) => data.level4 || data.level3 || data.level2 || data.level1 || data.brand,
}),
filters: [priceFilter, ratingFilter],
}}
>
<SearchPlayground />
</SearchProvider>
);
}