@adminide-stack/yantra-help-browser 12.0.16-alpha.14 → 12.0.16-alpha.16
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/lib/components/HelpCenterFooter.d.ts.map +1 -1
- package/lib/components/HelpCenterFooter.js +3 -15
- package/lib/components/HelpCenterFooter.js.map +1 -1
- package/lib/components/HelpCenterHeader.d.ts +1 -6
- package/lib/components/HelpCenterHeader.d.ts.map +1 -1
- package/lib/components/HelpCenterHeader.js +3 -236
- package/lib/components/HelpCenterHeader.js.map +1 -1
- package/lib/components/Logo.d.ts.map +1 -1
- package/lib/components/Logo.js +3 -2
- package/lib/components/Logo.js.map +1 -1
- package/lib/components/SearchBar.d.ts +8 -0
- package/lib/components/SearchBar.d.ts.map +1 -0
- package/lib/components/SearchBar.js +235 -0
- package/lib/components/SearchBar.js.map +1 -0
- package/lib/components/navbar/index.d.ts.map +1 -1
- package/lib/components/navbar/index.js +5 -4
- package/lib/components/navbar/index.js.map +1 -1
- package/lib/pages/ArticlePage/ArticlePage.d.ts.map +1 -1
- package/lib/pages/ArticlePage/ArticlePage.js +66 -112
- package/lib/pages/ArticlePage/ArticlePage.js.map +1 -1
- package/lib/pages/ArticlePage/ArticlePageLayout.js +1 -1
- package/lib/pages/ArticlePage/components/ArticleBreadcrumbs.d.ts +10 -0
- package/lib/pages/ArticlePage/components/ArticleBreadcrumbs.d.ts.map +1 -0
- package/lib/pages/ArticlePage/components/ArticleBreadcrumbs.js +31 -0
- package/lib/pages/ArticlePage/components/ArticleBreadcrumbs.js.map +1 -0
- package/lib/pages/ArticlePage/components/ArticleHeader.d.ts +13 -0
- package/lib/pages/ArticlePage/components/ArticleHeader.d.ts.map +1 -0
- package/lib/pages/ArticlePage/components/ArticleNavigation.d.ts +14 -0
- package/lib/pages/ArticlePage/components/ArticleNavigation.d.ts.map +1 -0
- package/lib/pages/ArticlePage/components/ArticleNavigation.js +37 -0
- package/lib/pages/ArticlePage/components/ArticleNavigation.js.map +1 -0
- package/lib/pages/ArticlePage/components/CopyPageButton.d.ts +10 -0
- package/lib/pages/ArticlePage/components/CopyPageButton.d.ts.map +1 -0
- package/lib/pages/ArticlePage/components/CopyPageButton.js +229 -0
- package/lib/pages/ArticlePage/components/CopyPageButton.js.map +1 -0
- package/lib/pages/ArticlePage/components/TableOfContents.d.ts +14 -0
- package/lib/pages/ArticlePage/components/TableOfContents.d.ts.map +1 -0
- package/lib/pages/ArticlePage/components/TableOfContents.js +35 -0
- package/lib/pages/ArticlePage/components/TableOfContents.js.map +1 -0
- package/lib/pages/CategoryCollection/index.d.ts.map +1 -1
- package/lib/pages/CategoryCollection/index.js +1 -7
- package/lib/pages/CategoryCollection/index.js.map +1 -1
- package/lib/pages/HelpCenter/index.d.ts.map +1 -1
- package/lib/pages/HelpCenter/index.js +1 -7
- package/lib/pages/HelpCenter/index.js.map +1 -1
- package/lib/pages/LandingPage/components/HeroSection.d.ts +0 -1
- package/lib/pages/LandingPage/components/HeroSection.d.ts.map +1 -1
- package/lib/pages/LandingPage/components/HeroSection.js +3 -6
- package/lib/pages/LandingPage/components/HeroSection.js.map +1 -1
- package/lib/pages/LandingPage/index.d.ts.map +1 -1
- package/lib/pages/LandingPage/index.js +1 -6
- package/lib/pages/LandingPage/index.js.map +1 -1
- package/package.json +8 -2
- package/lib/pages/LandingPage/components/SearchBar.d.ts +0 -8
- package/lib/pages/LandingPage/components/SearchBar.d.ts.map +0 -1
- package/lib/pages/LandingPage/components/SearchBar.js +0 -58
- package/lib/pages/LandingPage/components/SearchBar.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HelpCenterFooter.d.ts","sourceRoot":"","sources":["../../src/components/HelpCenterFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,
|
|
1
|
+
{"version":3,"file":"HelpCenterFooter.d.ts","sourceRoot":"","sources":["../../src/components/HelpCenterFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAsDpC,CAAC"}
|
|
@@ -15,13 +15,9 @@ import {jsx,jsxs}from'react/jsx-runtime';const HelpCenterFooter = () => {
|
|
|
15
15
|
}), jsxs("div", {
|
|
16
16
|
className: "mb-8 flex flex-wrap justify-center gap-8 text-sm text-muted-foreground",
|
|
17
17
|
children: [jsx("a", {
|
|
18
|
-
href: "
|
|
18
|
+
href: "/help-center",
|
|
19
19
|
className: "hover:text-primary",
|
|
20
|
-
children: "
|
|
21
|
-
}), jsx("a", {
|
|
22
|
-
href: "#",
|
|
23
|
-
className: "hover:text-primary",
|
|
24
|
-
children: "Careers"
|
|
20
|
+
children: "Help Center"
|
|
25
21
|
}), jsx("a", {
|
|
26
22
|
href: "#",
|
|
27
23
|
className: "hover:text-primary",
|
|
@@ -29,15 +25,7 @@ import {jsx,jsxs}from'react/jsx-runtime';const HelpCenterFooter = () => {
|
|
|
29
25
|
}), jsx("a", {
|
|
30
26
|
href: "#",
|
|
31
27
|
className: "hover:text-primary",
|
|
32
|
-
children: "
|
|
33
|
-
}), jsx("a", {
|
|
34
|
-
href: "#",
|
|
35
|
-
className: "hover:text-primary",
|
|
36
|
-
children: "Security"
|
|
37
|
-
}), jsx("a", {
|
|
38
|
-
href: "#",
|
|
39
|
-
className: "hover:text-primary",
|
|
40
|
-
children: "Give us Feedback"
|
|
28
|
+
children: "Contact Us"
|
|
41
29
|
})]
|
|
42
30
|
}), jsxs("div", {
|
|
43
31
|
className: "mb-8 flex justify-center space-x-6",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HelpCenterFooter.js","sources":["../../src/components/HelpCenterFooter.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"yCAEO,MAAM,gBAAgB,GAAa,MAAK;
|
|
1
|
+
{"version":3,"file":"HelpCenterFooter.js","sources":["../../src/components/HelpCenterFooter.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"yCAEO,MAAM,gBAAgB,GAAa,MAAK;SACpCA;AAqDX,IAAE,SAAA,EAAA,gBAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,8 +1,3 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
|
|
3
|
-
onSearch?: (query: string) => void;
|
|
4
|
-
initialSearchQuery?: string;
|
|
5
|
-
}
|
|
6
|
-
export declare const HelpCenterHeader: React.FC<HelpCenterHeaderProps>;
|
|
7
|
-
export {};
|
|
2
|
+
export declare const HelpCenterHeader: React.FC<any>;
|
|
8
3
|
//# sourceMappingURL=HelpCenterHeader.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HelpCenterHeader.d.ts","sourceRoot":"","sources":["../../src/components/HelpCenterHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"HelpCenterHeader.d.ts","sourceRoot":"","sources":["../../src/components/HelpCenterHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,GAAG,CAgC1C,CAAC"}
|
|
@@ -1,119 +1,4 @@
|
|
|
1
|
-
import {jsxs,jsx
|
|
2
|
-
onSearch,
|
|
3
|
-
initialSearchQuery = ''
|
|
4
|
-
}) => {
|
|
5
|
-
const navigate = useNavigate();
|
|
6
|
-
const [searchQuery, setSearchQuery] = useState(initialSearchQuery);
|
|
7
|
-
const [searchResults, setSearchResults] = useState([]);
|
|
8
|
-
const [showDropdown, setShowDropdown] = useState(false);
|
|
9
|
-
const [selectedIndex, setSelectedIndex] = useState(-1);
|
|
10
|
-
const [dropdownPosition, setDropdownPosition] = useState({
|
|
11
|
-
top: 0,
|
|
12
|
-
left: 0,
|
|
13
|
-
width: 0
|
|
14
|
-
});
|
|
15
|
-
const searchContainerRef = useRef(null);
|
|
16
|
-
const inputRef = useRef(null);
|
|
17
|
-
// Update search query when initialSearchQuery changes
|
|
18
|
-
useEffect(() => {
|
|
19
|
-
setSearchQuery(initialSearchQuery);
|
|
20
|
-
}, [initialSearchQuery]);
|
|
21
|
-
// Calculate dropdown position
|
|
22
|
-
const updateDropdownPosition = useRef(() => {
|
|
23
|
-
if (searchContainerRef.current) {
|
|
24
|
-
const rect = searchContainerRef.current.getBoundingClientRect();
|
|
25
|
-
setDropdownPosition({
|
|
26
|
-
top: rect.bottom + window.scrollY + 4,
|
|
27
|
-
left: rect.left + window.scrollX,
|
|
28
|
-
width: rect.width
|
|
29
|
-
});
|
|
30
|
-
}
|
|
31
|
-
});
|
|
32
|
-
// Perform search as user types
|
|
33
|
-
useEffect(() => {
|
|
34
|
-
if (searchQuery.trim().length > 0) {
|
|
35
|
-
const results = searchArticles(searchQuery);
|
|
36
|
-
setSearchResults(results.slice(0, 10)); // Limit to 10 results
|
|
37
|
-
setShowDropdown(true);
|
|
38
|
-
setSelectedIndex(-1);
|
|
39
|
-
// Use setTimeout to ensure DOM is updated
|
|
40
|
-
setTimeout(() => {
|
|
41
|
-
updateDropdownPosition.current();
|
|
42
|
-
}, 0);
|
|
43
|
-
} else {
|
|
44
|
-
setSearchResults([]);
|
|
45
|
-
setShowDropdown(false);
|
|
46
|
-
}
|
|
47
|
-
}, [searchQuery]);
|
|
48
|
-
// Update position on scroll/resize
|
|
49
|
-
useEffect(() => {
|
|
50
|
-
if (showDropdown) {
|
|
51
|
-
updateDropdownPosition.current();
|
|
52
|
-
const handleScroll = () => updateDropdownPosition.current();
|
|
53
|
-
const handleResize = () => updateDropdownPosition.current();
|
|
54
|
-
window.addEventListener('scroll', handleScroll, true);
|
|
55
|
-
window.addEventListener('resize', handleResize);
|
|
56
|
-
return () => {
|
|
57
|
-
window.removeEventListener('scroll', handleScroll, true);
|
|
58
|
-
window.removeEventListener('resize', handleResize);
|
|
59
|
-
};
|
|
60
|
-
}
|
|
61
|
-
}, [showDropdown]);
|
|
62
|
-
// Close dropdown when clicking outside
|
|
63
|
-
useEffect(() => {
|
|
64
|
-
const handleClickOutside = event => {
|
|
65
|
-
const target = event.target;
|
|
66
|
-
// Check if click is outside search container AND not on dropdown
|
|
67
|
-
if (searchContainerRef.current && !searchContainerRef.current.contains(target)) {
|
|
68
|
-
// Check if click is on the dropdown (which is in a portal)
|
|
69
|
-
const dropdown = document.querySelector('[data-search-dropdown]');
|
|
70
|
-
if (!dropdown || !dropdown.contains(target)) {
|
|
71
|
-
setShowDropdown(false);
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
};
|
|
75
|
-
document.addEventListener('mousedown', handleClickOutside);
|
|
76
|
-
return () => {
|
|
77
|
-
document.removeEventListener('mousedown', handleClickOutside);
|
|
78
|
-
};
|
|
79
|
-
}, []);
|
|
80
|
-
const handleSearch = e => {
|
|
81
|
-
e.preventDefault();
|
|
82
|
-
if (onSearch && searchQuery.trim()) {
|
|
83
|
-
onSearch(searchQuery);
|
|
84
|
-
}
|
|
85
|
-
// If there are results and user presses enter, navigate to first result
|
|
86
|
-
if (searchResults.length > 0) {
|
|
87
|
-
const firstResult = searchResults[0];
|
|
88
|
-
navigate(`/help-center/${firstResult.categoryId}/${firstResult.slug}`);
|
|
89
|
-
setShowDropdown(false);
|
|
90
|
-
}
|
|
91
|
-
};
|
|
92
|
-
const handleInputChange = e => {
|
|
93
|
-
setSearchQuery(e.target.value);
|
|
94
|
-
};
|
|
95
|
-
const handleInputFocus = () => {
|
|
96
|
-
if (searchResults.length > 0) {
|
|
97
|
-
setShowDropdown(true);
|
|
98
|
-
}
|
|
99
|
-
};
|
|
100
|
-
const handleResultClick = (article, e) => {
|
|
101
|
-
if (e) {
|
|
102
|
-
e.preventDefault();
|
|
103
|
-
e.stopPropagation();
|
|
104
|
-
}
|
|
105
|
-
// Verify article has required fields
|
|
106
|
-
if (!article || !article.categoryId || !article.slug) {
|
|
107
|
-
console.error('Article missing required fields:', article);
|
|
108
|
-
return;
|
|
109
|
-
}
|
|
110
|
-
// Close dropdown
|
|
111
|
-
setShowDropdown(false);
|
|
112
|
-
setSearchQuery('');
|
|
113
|
-
// Navigate to the article using Remix navigate
|
|
114
|
-
const path = `/help-center/${article.categoryId}/${article.slug}`;
|
|
115
|
-
navigate(path);
|
|
116
|
-
};
|
|
1
|
+
import {jsxs,jsx}from'react/jsx-runtime';import {SearchBar}from'./SearchBar.js';const HelpCenterHeader = props => {
|
|
117
2
|
return jsxs("div", {
|
|
118
3
|
className: "relative overflow-visible w-full",
|
|
119
4
|
children: [jsx("div", {
|
|
@@ -141,126 +26,8 @@ import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {useState,useRef,useEff
|
|
|
141
26
|
}), jsx("p", {
|
|
142
27
|
className: "mb-12 text-xl font-normal text-white/80 lg:text-2xl",
|
|
143
28
|
children: "Get answers to all things Clockbook."
|
|
144
|
-
}), jsx(
|
|
145
|
-
onSubmit: handleSearch,
|
|
146
|
-
className: "relative w-full max-w-2xl mx-auto",
|
|
147
|
-
style: {
|
|
148
|
-
zIndex: 50
|
|
149
|
-
},
|
|
150
|
-
children: jsx("div", {
|
|
151
|
-
ref: searchContainerRef,
|
|
152
|
-
className: "relative w-full",
|
|
153
|
-
children: jsxs("div", {
|
|
154
|
-
className: "flex w-full rounded-2xl bg-white shadow-2xl",
|
|
155
|
-
children: [jsxs("div", {
|
|
156
|
-
className: "relative flex-1",
|
|
157
|
-
children: [jsx("div", {
|
|
158
|
-
className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-6 z-10",
|
|
159
|
-
children: jsx("svg", {
|
|
160
|
-
className: "h-6 w-6 text-gray-400",
|
|
161
|
-
fill: "none",
|
|
162
|
-
viewBox: "0 0 24 24",
|
|
163
|
-
stroke: "currentColor",
|
|
164
|
-
children: jsx("path", {
|
|
165
|
-
strokeLinecap: "round",
|
|
166
|
-
strokeLinejoin: "round",
|
|
167
|
-
strokeWidth: 2,
|
|
168
|
-
d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
|
|
169
|
-
})
|
|
170
|
-
})
|
|
171
|
-
}), jsx("input", {
|
|
172
|
-
ref: inputRef,
|
|
173
|
-
type: "text",
|
|
174
|
-
className: "h-16 w-full bg-transparent py-6 pl-16 pr-6 text-lg text-gray-900 placeholder-gray-500 outline-none relative z-10",
|
|
175
|
-
placeholder: "Search help center...",
|
|
176
|
-
value: searchQuery,
|
|
177
|
-
onChange: handleInputChange,
|
|
178
|
-
onFocus: handleInputFocus
|
|
179
|
-
})]
|
|
180
|
-
}), jsx("button", {
|
|
181
|
-
type: "submit",
|
|
182
|
-
className: "flex items-center justify-center rounded-r-2xl bg-gray-900 px-8 text-lg font-medium text-white transition-colors hover:bg-gray-800 relative z-10",
|
|
183
|
-
children: "Search"
|
|
184
|
-
})]
|
|
185
|
-
})
|
|
186
|
-
})
|
|
187
|
-
}), jsxs("div", {
|
|
188
|
-
className: "mt-8 flex flex-wrap justify-center gap-3",
|
|
189
|
-
children: [jsx("span", {
|
|
190
|
-
className: "text-sm text-white/60",
|
|
191
|
-
children: "Popular:"
|
|
192
|
-
}), ['Getting started', 'Account setup', 'API documentation', 'Troubleshooting'].map(term => jsx("button", {
|
|
193
|
-
onClick: () => {
|
|
194
|
-
setSearchQuery(term);
|
|
195
|
-
setShowDropdown(true);
|
|
196
|
-
},
|
|
197
|
-
className: "rounded-full bg-white/10 px-4 py-2 text-sm text-white/80 transition-colors hover:bg-white/20 hover:text-white",
|
|
198
|
-
children: term
|
|
199
|
-
}, term))]
|
|
200
|
-
})]
|
|
29
|
+
}), jsx(SearchBar, {})]
|
|
201
30
|
})
|
|
202
|
-
})
|
|
203
|
-
children: searchResults.length > 0 ? jsx("div", {
|
|
204
|
-
"data-search-dropdown": true,
|
|
205
|
-
className: "fixed bg-white rounded-lg shadow-2xl border border-gray-200 max-h-96 overflow-y-auto z-[9999]",
|
|
206
|
-
style: {
|
|
207
|
-
top: `${dropdownPosition.top}px`,
|
|
208
|
-
left: `${dropdownPosition.left}px`,
|
|
209
|
-
width: `${dropdownPosition.width}px`
|
|
210
|
-
},
|
|
211
|
-
onClick: e => e.stopPropagation(),
|
|
212
|
-
children: jsx("div", {
|
|
213
|
-
className: "py-1",
|
|
214
|
-
children: searchResults.map((article, index) => {
|
|
215
|
-
const category = getCategoryById(article.categoryId);
|
|
216
|
-
`/help-center/${article.categoryId}/${article.slug}`;
|
|
217
|
-
return jsx("div", {
|
|
218
|
-
onClick: e => {
|
|
219
|
-
console.log('Click event fired on article:', article.title);
|
|
220
|
-
e.preventDefault();
|
|
221
|
-
e.stopPropagation();
|
|
222
|
-
handleResultClick(article, e);
|
|
223
|
-
},
|
|
224
|
-
className: `block px-4 py-3 hover:bg-blue-50 transition-colors cursor-pointer border-b border-gray-100 last:border-b-0 ${selectedIndex === index ? 'bg-blue-50' : ''}`,
|
|
225
|
-
role: "button",
|
|
226
|
-
tabIndex: 0,
|
|
227
|
-
onKeyDown: e => {
|
|
228
|
-
if (e.key === 'Enter' || e.key === ' ') {
|
|
229
|
-
e.preventDefault();
|
|
230
|
-
handleResultClick(article);
|
|
231
|
-
}
|
|
232
|
-
},
|
|
233
|
-
children: jsxs("div", {
|
|
234
|
-
className: "flex flex-col",
|
|
235
|
-
children: [jsx("div", {
|
|
236
|
-
className: "text-base font-semibold text-gray-900",
|
|
237
|
-
children: article.title
|
|
238
|
-
}), article.description && jsx("div", {
|
|
239
|
-
className: "text-sm text-gray-600 mt-0.5",
|
|
240
|
-
children: article.description
|
|
241
|
-
}), category && jsx("div", {
|
|
242
|
-
className: "text-xs text-blue-600 mt-1 font-medium",
|
|
243
|
-
children: category.title
|
|
244
|
-
})]
|
|
245
|
-
})
|
|
246
|
-
}, article.id);
|
|
247
|
-
})
|
|
248
|
-
})
|
|
249
|
-
}) : searchQuery.trim().length > 0 ? jsx("div", {
|
|
250
|
-
className: "fixed bg-white rounded-lg shadow-2xl border border-gray-200 z-[9999]",
|
|
251
|
-
style: {
|
|
252
|
-
top: `${dropdownPosition.top}px`,
|
|
253
|
-
left: `${dropdownPosition.left}px`,
|
|
254
|
-
width: `${dropdownPosition.width}px`
|
|
255
|
-
},
|
|
256
|
-
onClick: e => e.stopPropagation(),
|
|
257
|
-
children: jsx("div", {
|
|
258
|
-
className: "px-4 py-6 text-center text-gray-500",
|
|
259
|
-
children: jsxs("p", {
|
|
260
|
-
children: ["No results found for \"", searchQuery, "\""]
|
|
261
|
-
})
|
|
262
|
-
})
|
|
263
|
-
}) : null
|
|
264
|
-
}), document.body)]
|
|
31
|
+
})]
|
|
265
32
|
});
|
|
266
33
|
};export{HelpCenterHeader};//# sourceMappingURL=HelpCenterHeader.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HelpCenterHeader.js","sources":["../../src/components/HelpCenterHeader.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"HelpCenterHeader.js","sources":["../../src/components/HelpCenterHeader.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"gFAGa,MAAA,gBAAgB,GAAkB,KAAC,IAAS;AACrD,EAAA,OAAAA,IACS,CAAA,KAAA,EAAA;AAMW,IAAA,SAAA,EAAA,kCAAkG;AAClG,IAAA,QAAA,EAAA,CAAAC,GAAA,CAAA,KAAA,EAAA;gDAOR;AAgBhB,MAAE,QAAA,EAAAA,GAAA,CAAA,KAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Logo.d.ts","sourceRoot":"","sources":["../../src/components/Logo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,6DAA6D,CAAC;
|
|
1
|
+
{"version":3,"file":"Logo.d.ts","sourceRoot":"","sources":["../../src/components/Logo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,6DAA6D,CAAC;AAGzF,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAqIrC,CAAC"}
|
package/lib/components/Logo.js
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
import {jsxs,jsx}from'react/jsx-runtime';const Logo = props => {
|
|
1
|
+
import {jsxs,jsx}from'react/jsx-runtime';import {useParams}from'@remix-run/react';const Logo = props => {
|
|
2
|
+
const params = useParams();
|
|
2
3
|
const {
|
|
3
4
|
settings,
|
|
4
5
|
logo,
|
|
5
6
|
scrolled,
|
|
6
7
|
location
|
|
7
8
|
} = props;
|
|
8
|
-
const fill = !scrolled ? '#fff' : settings?.navTheme === 'dark' ? '#fff' : 'black';
|
|
9
|
+
const fill = !scrolled && !params.articleSlug ? '#fff' : settings?.navTheme === 'dark' ? '#fff' : 'black';
|
|
9
10
|
return jsxs("svg", {
|
|
10
11
|
version: "1.1",
|
|
11
12
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Logo.js","sources":["../../src/components/Logo.tsx"],"sourcesContent":[null],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Logo.js","sources":["../../src/components/Logo.tsx"],"sourcesContent":[null],"names":[],"mappings":"kFAIa,MAAA,IAAI,GAAyB,KAAC,IAAS;AAChD,EAAA,MAAA,MAAY,GAAA,SAAY,EAAA;QAClB;AACN,IAAA,QAAU;AAEV,IAAA,IAAA;;;;;;;;;;;;;;UA0BgB,EAAA;AAsGpB,MAAE,QAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SearchBar.d.ts","sourceRoot":"","sources":["../../src/components/SearchBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAK3D,UAAU,cAAc;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC/B;AACD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAyQ9C,CAAC"}
|
|
@@ -0,0 +1,235 @@
|
|
|
1
|
+
import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {useState,useRef,useEffect}from'react';import {createPortal}from'react-dom';import {useNavigate}from'@remix-run/react';import {searchArticles,getCategoryById}from'../utils/markdownLoader.js';const SearchBar = props => {
|
|
2
|
+
const navigate = useNavigate();
|
|
3
|
+
const [searchQuery, setSearchQuery] = useState('');
|
|
4
|
+
const [searchResults, setSearchResults] = useState([]);
|
|
5
|
+
const [showDropdown, setShowDropdown] = useState(false);
|
|
6
|
+
const [selectedIndex, setSelectedIndex] = useState(-1);
|
|
7
|
+
const [dropdownPosition, setDropdownPosition] = useState({
|
|
8
|
+
top: 0,
|
|
9
|
+
left: 0,
|
|
10
|
+
width: 0
|
|
11
|
+
});
|
|
12
|
+
const searchContainerRef = useRef(null);
|
|
13
|
+
const inputRef = useRef(null);
|
|
14
|
+
// Update search query when initialSearchQuery changes
|
|
15
|
+
// useEffect(() => {
|
|
16
|
+
// setSearchQuery(initialSearchQuery);
|
|
17
|
+
// }, [initialSearchQuery]);
|
|
18
|
+
// Calculate dropdown position
|
|
19
|
+
const updateDropdownPosition = useRef(() => {
|
|
20
|
+
if (searchContainerRef.current) {
|
|
21
|
+
const rect = searchContainerRef.current.getBoundingClientRect();
|
|
22
|
+
setDropdownPosition({
|
|
23
|
+
top: rect.bottom + window.scrollY + 4,
|
|
24
|
+
left: rect.left + window.scrollX,
|
|
25
|
+
width: rect.width
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
});
|
|
29
|
+
// Perform search as user types
|
|
30
|
+
useEffect(() => {
|
|
31
|
+
if (searchQuery.trim().length > 0) {
|
|
32
|
+
const results = searchArticles(searchQuery);
|
|
33
|
+
setSearchResults(results.slice(0, 10)); // Limit to 10 results
|
|
34
|
+
setShowDropdown(true);
|
|
35
|
+
setSelectedIndex(-1);
|
|
36
|
+
// Use setTimeout to ensure DOM is updated
|
|
37
|
+
setTimeout(() => {
|
|
38
|
+
updateDropdownPosition.current();
|
|
39
|
+
}, 0);
|
|
40
|
+
} else {
|
|
41
|
+
setSearchResults([]);
|
|
42
|
+
setShowDropdown(false);
|
|
43
|
+
}
|
|
44
|
+
}, [searchQuery]);
|
|
45
|
+
// Update position on scroll/resize
|
|
46
|
+
useEffect(() => {
|
|
47
|
+
if (showDropdown) {
|
|
48
|
+
updateDropdownPosition.current();
|
|
49
|
+
const handleScroll = () => updateDropdownPosition.current();
|
|
50
|
+
const handleResize = () => updateDropdownPosition.current();
|
|
51
|
+
window.addEventListener('scroll', handleScroll, true);
|
|
52
|
+
window.addEventListener('resize', handleResize);
|
|
53
|
+
return () => {
|
|
54
|
+
window.removeEventListener('scroll', handleScroll, true);
|
|
55
|
+
window.removeEventListener('resize', handleResize);
|
|
56
|
+
};
|
|
57
|
+
}
|
|
58
|
+
}, [showDropdown]);
|
|
59
|
+
// Close dropdown when clicking outside
|
|
60
|
+
useEffect(() => {
|
|
61
|
+
const handleClickOutside = event => {
|
|
62
|
+
const target = event.target;
|
|
63
|
+
// Check if click is outside search container AND not on dropdown
|
|
64
|
+
if (searchContainerRef.current && !searchContainerRef.current.contains(target)) {
|
|
65
|
+
// Check if click is on the dropdown (which is in a portal)
|
|
66
|
+
const dropdown = document.querySelector('[data-search-dropdown]');
|
|
67
|
+
if (!dropdown || !dropdown.contains(target)) {
|
|
68
|
+
setShowDropdown(false);
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
};
|
|
72
|
+
document.addEventListener('mousedown', handleClickOutside);
|
|
73
|
+
return () => {
|
|
74
|
+
document.removeEventListener('mousedown', handleClickOutside);
|
|
75
|
+
};
|
|
76
|
+
}, []);
|
|
77
|
+
const handleSearch = e => {
|
|
78
|
+
e.preventDefault();
|
|
79
|
+
// if (onSearch && searchQuery.trim()) {
|
|
80
|
+
// onSearch(searchQuery);
|
|
81
|
+
// }
|
|
82
|
+
// If there are results and user presses enter, navigate to first result
|
|
83
|
+
if (searchResults.length > 0) {
|
|
84
|
+
const firstResult = searchResults[0];
|
|
85
|
+
navigate(`/help-center/${firstResult.categoryId}/${firstResult.slug}`);
|
|
86
|
+
setShowDropdown(false);
|
|
87
|
+
}
|
|
88
|
+
};
|
|
89
|
+
const handleInputChange = e => {
|
|
90
|
+
setSearchQuery(e.target.value);
|
|
91
|
+
};
|
|
92
|
+
const handleInputFocus = () => {
|
|
93
|
+
if (searchResults.length > 0) {
|
|
94
|
+
setShowDropdown(true);
|
|
95
|
+
}
|
|
96
|
+
};
|
|
97
|
+
const handleResultClick = (article, e) => {
|
|
98
|
+
if (e) {
|
|
99
|
+
e.preventDefault();
|
|
100
|
+
e.stopPropagation();
|
|
101
|
+
}
|
|
102
|
+
// Verify article has required fields
|
|
103
|
+
if (!article || !article.categoryId || !article.slug) {
|
|
104
|
+
console.error('Article missing required fields:', article);
|
|
105
|
+
return;
|
|
106
|
+
}
|
|
107
|
+
// Close dropdown
|
|
108
|
+
setShowDropdown(false);
|
|
109
|
+
setSearchQuery('');
|
|
110
|
+
// Navigate to the article using Remix navigate
|
|
111
|
+
const path = `/help-center/${article.categoryId}/${article.slug}`;
|
|
112
|
+
navigate(path);
|
|
113
|
+
};
|
|
114
|
+
return jsxs("div", {
|
|
115
|
+
children: [jsx("form", {
|
|
116
|
+
onSubmit: handleSearch,
|
|
117
|
+
className: "relative w-full max-w-2xl mx-auto",
|
|
118
|
+
style: {
|
|
119
|
+
zIndex: 50
|
|
120
|
+
},
|
|
121
|
+
children: jsx("div", {
|
|
122
|
+
ref: searchContainerRef,
|
|
123
|
+
className: "relative w-full",
|
|
124
|
+
children: jsxs("div", {
|
|
125
|
+
className: "flex w-full rounded-2xl bg-white shadow-2xl",
|
|
126
|
+
children: [jsxs("div", {
|
|
127
|
+
className: "relative flex-1",
|
|
128
|
+
children: [jsx("div", {
|
|
129
|
+
className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-6 z-10",
|
|
130
|
+
children: jsx("svg", {
|
|
131
|
+
className: "h-6 w-6 text-gray-400",
|
|
132
|
+
fill: "none",
|
|
133
|
+
viewBox: "0 0 24 24",
|
|
134
|
+
stroke: "currentColor",
|
|
135
|
+
children: jsx("path", {
|
|
136
|
+
strokeLinecap: "round",
|
|
137
|
+
strokeLinejoin: "round",
|
|
138
|
+
strokeWidth: 2,
|
|
139
|
+
d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
|
|
140
|
+
})
|
|
141
|
+
})
|
|
142
|
+
}), jsx("input", {
|
|
143
|
+
ref: inputRef,
|
|
144
|
+
type: "text",
|
|
145
|
+
className: "h-16 w-full bg-transparent py-6 pl-16 pr-6 text-lg text-gray-900 placeholder-gray-500 outline-none relative z-10",
|
|
146
|
+
placeholder: "Search help center...",
|
|
147
|
+
value: searchQuery,
|
|
148
|
+
onChange: handleInputChange,
|
|
149
|
+
onFocus: handleInputFocus
|
|
150
|
+
})]
|
|
151
|
+
}), jsx("button", {
|
|
152
|
+
type: "submit",
|
|
153
|
+
className: "flex items-center justify-center rounded-r-2xl bg-gray-900 px-8 text-lg font-medium text-white transition-colors hover:bg-gray-800 relative z-10",
|
|
154
|
+
children: "Search"
|
|
155
|
+
})]
|
|
156
|
+
})
|
|
157
|
+
})
|
|
158
|
+
}), jsxs("div", {
|
|
159
|
+
className: "mt-8 flex flex-wrap justify-center gap-3",
|
|
160
|
+
children: [jsx("span", {
|
|
161
|
+
className: "text-sm text-white/60",
|
|
162
|
+
children: "Popular:"
|
|
163
|
+
}), ['Getting started', 'Account setup', 'API documentation', 'Troubleshooting'].map(term => jsx("button", {
|
|
164
|
+
onClick: () => {
|
|
165
|
+
setSearchQuery(term);
|
|
166
|
+
setShowDropdown(true);
|
|
167
|
+
},
|
|
168
|
+
className: "rounded-full bg-white/10 px-4 py-2 text-sm text-white/80 transition-colors hover:bg-white/20 hover:text-white",
|
|
169
|
+
children: term
|
|
170
|
+
}, term))]
|
|
171
|
+
}), showDropdown && typeof document !== 'undefined' && createPortal(jsx(Fragment, {
|
|
172
|
+
children: searchResults.length > 0 ? jsx("div", {
|
|
173
|
+
"data-search-dropdown": true,
|
|
174
|
+
className: "fixed bg-white rounded-lg shadow-2xl border border-gray-200 max-h-96 overflow-y-auto z-[9999]",
|
|
175
|
+
style: {
|
|
176
|
+
top: `${dropdownPosition.top}px`,
|
|
177
|
+
left: `${dropdownPosition.left}px`,
|
|
178
|
+
width: `${dropdownPosition.width}px`
|
|
179
|
+
},
|
|
180
|
+
onClick: e => e.stopPropagation(),
|
|
181
|
+
children: jsx("div", {
|
|
182
|
+
className: "py-1",
|
|
183
|
+
children: searchResults.map((article, index) => {
|
|
184
|
+
const category = getCategoryById(article.categoryId);
|
|
185
|
+
`/help-center/${article.categoryId}/${article.slug}`;
|
|
186
|
+
return jsx("div", {
|
|
187
|
+
onClick: e => {
|
|
188
|
+
console.log('Click event fired on article:', article.title);
|
|
189
|
+
e.preventDefault();
|
|
190
|
+
e.stopPropagation();
|
|
191
|
+
handleResultClick(article, e);
|
|
192
|
+
},
|
|
193
|
+
className: `block px-4 py-3 hover:bg-blue-50 transition-colors cursor-pointer border-b border-gray-100 last:border-b-0 ${selectedIndex === index ? 'bg-blue-50' : ''}`,
|
|
194
|
+
role: "button",
|
|
195
|
+
tabIndex: 0,
|
|
196
|
+
onKeyDown: e => {
|
|
197
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
198
|
+
e.preventDefault();
|
|
199
|
+
handleResultClick(article);
|
|
200
|
+
}
|
|
201
|
+
},
|
|
202
|
+
children: jsxs("div", {
|
|
203
|
+
className: "flex flex-col",
|
|
204
|
+
children: [jsx("div", {
|
|
205
|
+
className: "text-base font-semibold text-gray-900",
|
|
206
|
+
children: article.title
|
|
207
|
+
}), article.description && jsx("div", {
|
|
208
|
+
className: "text-sm text-gray-600 mt-0.5",
|
|
209
|
+
children: article.description
|
|
210
|
+
}), category && jsx("div", {
|
|
211
|
+
className: "text-xs text-blue-600 mt-1 font-medium",
|
|
212
|
+
children: category.title
|
|
213
|
+
})]
|
|
214
|
+
})
|
|
215
|
+
}, article.id);
|
|
216
|
+
})
|
|
217
|
+
})
|
|
218
|
+
}) : searchQuery.trim().length > 0 ? jsx("div", {
|
|
219
|
+
className: "fixed bg-white rounded-lg shadow-2xl border border-gray-200 z-[9999]",
|
|
220
|
+
style: {
|
|
221
|
+
top: `${dropdownPosition.top}px`,
|
|
222
|
+
left: `${dropdownPosition.left}px`,
|
|
223
|
+
width: `${dropdownPosition.width}px`
|
|
224
|
+
},
|
|
225
|
+
onClick: e => e.stopPropagation(),
|
|
226
|
+
children: jsx("div", {
|
|
227
|
+
className: "px-4 py-6 text-center text-gray-500",
|
|
228
|
+
children: jsxs("p", {
|
|
229
|
+
children: ["No results found for \"", searchQuery, "\""]
|
|
230
|
+
})
|
|
231
|
+
})
|
|
232
|
+
}) : null
|
|
233
|
+
}), document.body)]
|
|
234
|
+
});
|
|
235
|
+
};export{SearchBar};//# sourceMappingURL=SearchBar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SearchBar.js","sources":["../../src/components/SearchBar.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"wPASa,MAAA,SAAS,GAA6B,KAAC,IAAS;AACzD,EAAA,MAAA,QAAc,GAAA,WAAc,EAAA;QACtB,CAAA,WAAY,EAAA,cAAgB,CAAA,WAAY,CAAA,EAAC,CAAE;QAC3C,CAAA,aAAc,EAAA,gBAAkB,CAAA,WAAY,CAAA,EAAY,CAAE;QAC1D,CAAA,YAAa,EAAA,eAAiB,CAAA,WAAY,CAAA,KAAM,CAAA;QAChD,CAAA,aAAc,EAAA,gBAAkB,CAAA,GAAI,QAAA,CAAA,EAAS,CAAC;QAC9C,CAAA,kBAAiB,mBAAE,CAAA,GAAuB,QAAA,CAAA;AAChD,IAAA,GAAA,EAAA,CAAM;AACN,IAAA,IAAA,EAAM;IAEN,KAAsD,EAAA;IACtD;QAC0C,kBAAA,GAAA,MAAA,CAAA,IAAA,CAAA;QACd,QAAA,GAAA,MAAA,CAAA,IAAA,CAAA;;AAG5B;AACI;;AAEI;8BACc,SAAe,CAAA,MAAQ;AACjC,IAAA,IAAA,kBAAU,CAAC,OAAO,EAAA;gBAClB,GAAK,kBAAY,CAAA,OAAA,CAAA,qBAAA,EAAA;AACpB,MAAA,mBAAE,CAAA;QACP,GAAC,EAAA,IAAA,CAAA,MAAA,GAAA,MAAA,CAAA,OAAA,GAAA,CAAA;AACL,QAAG,IAAA,EAAA,IAAA,CAAA,IAAA,GAAA,MAAA,CAAA,OAAA;QAE4B,KAAA,EAAA,IAAA,CAAA;OACtB,CAAA;;AAED,GAAA,CAAA;AACA;YACA,MAAe;AACf,IAAA,IAAA,WAAA,CAAA,IAAA,EAAA,CAAA,MAAqB,GAAA,CAAA,EAAA;YACrB,OAA0C,GAAA,cAAA,CAAA,WAAA,CAAA;sBAChC,CAAC,OAAK,CAAA,KAAA,CAAA,CAAA,EAAA,EAAA,CAAA,CAAA,CAAA;qBACU,CAAA,IAAA,CAAA;sBACpB,CAAA,EAAA,CAAA;;gBACF,CAAA,MAAA;8BACe,CAAA,OAAE,EAAA;;WAExB;AACL,MAAG,gBAAe,CAAA,EAAA,CAAA;MAEiB,eAAA,CAAA,KAAA,CAAA;;iBAE3B,CAAA,CAAA;;YAEA,MAAM;oBACA,EAAA;oCAEkB,EAAA;AACxB,MAAA,MAAA,YAAuB,GAAA,MAAA,sBAAW,CAAA,OAAc,EAAA;AAEhD,MAAA,MAAA,YAAY,GAAA,MAAA,sBAAA,CAAA,OAAA,EAAA;sDACyC,IAAA,CAAA;AACjD,MAAA,MAAA,CAAA,gBAA0B,CAAA,QAAA,EAAA,YAAW,CAAA;AACzC,MAAA,OAAC,MAAC;QACN,MAAC,CAAA,mBAAA,CAAA,QAAA,EAAA,YAAA,EAAA,IAAA,CAAA;AACL,QAAI,MAAY,CAAA,mBAAG,CAAA,QAAA,EAAA,YAAA,CAAA;OAEoB;;AAEnC,GAAA,EAAA,CAAA,YAAwB,CAAA,CAAA;AACpB;YACA,MAAiE;AACjE,IAAA,MAAA,kBAAsB,GAAA,KAAQ,IAAA;kBACiC,GAAA,KAAA,CAAA,MAAA;;4BAE9C,CAAA,OAAK,IAAA,CAAA,kBAAyB,CAAA,OAAG,CAAA,QAAA,CAAA,MAAA,CAAA,EAAA;;sBAE7C,GAAA,QAAA,CAAA,aAAA,CAAA,wBAAA,CAAA;YACL,CAAC,QAAA,IAAA,CAAA,QAAA,CAAA,QAAA,CAAA,MAAA,CAAA,EAAA;AACL,UAAE,eAAA,CAAA,KAAA,CAAA;AAEF;AACA;AACI,KAAA;AACJ,IAAA,QAAE,CAAA,gBAAA,CAAA,WAAA,EAAA,kBAAA,CAAA;IACN,OAAO,MAAA;AAEP,MAAA,QAAkB,CAAA,mBAA0B,CAAA,WAAA,EAAA,kBAAA,CAAA;;QAExC;QACA,YAA6B,GAAA,CAAA,IAAA;oBACzB,EAAA;;AAEJ;AACI;;qBAEe,CAAA,MAAC,GAAK,CAAA,EAAC;YACzB,WAAA,GAAA,aAAA,CAAA,CAAA,CAAA;AACL,MAAE,QAAA,CAAA,CAAA,aAAA,EAAA,WAAA,CAAA,UAAA,CAAA,CAAA,EAAA,WAAA,CAAA,IAAA,CAAA,CAAA,CAAA;AAEF,MAAA,eAAuB,CAAA,KAAA,CAAA;AACnB;AACJ,GAAA;QAEM,iBAAA,GAAmB,CAAA,IAAK;AAC1B,IAAA,uBAAkB,CAAA,KAAS,CAAA;;QAE3B,gBAAC,GAAA,MAAA;AACL,IAAA,IAAE,aAAA,CAAA,MAAA,GAAA,CAAA,EAAA;AAEF,MAAA,qBAAuB;;;yBAGE,GAAA,CAAA,OAAG,EAAA,CAAA,KAAA;QACxB,CAAC,EAAA;QAED,cAAqC,EAAA;AACrC,MAAA,CAAA,CAAA,eAAgB,EAAC;AACb;;QAEJ,CAAC,OAAA,IAAA,CAAA,OAAA,CAAA,UAAA,IAAA,CAAA,OAAA,CAAA,IAAA,EAAA;aAEgB,CAAA,KAAA,CAAA,kCAAA,EAAA,OAAA,CAAA;;;;mBAKJ,CAAA,KAAA,CAAA;kBACA,CAAA,EAAA,CAAC;AAClB;AAEA,IAAA,MAAA,IAEQ,GAAA,CAAA,aAAA,EAAA,OAAA,CAAA,UAAA,CAAA,CAAM,EAAQ,OAAA,CAAE;;;AAgDJ,EAAA,OAAAA,IAAA,CAAA,KAAA,EAAA;kBAUD,CAAA,MAAA,EAAA;AACP,MAAA,QAAA,EAAA,YAAY;AAQQ,MAAA,SAAA,EAAA,mCAAwB;AACxB,MAAA,KAAA,EAAA;AACA,QAAA,MAAA,EAAA;;;;AAQI,QAAA,SAAA,EAAA,iBAAA;;kEAK+B;;AAEnB,YAAA,SAAA,EAAA,iBAAA;AACJ,YAAA,QAAA,EAAA,CAAAC,GAAA,CAAA,KAAA,EAAA;AAOI,cAAA,SAAA,EAAA,2EAAyC;;kDAEpB;;oCAEzB;sCAsBtB;AAIU,gBAAA,QAAA,EAAAA,GAAA,CAAG,MAAqB,EAAA;AACxB,kBAAA,aAAA,EAAM,OAAmB;AACzB,kBAAA,cAAA,EAAO,OAAmB;AAC7B,kBAAA,WACM,EAAA,CAAA;AAYvC,kBAAE,CAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/navbar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AA2BxC,UAAU,kBAAkB;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/navbar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AA2BxC,UAAU,kBAAkB;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAwFtD,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {jsxs,jsx}from'react/jsx-runtime';import {useState}from'react';import {useLocation,Link}from'@remix-run/react';const navItems = [{
|
|
1
|
+
import {jsxs,jsx}from'react/jsx-runtime';import {useState}from'react';import {useLocation,useParams,Link}from'@remix-run/react';const navItems = [{
|
|
2
2
|
key: 'home',
|
|
3
3
|
label: 'Home',
|
|
4
4
|
path: '/'
|
|
@@ -16,6 +16,7 @@ const RightNavItems = ({
|
|
|
16
16
|
}) => {
|
|
17
17
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
18
18
|
const location = useLocation();
|
|
19
|
+
const params = useParams();
|
|
19
20
|
const toggleMenu = () => {
|
|
20
21
|
setIsMenuOpen(!isMenuOpen);
|
|
21
22
|
};
|
|
@@ -23,14 +24,14 @@ const RightNavItems = ({
|
|
|
23
24
|
return location.pathname === path;
|
|
24
25
|
};
|
|
25
26
|
return jsxs("div", {
|
|
26
|
-
className: `${scrolled ?
|
|
27
|
+
className: `${scrolled || params.articleSlug ? 'text-foreground' : 'text-white'} flex justify-between align-center`,
|
|
27
28
|
children: [jsxs("div", {
|
|
28
29
|
className: "flex",
|
|
29
30
|
children: [jsx("div", {
|
|
30
31
|
className: "hidden sm:ml-6 sm:flex sm:space-x-8",
|
|
31
32
|
children: navItems.map(item => jsx(Link, {
|
|
32
33
|
to: item.path,
|
|
33
|
-
className: `inline-flex items-center px-1 pt-1 text-lg transition-colors duration-200 ${isActive(item.path) ? `font-bold ${scrolled ? 'text-foreground' : 'text-white'}` : `font-medium ${scrolled ? 'text-foreground hover:text-gray-900' : 'text-white hover:text-gray-300'}`}`,
|
|
34
|
+
className: `inline-flex items-center px-1 pt-1 text-lg transition-colors duration-200 ${isActive(item.path) ? `font-bold ${scrolled || params.articleSlug ? 'text-foreground' : 'text-white'}` : `font-medium ${scrolled || params.articleSlug ? 'text-foreground hover:text-gray-900' : 'text-white hover:text-gray-300'}`}`,
|
|
34
35
|
children: item.label
|
|
35
36
|
}, item.key))
|
|
36
37
|
}), jsx("div", {
|
|
@@ -67,7 +68,7 @@ const RightNavItems = ({
|
|
|
67
68
|
className: "space-y-1 pt-2 pb-3",
|
|
68
69
|
children: navItems.map(item => jsx(Link, {
|
|
69
70
|
to: item.path,
|
|
70
|
-
className: `block border-l-4 py-2 pl-3 pr-4 text-base font-medium transition-colors duration-200 ${isActive(item.path) ? `border-[#057d78] font-bold ${scrolled ? 'text-foreground' : 'text-white'}` : `border-transparent font-medium ${scrolled ? 'text-gray-500 hover:text-gray-900' : 'text-gray-300 hover:text-white'} hover:border-[#057d78] hover:bg-gray-50`}`,
|
|
71
|
+
className: `block border-l-4 py-2 pl-3 pr-4 text-base font-medium transition-colors duration-200 ${isActive(item.path) ? `border-[#057d78] font-bold ${scrolled || params.articleSlug ? 'text-foreground' : 'text-white'}` : `border-transparent font-medium ${scrolled || params.articleSlug ? 'text-gray-500 hover:text-gray-900' : 'text-gray-300 hover:text-white'} hover:border-[#057d78] hover:bg-gray-50`}`,
|
|
71
72
|
onClick: () => setIsMenuOpen(false),
|
|
72
73
|
children: item.label
|
|
73
74
|
}, item.key))
|