|
1 | | -'use client'; |
2 | | - |
3 | | -import { DocumentTextIcon } from '@heroicons/react/24/outline'; |
4 | | -import { SearchResults } from '@orama/ui/components'; |
| 1 | +import SearchHit from '@node-core/ui-components/Common/Search/Results/Hit'; |
| 2 | +import Link from 'next/link'; |
| 3 | +import { useLocale } from 'next-intl'; |
5 | 4 |
|
6 | 5 | import type { Document } from '../DocumentLink'; |
7 | | -import type { FC } from 'react'; |
8 | | - |
9 | | -import { DocumentLink } from '../DocumentLink'; |
10 | | -import { getFormattedPath } from './utils'; |
| 6 | +import type { LinkLike } from '@node-core/ui-components/types'; |
| 7 | +import type { ComponentProps, FC } from 'react'; |
11 | 8 |
|
12 | | -import styles from './index.module.css'; |
| 9 | +import { getDocumentHref, getFormattedPath } from './utils'; |
13 | 10 |
|
14 | | -type SearchItemProps = { |
| 11 | +type SearchItemProps = Omit< |
| 12 | + ComponentProps<typeof SearchHit>, |
| 13 | + 'document' | 'as' |
| 14 | +> & { |
15 | 15 | document: Document; |
16 | | - mode?: 'search' | 'chat'; |
17 | 16 | }; |
18 | 17 |
|
19 | | -export const SearchItem: FC<SearchItemProps> = ({ document, mode }) => ( |
20 | | - <SearchResults.Item className={styles.searchResultsItem}> |
21 | | - <DocumentLink |
22 | | - document={document as Document} |
23 | | - tabIndex={mode === 'search' ? 0 : -1} |
24 | | - aria-hidden={mode === 'chat'} |
25 | | - data-focus-on-arrow-nav |
26 | | - > |
27 | | - <DocumentTextIcon /> |
28 | | - <div> |
29 | | - {typeof document?.pageSectionTitle === 'string' && ( |
30 | | - <h3>{document.pageSectionTitle}</h3> |
31 | | - )} |
32 | | - {typeof document?.pageSectionTitle === 'string' && |
33 | | - typeof document?.path === 'string' && ( |
34 | | - <p className={styles.searchResultsItemDescription}> |
35 | | - {getFormattedPath(document.path, document.pageSectionTitle)} |
36 | | - </p> |
37 | | - )} |
38 | | - </div> |
39 | | - </DocumentLink> |
40 | | - </SearchResults.Item> |
41 | | -); |
| 18 | +const SearchItem: FC<SearchItemProps> = ({ document, ...props }) => { |
| 19 | + const locale = useLocale(); |
| 20 | + |
| 21 | + return ( |
| 22 | + <SearchHit |
| 23 | + document={{ |
| 24 | + title: document.pageSectionTitle, |
| 25 | + description: |
| 26 | + document.pageSectionTitle && |
| 27 | + getFormattedPath(document.path, document.pageSectionTitle), |
| 28 | + href: getDocumentHref(document, locale), |
| 29 | + }} |
| 30 | + as={Link as LinkLike} |
| 31 | + {...props} |
| 32 | + /> |
| 33 | + ); |
| 34 | +}; |
| 35 | + |
| 36 | +export default SearchItem; |
0 commit comments