Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import React from 'react';
import {
RefinementList,
StarRating,
Toggle,
HierarchicalMenu,
SearchBox,
MultiRange,
ClearAll,
} from 'react-instantsearch/dom';
import RangeSlider from './RangeSlider';
import VoiceRecognition from './VoiceRecognition';
import { SidebarWrapper } from './AlgoliaComponent.style';
export default ({ setVoice }) => (
<SidebarWrapper className="isoAlgoliaSidebar">
<SearchBox translations={{ placeholder: 'Search here' }} />
<VoiceRecognition setVoice={setVoice} />
<div className="isoAlgoliaSidebarItem">
<h3 className="isoAlgoliaSidebarTitle">Multi Range</h3>
<MultiRange
attributeName="price"
items={[
{ end: 10, label: '<$10' },
{ start: 10, end: 100, label: '$10-$100' },
{ start: 100, end: 500, label: '$100-$500' },
{ start: 500, label: '>$500' },
]}
/>
</div>
<div className="isoAlgoliaSidebarItem">
<h3 className="isoAlgoliaSidebarTitle" style={{ marginBottom: 10 }}>
Slider
</h3>
<RangeSlider attributeName="price" />
</div>
<div className="isoAlgoliaSidebarItem">
<h3 className="isoAlgoliaSidebarTitle">Category</h3>
<RefinementList attributeName="categories" />
</div>
<div className="isoAlgoliaSidebarItem">
<h3 className="isoAlgoliaSidebarTitle">Brand</h3>
<RefinementList attributeName="brand" withSearchBox />
</div>
<div className="isoAlgoliaSidebarItem">
<HierarchicalMenu
attributes={[
'hierarchicalCategories.lvl0',
'hierarchicalCategories.lvl1',
'hierarchicalCategories.lvl2',
]}
/>
</div>
<div className="isoAlgoliaSidebarItem">
<h3 className="isoAlgoliaSidebarTitle">Rating</h3>
<StarRating attributeName="rating" style={{ background: '#ff0000' }} />
</div>
<div className="isoAlgoliaSidebarItem isoInline">
<h3 className="isoAlgoliaSidebarTitle">Toggle</h3>
<Toggle attributeName="free_shipping" label="Free Shipping" />
</div>
<ClearAll />
</SidebarWrapper>
);