CategoryCard.jsx
1 week ago
FAQs.jsx
1 week ago
PaidSupport.jsx
1 week ago
SearchBox.jsx
1 week ago
SupportForum.jsx
1 week ago
TicketModal.jsx
1 week ago
Videos.jsx
1 week ago
SearchBox.jsx
55 lines
| 1 | /** |
| 2 | * External Dependencies |
| 3 | */ |
| 4 | import { __ } from '@wordpress/i18n'; |
| 5 | |
| 6 | /** |
| 7 | * Internal Dependencies |
| 8 | */ |
| 9 | import { Card } from '@admin/components/Card'; |
| 10 | import { SearchComboBox } from '@admin/components/SearchComboBox'; |
| 11 | |
| 12 | export function SearchBox() { |
| 13 | return ( |
| 14 | <Card className="text-center"> |
| 15 | <h2 className="m-0 text-2xl"> |
| 16 | { __( 'How can we help?', 'advanced-ads' ) } |
| 17 | </h2> |
| 18 | <p> |
| 19 | { __( |
| 20 | 'Search for a topic or browse our documentation.', |
| 21 | 'advanced-ads' |
| 22 | ) } |
| 23 | </p> |
| 24 | <div className="relative mt-5 w-lg max-w-lg mx-auto"> |
| 25 | <SearchComboBox |
| 26 | id="advads-support-search" |
| 27 | placeholder={ __( |
| 28 | 'Search help articles, guides and FAQs', |
| 29 | 'advanced-ads' |
| 30 | ) } |
| 31 | endpoint="https://wpadvancedads.com/wp-json/wp/v2/search?subtype=post,bwl_kb&search={{search}}" |
| 32 | formatSuggestion={ ( s ) => ( |
| 33 | <span className="flex flex-col"> |
| 34 | <span className="font-medium">{ s.title }</span> |
| 35 | <span className="text-gray-400 block text-xs italic"> |
| 36 | { s.subtype === 'post' |
| 37 | ? 'Tutorials' |
| 38 | : 'Knowledge Base' } |
| 39 | </span> |
| 40 | </span> |
| 41 | ) } |
| 42 | onSelect={ ( suggestion, inputRef ) => { |
| 43 | window.open( |
| 44 | suggestion.url + |
| 45 | '?utm_source=advanced-ads&utm_medium=link&utm_campaign=plugin_support_searchbox', |
| 46 | '_blank' |
| 47 | ); |
| 48 | inputRef.current.value = ''; |
| 49 | } } |
| 50 | /> |
| 51 | </div> |
| 52 | </Card> |
| 53 | ); |
| 54 | } |
| 55 |