function Example() {
const pipeline = new Pipeline(
{
account: '1594153711901724220',
collection: 'bestbuy',
},
'query',
new PosNegTracking('rating'),
);
const SearchPlayground = React.memo(() => {
const { results } = useSearch({ allowEmptySearch: false });
const { consumeInteractionToken } = useTracking();
const { query } = useQuery();
return (
<div className="flex flex-col space-y-6">
<Input />
{results ? (
<ul className="flex flex-col space-y-8 list-disc px-6">
{results.map(({ values: { name }, token }) => {
return (
<li>
<div className="flex flex-col space-y-2">
<h1>{name}</h1>
<ButtonGroup attached>
<Button onClick={() => consumeInteractionToken(token.neg, 'productView', 1)}>
Negative action
</Button>
<Button onClick={() => consumeInteractionToken(token.pos, 'productView', 1)}>
Positive action
</Button>
</ButtonGroup>
</div>
</li>
);
})}
</ul>
) : null}
</div>
);
});
return (
<SearchProvider
search={{
pipeline,
fields: new FieldDictionary({
title: 'name',
subtitle: (data) => data.level4 || data.level3 || data.level2 || data.level1 || data.brand,
}),
}}
>
<SearchPlayground />
</SearchProvider>
);
}