[pull] main from nodejs:main

apps/site/components/Common/Searchbox/DocumentLink/index.tsx

@@ -1,11 +1,12 @@
 'use client';
 
+import styles from '@node-core/ui-components/Common/Search/Results/Hit/index.module.css';
 import Link from 'next/link';
 import { useLocale } from 'next-intl';
 
 import type { FC } from 'react';
 
-import styles from './index.module.css';
+import { getDocumentHref } from '../SearchItem/utils';
 
 export type Document = {
   path: string;
@@ -22,30 +23,21 @@ type DocumentLinkProps = {
 
 export const DocumentLink: FC<DocumentLinkProps> = ({
   document,
-  className = styles.documentLink,
+  className = styles.link,
   children,
   'data-focus-on-arrow-nav': dataFocusOnArrowNav,
   ...props
 }) => {
   const locale = useLocale();
 
-  const href =
-    document.siteSection?.toLowerCase() === 'docs'
-      ? `/${document.path}`
-      : `/${locale}/${document.path}`;
-
   return (
     <Link
-      href={href}
+      href={getDocumentHref(document, locale)}
       className={className}
       data-focus-on-arrow-nav={dataFocusOnArrowNav}
       {...props}
     >
-      {children || (
-        <span className={styles.documentTitle}>
-          {document.pageSectionTitle}
-        </span>
-      )}
+      {children}
     </Link>
   );
 };

apps/site/components/Common/Searchbox/SearchItem/index.tsx

@@ -1,41 +1,36 @@
-'use client';
-
-import { DocumentTextIcon } from '@heroicons/react/24/outline';
-import { SearchResults } from '@orama/ui/components';
+import SearchHit from '@node-core/ui-components/Common/Search/Results/Hit';
+import Link from 'next/link';
+import { useLocale } from 'next-intl';
 
 import type { Document } from '../DocumentLink';
-import type { FC } from 'react';
-
-import { DocumentLink } from '../DocumentLink';
-import { getFormattedPath } from './utils';
+import type { LinkLike } from '@node-core/ui-components/types';
+import type { ComponentProps, FC } from 'react';
 
-import styles from './index.module.css';
+import { getDocumentHref, getFormattedPath } from './utils';
 
-type SearchItemProps = {
+type SearchItemProps = Omit<
+  ComponentProps<typeof SearchHit>,
+  'document' | 'as'
+> & {
   document: Document;
-  mode?: 'search' | 'chat';
 };
 
-export const SearchItem: FC<SearchItemProps> = ({ document, mode }) => (
-  <SearchResults.Item className={styles.searchResultsItem}>
-    <DocumentLink
-      document={document as Document}
-      tabIndex={mode === 'search' ? 0 : -1}
-      aria-hidden={mode === 'chat'}
-      data-focus-on-arrow-nav
-    >
-      <DocumentTextIcon />
-      <div>
-        {typeof document?.pageSectionTitle === 'string' && (
-          <h3>{document.pageSectionTitle}</h3>
-        )}
-        {typeof document?.pageSectionTitle === 'string' &&
-          typeof document?.path === 'string' && (
-            <p className={styles.searchResultsItemDescription}>
-              {getFormattedPath(document.path, document.pageSectionTitle)}
-            </p>
-          )}
-      </div>
-    </DocumentLink>
-  </SearchResults.Item>
-);
+const SearchItem: FC<SearchItemProps> = ({ document, ...props }) => {
+  const locale = useLocale();
+
+  return (
+    <SearchHit
+      document={{
+        title: document.pageSectionTitle,
+        description:
+          document.pageSectionTitle &&
+          getFormattedPath(document.path, document.pageSectionTitle),
+        href: getDocumentHref(document, locale),
+      }}
+      as={Link as LinkLike}
+      {...props}
+    />
+  );
+};
+
+export default SearchItem;

apps/site/components/Common/Searchbox/SearchItem/utils.ts

@@ -1,3 +1,5 @@
+import type { Document } from '../DocumentLink';
+
 export const uppercaseFirst = (word: string) =>
   word.charAt(0).toUpperCase() + word.slice(1);
 
@@ -9,3 +11,8 @@ export const getFormattedPath = (path: string, title: string) =>
     .map(element => uppercaseFirst(element))
     .filter(Boolean)
     .join(' > ')} — ${title}`;
+
+export const getDocumentHref = (document: Document, locale: string) =>
+  document.siteSection?.toLowerCase() === 'docs'
+    ? `/${document.path}`
+    : `/${locale}/${document.path}`;

apps/site/components/Common/Searchbox/index.tsx

@@ -14,7 +14,7 @@ import type { FC } from 'react';
 
 import { Footer } from './Footer';
 import { oramaClient } from './orama-client';
-import { SearchItem } from './SearchItem';
+import SearchItem from './SearchItem';
 import { SlidingChatPanel } from './SlidingChatPanel';
 
 import styles from './index.module.css';