feat(orama): add SearchHit UI component

Author: avivkeller

apps/site/components/Common/Searchbox/DocumentLink/index.module.css

@@ -1,12 +1,11 @@
 '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';
-
 export type Document = {
   path: string;
   siteSection: string;
@@ -22,7 +21,7 @@ type DocumentLinkProps = {
 
 export const DocumentLink: FC<DocumentLinkProps> = ({
   document,
-  className = styles.documentLink,
+  className = styles.link,
   children,
   'data-focus-on-arrow-nav': dataFocusOnArrowNav,
   ...props
@@ -41,11 +40,7 @@ export const DocumentLink: FC<DocumentLinkProps> = ({
       data-focus-on-arrow-nav={dataFocusOnArrowNav}
       {...props}
     >
-      {children || (
-        <span className={styles.documentTitle}>
-          {document.pageSectionTitle}
-        </span>
-      )}
+      {children}
     </Link>
   );
 };

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

@@ -1,41 +1,38 @@
-'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 { useLocale } from 'next-intl';
 
 import type { Document } from '../DocumentLink';
-import type { FC } from 'react';
+import type { ComponentProps, FC } from 'react';
 
-import { DocumentLink } from '../DocumentLink';
 import { getFormattedPath } from './utils';
 
-import styles from './index.module.css';
-
-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();
+
+  const href =
+    document.siteSection?.toLowerCase() === 'docs'
+      ? `/${document.path}`
+      : `/${locale}/${document.path}`;
+
+  return (
+    <SearchHit
+      document={{
+        title: document.pageSectionTitle,
+        description:
+          document.pageSectionTitle &&
+          getFormattedPath(document.path, document.pageSectionTitle),
+        href,
+      }}
+      {...props}
+    />
+  );
+};
+
+export default SearchItem;

apps/site/components/Common/Searchbox/SearchItem/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';

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

@@ -1,6 +1,6 @@
 {
   "name": "@node-core/ui-components",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "type": "module",
   "exports": {
     "./*": [

packages/ui-components/package.json

@@ -1,6 +1,6 @@
 @reference "../../../../styles/index.css";
 
-.searchResultsItem {
+.hit {
   > a {
     @apply flex
       items-center
@@ -27,7 +27,27 @@
   }
 }
 
-.searchResultsItemDescription {
+.link {
+  @apply rounded-xl
+    bg-neutral-100
+    px-4
+    py-2
+    text-neutral-900
+    duration-300
+    hover:bg-neutral-200
+    focus:bg-neutral-200
+    motion-safe:transition-colors
+    dark:bg-neutral-950
+    dark:text-neutral-200
+    hover:dark:bg-neutral-900
+    focus:dark:bg-neutral-900;
+
+  svg {
+    @apply size-5;
+  }
+}
+
+.hitDescription {
   @apply text-sm
     text-neutral-600
     dark:text-neutral-700;

…on/Searchbox/SearchItem/index.module.css …mmon/Search/Results/Hit/index.module.cssapps/site/components/Common/Searchbox/SearchItem/index.module.css renamed to packages/ui-components/src/Common/Search/Results/Hit/index.module.css apps/site/components/Common/Searchbox/SearchItem/index.module.css renamed to packages/ui-components/src/Common/Search/Results/Hit/index.module.css

@@ -0,0 +1,39 @@
+import { DocumentTextIcon } from '@heroicons/react/24/outline';
+import { SearchResults } from '@orama/ui/components';
+
+import type { LinkLike } from '#ui/types';
+import type { FC } from 'react';
+
+import styles from './index.module.css';
+
+type HitProps = {
+  document: {
+    title?: string;
+    description?: string;
+    href: string;
+  };
+  mode?: 'search' | 'chat';
+  as?: LinkLike;
+};
+
+const Hit: FC<HitProps> = ({ document, mode = 'search', as: Link = 'a' }) => (
+  <SearchResults.Item className={styles.hit}>
+    <Link
+      href={document.href}
+      tabIndex={mode === 'search' ? 0 : -1}
+      aria-hidden={mode === 'chat'}
+      data-focus-on-arrow-nav
+      className={styles.link}
+    >
+      <DocumentTextIcon />
+      <div>
+        {typeof document?.title === 'string' && <h3>{document.title}</h3>}
+        {typeof document?.description === 'string' && (
+          <p className={styles.hitDescription}>{document.description}</p>
+        )}
+      </div>
+    </Link>
+  </SearchResults.Item>
+);
+
+export default Hit;