hds-web 1.36.2 → 1.36.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.es.js +2 -2
- package/dist/index.js +2 -2
- package/package.json +1 -1
- package/src/HDS/components/Headers/v3Header.js +1 -1
- package/src/HDS/helpers/AlgoliaSearch/constants.js +101 -19
- package/src/HDS/helpers/AlgoliaSearch/searchfooter.js +8 -2
- package/src/HDS/helpers/AlgoliaSearch/searchresults.js +101 -37
- package/src/HDS/helpers/AlgoliaSearch/searchwrapper.js +94 -64
package/package.json
CHANGED
|
@@ -379,7 +379,7 @@ export default function V3Header(props) {
|
|
|
379
379
|
|
|
380
380
|
<div
|
|
381
381
|
className={
|
|
382
|
-
"bg-neutral-100 shadow-sh1 hds-hidden-tbl block fixed w-full tb:max-w-[480px]
|
|
382
|
+
"bg-neutral-100 shadow-sh1 hds-hidden-tbl block fixed w-full tb:max-w-[480px] tb:left-auto tb:right-0 mx-auto left-4 top-0 transform transition duration-500 ease-in-out h-[calc(100%-1px)] max-h-screen overflow-y-auto" +
|
|
383
383
|
(mobileNavOpen ? " translate-x-0" : " translate-x-[1240px]")
|
|
384
384
|
}
|
|
385
385
|
>
|
|
@@ -4,6 +4,7 @@ export const INDEX_TYPES = Object.freeze({
|
|
|
4
4
|
blog: "blog",
|
|
5
5
|
docs: "docs",
|
|
6
6
|
learn: "learn",
|
|
7
|
+
events: "events",
|
|
7
8
|
// tutorials: "Tutorials",
|
|
8
9
|
// case_studies: "Case studies",
|
|
9
10
|
// events: "Events",
|
|
@@ -11,35 +12,112 @@ export const INDEX_TYPES = Object.freeze({
|
|
|
11
12
|
});
|
|
12
13
|
|
|
13
14
|
export const SEARCH_INDICES = [
|
|
15
|
+
{
|
|
16
|
+
name: `marketing_events`,
|
|
17
|
+
title: `Hasura Events`,
|
|
18
|
+
type: INDEX_TYPES.events,
|
|
19
|
+
},
|
|
14
20
|
{ name: `blog-production`, title: `Hasura Blog`, type: INDEX_TYPES.blog },
|
|
15
|
-
{
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
{
|
|
21
|
+
{
|
|
22
|
+
name: `graphql-docs-prod`,
|
|
23
|
+
title: `Hasura GraphQL Engine Docs`,
|
|
24
|
+
type: INDEX_TYPES.docs,
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
name: `learn-intro-graphql`,
|
|
28
|
+
title: `Learn Intro GraphQL`,
|
|
29
|
+
type: INDEX_TYPES.learn,
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
name: `learn-intro-graphql-zh`,
|
|
33
|
+
title: `Learn Intro GraphQL`,
|
|
34
|
+
type: INDEX_TYPES.learn,
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
name: `learn-elm-graphql`,
|
|
38
|
+
title: `Learn ELM GraphQl`,
|
|
39
|
+
type: INDEX_TYPES.learn,
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
name: `learn-flutter-graphql`,
|
|
43
|
+
title: `Learn Flutter GraphQL`,
|
|
44
|
+
type: INDEX_TYPES.learn,
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
name: `learn-database-mysql`,
|
|
48
|
+
title: `Learn Database MySQL`,
|
|
49
|
+
type: INDEX_TYPES.learn,
|
|
50
|
+
},
|
|
21
51
|
{
|
|
22
52
|
name: `learn-database-postgresql`,
|
|
23
53
|
title: `Learn Database PostgreSQL`,
|
|
24
54
|
type: INDEX_TYPES.learn,
|
|
25
55
|
},
|
|
26
|
-
{
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
{
|
|
32
|
-
|
|
56
|
+
{
|
|
57
|
+
name: `learn-hasura-backend`,
|
|
58
|
+
title: `Learn Hasura Backend`,
|
|
59
|
+
type: INDEX_TYPES.learn,
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
name: `learn-hasura-backend-ja`,
|
|
63
|
+
title: `Learn Hasura Backend`,
|
|
64
|
+
type: INDEX_TYPES.learn,
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
name: `learn-hasura-backend-zh`,
|
|
68
|
+
title: `Learn Hasura Backend`,
|
|
69
|
+
type: INDEX_TYPES.learn,
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
name: `learn-hasura-backend-advanced`,
|
|
73
|
+
title: `Learn Hasura Backend Advanced`,
|
|
74
|
+
type: INDEX_TYPES.learn,
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
name: `learn-hasura-auth-slack`,
|
|
78
|
+
title: `Learn Hasura Auth Slack`,
|
|
79
|
+
type: INDEX_TYPES.learn,
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
name: `learn-react-apollo-hooks`,
|
|
83
|
+
title: `Learn React Apollo Hooks`,
|
|
84
|
+
type: INDEX_TYPES.learn,
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
name: `learn-react-apollo`,
|
|
88
|
+
title: `Learn React Apollo`,
|
|
89
|
+
type: INDEX_TYPES.learn,
|
|
90
|
+
},
|
|
33
91
|
{
|
|
34
92
|
name: `learn-typescript-react-apollo`,
|
|
35
93
|
title: `Learn TypeScript React Apollo`,
|
|
36
94
|
type: INDEX_TYPES.learn,
|
|
37
95
|
},
|
|
38
|
-
{
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
96
|
+
{
|
|
97
|
+
name: `learn-angular-apollo`,
|
|
98
|
+
title: `Learn Angular Apollo`,
|
|
99
|
+
type: INDEX_TYPES.learn,
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
name: `learn-vue-apollo`,
|
|
103
|
+
title: `Learn Vue Apollo`,
|
|
104
|
+
type: INDEX_TYPES.learn,
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
name: `learn-ios-apollo`,
|
|
108
|
+
title: `Learn IOS Apollo`,
|
|
109
|
+
type: INDEX_TYPES.learn,
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
name: `learn-svelte-apollo`,
|
|
113
|
+
title: `Learn Svelte Apollo`,
|
|
114
|
+
type: INDEX_TYPES.learn,
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
name: `learn-android-apollo`,
|
|
118
|
+
title: `Learn Android Apollo`,
|
|
119
|
+
type: INDEX_TYPES.learn,
|
|
120
|
+
},
|
|
43
121
|
{
|
|
44
122
|
name: `learn-react-native-apollo`,
|
|
45
123
|
title: `Learn React Native Apollo`,
|
|
@@ -50,5 +128,9 @@ export const SEARCH_INDICES = [
|
|
|
50
128
|
title: `Learn Reason React Apollo`,
|
|
51
129
|
type: INDEX_TYPES.learn,
|
|
52
130
|
},
|
|
53
|
-
{
|
|
131
|
+
{
|
|
132
|
+
name: `learn-database-mssql`,
|
|
133
|
+
title: `Learn MicrosoftSQL`,
|
|
134
|
+
type: INDEX_TYPES.learn,
|
|
135
|
+
},
|
|
54
136
|
];
|
|
@@ -9,11 +9,17 @@ const SearchFooter = () => (
|
|
|
9
9
|
<p>Unable to find what you're looking for?</p>
|
|
10
10
|
<p>
|
|
11
11
|
Reach out to our{" "}
|
|
12
|
-
<a
|
|
12
|
+
<a
|
|
13
|
+
className="text-blue-500 hover:text-blue-700"
|
|
14
|
+
href="https://discord.com/invite/hasura"
|
|
15
|
+
target="_blank"
|
|
16
|
+
rel="noopener noreferrer"
|
|
17
|
+
>
|
|
13
18
|
Discord Community
|
|
14
19
|
</a>{" "}
|
|
15
20
|
or start a{" "}
|
|
16
|
-
<a
|
|
21
|
+
<a
|
|
22
|
+
className="text-blue-500 hover:text-blue-700"
|
|
17
23
|
href="https://github.com/hasura/graphql-engine/discussions"
|
|
18
24
|
target="_blank"
|
|
19
25
|
rel="noopener noreferrer"
|
|
@@ -1,44 +1,73 @@
|
|
|
1
1
|
import React, { Fragment } from "react";
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
connectStateResults,
|
|
4
|
+
Highlight,
|
|
5
|
+
Hits,
|
|
6
|
+
Index,
|
|
7
|
+
Snippet,
|
|
8
|
+
} from "react-instantsearch-dom";
|
|
3
9
|
import { INDEX_TYPES } from "./constants";
|
|
4
10
|
import SearchFooter from "./searchfooter";
|
|
5
|
-
import { Typography } from
|
|
6
|
-
import { Icon } from
|
|
11
|
+
import { Typography } from "../../foundation/Typography";
|
|
12
|
+
import { Icon } from "../../components/common-components/Icon";
|
|
7
13
|
|
|
8
14
|
// import SearchFooter from "./SearchFooter";
|
|
9
15
|
|
|
10
|
-
const baseDomain =
|
|
11
|
-
|
|
16
|
+
const baseDomain = "hasura.io";
|
|
12
17
|
|
|
13
18
|
const HitsHeader = ({ searchResults, indexTitle, showSeparator, allIndex }) => {
|
|
14
19
|
const hitCount = searchResults && searchResults.nbHits;
|
|
15
20
|
const titleIcon = () => {
|
|
16
|
-
if(indexTitle === "Hasura Blog") {
|
|
21
|
+
if (indexTitle === "Hasura Blog") {
|
|
17
22
|
return (
|
|
18
|
-
<Icon
|
|
19
|
-
|
|
23
|
+
<Icon
|
|
24
|
+
height={"block w-6 mr-3 h-6 stroke-[2px] transition ease-in-out"}
|
|
25
|
+
variant="pentool02"
|
|
26
|
+
strokeClass="stroke-blue-500"
|
|
27
|
+
/>
|
|
28
|
+
);
|
|
20
29
|
}
|
|
21
|
-
if(indexTitle === "Hasura GraphQL Engine Docs") {
|
|
30
|
+
if (indexTitle === "Hasura GraphQL Engine Docs") {
|
|
22
31
|
return (
|
|
23
|
-
<Icon
|
|
24
|
-
|
|
32
|
+
<Icon
|
|
33
|
+
height={"block w-6 mr-3 h-6 stroke-[2px] transition ease-in-out"}
|
|
34
|
+
variant="file02"
|
|
35
|
+
strokeClass="stroke-blue-500"
|
|
36
|
+
/>
|
|
37
|
+
);
|
|
25
38
|
}
|
|
39
|
+
|
|
40
|
+
if (indexTitle === "Hasura Events") {
|
|
41
|
+
return (
|
|
42
|
+
<Icon
|
|
43
|
+
height={"block w-6 mr-3 h-6 stroke-[2px] transition ease-in-out"}
|
|
44
|
+
variant="calendarplus02"
|
|
45
|
+
strokeClass="stroke-blue-500"
|
|
46
|
+
/>
|
|
47
|
+
);
|
|
48
|
+
}
|
|
49
|
+
|
|
26
50
|
return (
|
|
27
|
-
<Icon
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
51
|
+
<Icon
|
|
52
|
+
height={"block w-6 mr-3 h-6 stroke-[2px] transition ease-in-out"}
|
|
53
|
+
variant="graduationhat01"
|
|
54
|
+
strokeClass="stroke-blue-500"
|
|
55
|
+
/>
|
|
56
|
+
);
|
|
57
|
+
};
|
|
58
|
+
|
|
31
59
|
return hitCount > 0 ? (
|
|
32
60
|
<Fragment>
|
|
33
61
|
{showSeparator && <hr className="my-8 border-t-neutral-200" />}
|
|
34
62
|
{/* <div className="HitCount">
|
|
35
63
|
{hitCount} result{hitCount !== 1 ? `s` : ``}
|
|
36
64
|
</div> */}
|
|
37
|
-
<Typography
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
65
|
+
<Typography
|
|
66
|
+
textStyle="sub1"
|
|
67
|
+
className="pb-4 pl-2 flex items-center text-neutral-800 font-normal sticky tb-m:z-0 top-[170px] tb:top-[160px] tb-m:top-[120px] bg-neutral-100"
|
|
68
|
+
>
|
|
69
|
+
{titleIcon()}
|
|
70
|
+
|
|
42
71
|
{indexTitle}
|
|
43
72
|
</Typography>
|
|
44
73
|
</Fragment>
|
|
@@ -58,14 +87,21 @@ const PageHit = ({ hit, indexType }) => (
|
|
|
58
87
|
</div>
|
|
59
88
|
<div>
|
|
60
89
|
{!!hit.hierarchy && (
|
|
61
|
-
<Typography
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
90
|
+
<Typography
|
|
91
|
+
textStyle="body1c-bold"
|
|
92
|
+
className="font-bold flex items-start pb-3"
|
|
93
|
+
>
|
|
94
|
+
{`${
|
|
95
|
+
Object.values(hit.hierarchy)
|
|
96
|
+
.filter((h) => !!h)
|
|
97
|
+
.reverse()[0]
|
|
98
|
+
}`}
|
|
99
|
+
</Typography>
|
|
67
100
|
)}
|
|
68
|
-
<Typography
|
|
101
|
+
<Typography
|
|
102
|
+
textStyle="body2"
|
|
103
|
+
className="text-neutral-800 word-break"
|
|
104
|
+
>
|
|
69
105
|
<Snippet attribute="content" hit={hit} tagName="mark" />
|
|
70
106
|
</Typography>
|
|
71
107
|
</div>
|
|
@@ -76,10 +112,16 @@ const PageHit = ({ hit, indexType }) => (
|
|
|
76
112
|
<div className="w-3 h-3 rounded-full bg-blue-500"></div>
|
|
77
113
|
</div>
|
|
78
114
|
<div>
|
|
79
|
-
<Typography
|
|
115
|
+
<Typography
|
|
116
|
+
textStyle="body1c-bold"
|
|
117
|
+
className="font-bold text-neutral-800 pb-3"
|
|
118
|
+
>
|
|
80
119
|
<Highlight attribute="title" hit={hit} tagName="mark" />
|
|
81
120
|
</Typography>
|
|
82
|
-
<Typography
|
|
121
|
+
<Typography
|
|
122
|
+
textStyle="body2"
|
|
123
|
+
className="text-neutral-800 word-break"
|
|
124
|
+
>
|
|
83
125
|
<Snippet attribute="excerpt" hit={hit} tagName="mark" />
|
|
84
126
|
</Typography>
|
|
85
127
|
</div>
|
|
@@ -87,8 +129,13 @@ const PageHit = ({ hit, indexType }) => (
|
|
|
87
129
|
)}
|
|
88
130
|
</div>
|
|
89
131
|
{hit.url ? (
|
|
90
|
-
<Typography
|
|
91
|
-
|
|
132
|
+
<Typography
|
|
133
|
+
textStyle="body3"
|
|
134
|
+
className="self-end pl-8 pt-3 text-neutral-500"
|
|
135
|
+
>
|
|
136
|
+
<span className="hit-slug word-break">
|
|
137
|
+
{hit.url.replace(`https://${baseDomain}/`, "/")}
|
|
138
|
+
</span>
|
|
92
139
|
</Typography>
|
|
93
140
|
) : null}
|
|
94
141
|
</a>
|
|
@@ -100,7 +147,9 @@ const HitsByIndexType = ({ indexType }) => {
|
|
|
100
147
|
return (
|
|
101
148
|
<Hits
|
|
102
149
|
className="Hits"
|
|
103
|
-
hitComponent={hitProps =>
|
|
150
|
+
hitComponent={(hitProps) => (
|
|
151
|
+
<PageHit {...hitProps} indexType={indexType} />
|
|
152
|
+
)}
|
|
104
153
|
/>
|
|
105
154
|
);
|
|
106
155
|
};
|
|
@@ -112,7 +161,7 @@ const HitsInIndex = ({ index, show }) => (
|
|
|
112
161
|
<CustomHitsHeader
|
|
113
162
|
indexTitle={index.title}
|
|
114
163
|
showSeparator={index.type !== INDEX_TYPES.blog}
|
|
115
|
-
allIndex
|
|
164
|
+
allIndex={index.type}
|
|
116
165
|
/>
|
|
117
166
|
<HitsByIndexType indexType={index.type} />
|
|
118
167
|
</Fragment>
|
|
@@ -120,11 +169,26 @@ const HitsInIndex = ({ index, show }) => (
|
|
|
120
169
|
</Index>
|
|
121
170
|
);
|
|
122
171
|
|
|
123
|
-
const SearchResult = ({
|
|
124
|
-
|
|
172
|
+
const SearchResult = ({
|
|
173
|
+
children,
|
|
174
|
+
indices,
|
|
175
|
+
className,
|
|
176
|
+
id,
|
|
177
|
+
wrapperRef,
|
|
178
|
+
activeIndexTypes,
|
|
179
|
+
}) => (
|
|
180
|
+
<div
|
|
181
|
+
id={id}
|
|
182
|
+
className={`${className} search-results clear-both`}
|
|
183
|
+
ref={wrapperRef}
|
|
184
|
+
>
|
|
125
185
|
{children && children}
|
|
126
|
-
{indices.map(index => (
|
|
127
|
-
<HitsInIndex
|
|
186
|
+
{indices.map((index) => (
|
|
187
|
+
<HitsInIndex
|
|
188
|
+
index={index}
|
|
189
|
+
key={index.name}
|
|
190
|
+
show={activeIndexTypes[index.type]}
|
|
191
|
+
/>
|
|
128
192
|
))}
|
|
129
193
|
<SearchFooter />
|
|
130
194
|
</div>
|
|
@@ -1,19 +1,28 @@
|
|
|
1
1
|
import algoliasearch from "algoliasearch/lite";
|
|
2
2
|
import React, { useRef, useState, useEffect } from "react";
|
|
3
|
-
import {
|
|
3
|
+
import {
|
|
4
|
+
InstantSearch,
|
|
5
|
+
connectStateResults,
|
|
6
|
+
Index,
|
|
7
|
+
} from "react-instantsearch-dom";
|
|
4
8
|
import SearchBox from "./searchbox";
|
|
5
9
|
import SearchResults from "./searchresults";
|
|
6
10
|
import { INDEX_TYPES } from "./constants";
|
|
7
11
|
import SearchFooter from "./searchfooter";
|
|
8
|
-
import { Typography } from
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
12
|
+
import { Typography } from "../../foundation/Typography";
|
|
13
|
+
|
|
14
|
+
const AllResults = ({
|
|
15
|
+
allSearchResults,
|
|
16
|
+
children,
|
|
17
|
+
indices,
|
|
18
|
+
searchState,
|
|
19
|
+
searching,
|
|
20
|
+
}) => {
|
|
13
21
|
if (!searchState?.query) return null;
|
|
14
22
|
|
|
15
23
|
const hasResults =
|
|
16
|
-
allSearchResults &&
|
|
24
|
+
allSearchResults &&
|
|
25
|
+
Object.values(allSearchResults).some((results) => results.nbHits > 0);
|
|
17
26
|
return !hasResults ? (
|
|
18
27
|
<div>
|
|
19
28
|
<div>
|
|
@@ -27,7 +36,7 @@ const AllResults = ({ allSearchResults, children, indices, searchState, searchin
|
|
|
27
36
|
</span>
|
|
28
37
|
)}
|
|
29
38
|
</div>
|
|
30
|
-
{indices.map(index => (
|
|
39
|
+
{indices.map((index) => (
|
|
31
40
|
<Index indexName={index.name} key={index.name} />
|
|
32
41
|
))}
|
|
33
42
|
<SearchFooter />
|
|
@@ -45,57 +54,74 @@ const IndexTypeFilter = ({ activeIndexTypes, setActiveIndexTypes }) => {
|
|
|
45
54
|
const handleOnClick = (indexType) => {
|
|
46
55
|
if (indexType === INDEX_TYPES.All) {
|
|
47
56
|
showAll = true;
|
|
48
|
-
const allFiltersSelected = Object.keys(activeIndexTypes).reduce(
|
|
49
|
-
acc
|
|
50
|
-
|
|
51
|
-
|
|
57
|
+
const allFiltersSelected = Object.keys(activeIndexTypes).reduce(
|
|
58
|
+
(acc, key) => {
|
|
59
|
+
acc[key] = true;
|
|
60
|
+
return acc;
|
|
61
|
+
},
|
|
62
|
+
{}
|
|
63
|
+
);
|
|
52
64
|
setActiveIndexTypes(allFiltersSelected);
|
|
53
65
|
} else {
|
|
54
|
-
showAll = false
|
|
55
|
-
const allFiltersSelected = Object.keys(activeIndexTypes).reduce(
|
|
56
|
-
acc
|
|
57
|
-
|
|
58
|
-
|
|
66
|
+
showAll = false;
|
|
67
|
+
const allFiltersSelected = Object.keys(activeIndexTypes).reduce(
|
|
68
|
+
(acc, key) => {
|
|
69
|
+
acc[key] = false;
|
|
70
|
+
return acc;
|
|
71
|
+
},
|
|
72
|
+
{}
|
|
73
|
+
);
|
|
59
74
|
setActiveIndexTypes(allFiltersSelected);
|
|
60
75
|
setActiveIndexTypes((prevState) => ({
|
|
61
76
|
...prevState,
|
|
62
77
|
[indexType]: !prevState[indexType],
|
|
63
78
|
}));
|
|
64
79
|
}
|
|
65
|
-
setShowDropdown(false)
|
|
80
|
+
setShowDropdown(false);
|
|
66
81
|
};
|
|
67
82
|
|
|
68
83
|
return (
|
|
69
84
|
<div className="relative">
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
className={`capitalize cursor-pointer py-1 px-3 w-full text-left rounded-full text-neutral-500 ${(activeIndexTypes[index] && index === 'All') ? "bg-blue-500 " : ""
|
|
77
|
-
} ${(activeIndexTypes[index] && !showAll) ? 'bg-blue-500': ''} `}
|
|
85
|
+
<div className="tb-m:min-w-[182px] static tb-m:sticky top-[116px] self-start">
|
|
86
|
+
<ul className="hds-hidden tb-m:block bg-neutral-0 shadow-md p-4 rounded-2xl">
|
|
87
|
+
{Object.values(INDEX_TYPES).map((index) => (
|
|
88
|
+
<li
|
|
89
|
+
key={index}
|
|
90
|
+
className="flex items-center mb-2 last:mb-0 tb-m:mr-0 py-0"
|
|
78
91
|
>
|
|
79
|
-
<
|
|
80
|
-
|
|
81
|
-
className={
|
|
82
|
-
|
|
92
|
+
<button
|
|
93
|
+
onClick={() => handleOnClick(index)}
|
|
94
|
+
className={`capitalize cursor-pointer py-1 px-3 w-full text-left rounded-full text-neutral-500 ${
|
|
95
|
+
activeIndexTypes[index] && index === "All"
|
|
96
|
+
? "bg-blue-500 "
|
|
97
|
+
: ""
|
|
98
|
+
} ${activeIndexTypes[index] && !showAll ? "bg-blue-500" : ""} `}
|
|
83
99
|
>
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
100
|
+
<Typography
|
|
101
|
+
textStyle="body3c-medium"
|
|
102
|
+
className={`${
|
|
103
|
+
activeIndexTypes[index] && index === "All"
|
|
104
|
+
? "text-neutral-0 "
|
|
105
|
+
: ""
|
|
106
|
+
} ${
|
|
107
|
+
activeIndexTypes[index] && !showAll ? "text-neutral-0" : ""
|
|
108
|
+
} `}
|
|
109
|
+
>
|
|
110
|
+
{index}
|
|
111
|
+
</Typography>
|
|
112
|
+
</button>
|
|
113
|
+
</li>
|
|
114
|
+
))}
|
|
115
|
+
</ul>
|
|
116
|
+
</div>
|
|
92
117
|
<div className="relative hds-hidden-tbm">
|
|
93
118
|
<button
|
|
94
119
|
onClick={() => setShowDropdown(!showDropdown)}
|
|
95
120
|
className="capitalize cursor-pointer py-1 px-3 w-full border border-neutral-800 text-left rounded-full text-neutral-800 bg-transparent"
|
|
96
121
|
>
|
|
97
|
-
{Object.values(INDEX_TYPES).find(
|
|
98
|
-
|
|
122
|
+
{Object.values(INDEX_TYPES).find(
|
|
123
|
+
(index) => activeIndexTypes[index]
|
|
124
|
+
) || "All"}
|
|
99
125
|
</button>
|
|
100
126
|
{showDropdown && (
|
|
101
127
|
<ul className="absolute top-full left-0 w-full bg-neutral-0 shadow-md z-[20] p-2 rounded-3xl mt-1">
|
|
@@ -103,8 +129,11 @@ const IndexTypeFilter = ({ activeIndexTypes, setActiveIndexTypes }) => {
|
|
|
103
129
|
<li
|
|
104
130
|
key={index}
|
|
105
131
|
onClick={() => handleOnClick(index)}
|
|
106
|
-
className={`capitalize cursor-pointer py-2 px-4 ${
|
|
107
|
-
|
|
132
|
+
className={`capitalize cursor-pointer py-2 px-4 ${
|
|
133
|
+
activeIndexTypes[index]
|
|
134
|
+
? "text-neutral-1000 "
|
|
135
|
+
: "text-neutral-500"
|
|
136
|
+
}`}
|
|
108
137
|
>
|
|
109
138
|
{index}
|
|
110
139
|
</li>
|
|
@@ -112,21 +141,17 @@ const IndexTypeFilter = ({ activeIndexTypes, setActiveIndexTypes }) => {
|
|
|
112
141
|
</ul>
|
|
113
142
|
)}
|
|
114
143
|
</div>
|
|
115
|
-
|
|
116
144
|
</div>
|
|
117
145
|
);
|
|
118
146
|
};
|
|
119
147
|
|
|
120
148
|
export default function SearchWrapper({ indices, ...props }) {
|
|
121
|
-
let ALGOLIA_APP_ID, ALGOLIA_SEARCH_KEY
|
|
122
|
-
if (props.ALGOLIA_APP_ID && props.ALGOLIA_SEARCH_KEY){
|
|
149
|
+
let ALGOLIA_APP_ID, ALGOLIA_SEARCH_KEY;
|
|
150
|
+
if (props.ALGOLIA_APP_ID && props.ALGOLIA_SEARCH_KEY) {
|
|
123
151
|
ALGOLIA_APP_ID = props.ALGOLIA_APP_ID;
|
|
124
152
|
ALGOLIA_SEARCH_KEY = props.ALGOLIA_SEARCH_KEY;
|
|
125
153
|
}
|
|
126
|
-
const algoliaClient = algoliasearch(
|
|
127
|
-
ALGOLIA_APP_ID,
|
|
128
|
-
ALGOLIA_SEARCH_KEY
|
|
129
|
-
);
|
|
154
|
+
const algoliaClient = algoliasearch(ALGOLIA_APP_ID, ALGOLIA_SEARCH_KEY);
|
|
130
155
|
|
|
131
156
|
const searchClient = {
|
|
132
157
|
...algoliaClient,
|
|
@@ -146,13 +171,17 @@ export default function SearchWrapper({ indices, ...props }) {
|
|
|
146
171
|
},
|
|
147
172
|
};
|
|
148
173
|
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
174
|
+
const defaultIndexTypesState = Object.values(INDEX_TYPES).reduce(
|
|
175
|
+
(acc, index) => {
|
|
176
|
+
acc[index] = true;
|
|
177
|
+
return acc;
|
|
178
|
+
},
|
|
179
|
+
{}
|
|
180
|
+
);
|
|
154
181
|
const wrapperRef = useRef(null);
|
|
155
|
-
const [activeIndexTypes, setActiveIndexTypes] = useState(
|
|
182
|
+
const [activeIndexTypes, setActiveIndexTypes] = useState(
|
|
183
|
+
defaultIndexTypesState
|
|
184
|
+
);
|
|
156
185
|
useEffect(() => {
|
|
157
186
|
setActiveIndexTypes(defaultIndexTypesState);
|
|
158
187
|
}, []);
|
|
@@ -168,8 +197,8 @@ export default function SearchWrapper({ indices, ...props }) {
|
|
|
168
197
|
<div className="tb-m:flex gap-10">
|
|
169
198
|
<div className="hds-hidden tb-m:flex">
|
|
170
199
|
<IndexTypeFilter
|
|
171
|
-
|
|
172
|
-
|
|
200
|
+
activeIndexTypes={activeIndexTypes}
|
|
201
|
+
setActiveIndexTypes={setActiveIndexTypes}
|
|
173
202
|
/>
|
|
174
203
|
</div>
|
|
175
204
|
<SearchResults
|
|
@@ -177,13 +206,14 @@ export default function SearchWrapper({ indices, ...props }) {
|
|
|
177
206
|
indices={indices}
|
|
178
207
|
wrapperRef={wrapperRef}
|
|
179
208
|
activeIndexTypes={activeIndexTypes}
|
|
180
|
-
className="search-results"
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
209
|
+
className="search-results"
|
|
210
|
+
>
|
|
211
|
+
<div className="hds-hidden-tbm sticky top-[124px] tb:top-[114px] z-10 bg-neutral-100 pb-3">
|
|
212
|
+
<IndexTypeFilter
|
|
213
|
+
activeIndexTypes={activeIndexTypes}
|
|
214
|
+
setActiveIndexTypes={setActiveIndexTypes}
|
|
215
|
+
/>
|
|
216
|
+
</div>
|
|
187
217
|
</SearchResults>
|
|
188
218
|
</div>
|
|
189
219
|
</CustomAllResults>
|