fixup!

Author: avivkeller

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

@@ -6,6 +6,8 @@ import { useLocale } from 'next-intl';
 
 import type { FC } from 'react';
 
+import { getDocumentHref } from '../SearchItem/utils';
+
 export type Document = {
   path: string;
   siteSection: string;
@@ -28,14 +30,9 @@ export const DocumentLink: FC<DocumentLinkProps> = ({
 }) => {
   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}

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

@@ -1,10 +1,12 @@
 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 { LinkLike } from '@node-core/ui-components/types';
 import type { ComponentProps, FC } from 'react';
 
-import { getFormattedPath } from './utils';
+import { getDocumentHref, getFormattedPath } from './utils';
 
 type SearchItemProps = Omit<
   ComponentProps<typeof SearchHit>,
@@ -16,20 +18,16 @@ type SearchItemProps = Omit<
 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,
+        href: getDocumentHref(document, locale),
       }}
+      as={Link as LinkLike}
       {...props}
     />
   );

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}`;

packages/ui-components/src/Common/Search/Results/Hit/index.module.css

@@ -1,41 +1,23 @@
 @reference "../../../../styles/index.css";
 
-.hit {
-  > a {
-    @apply flex
-      items-center
-      gap-4
-      rounded-lg
-      border
-      border-transparent
-      px-2
-      py-3
-      text-sm
-      duration-300
-      outline-none
-      hover:bg-neutral-300
-      focus-visible:border-green-600
-      focus-visible:bg-transparent
-      motion-safe:transition-colors
-      dark:bg-neutral-950
-      dark:hover:bg-neutral-900;
-  }
-
-  svg {
-    @apply size-5
-      shrink-0;
-  }
-}
-
 .link {
-  @apply rounded-xl
+  @apply flex
+    items-center
+    gap-4
+    rounded-xl
+    border
+    border-transparent
     bg-neutral-100
     px-4
     py-2
+    text-sm
     text-neutral-900
     duration-300
+    outline-none
     hover:bg-neutral-200
     focus:bg-neutral-200
+    focus-visible:border-green-600
+    focus-visible:bg-transparent
     motion-safe:transition-colors
     dark:bg-neutral-950
     dark:text-neutral-200

packages/ui-components/src/Common/Search/Results/Hit/index.tsx

@@ -17,7 +17,7 @@ type HitProps = {
 };
 
 const Hit: FC<HitProps> = ({ document, mode = 'search', as: Link = 'a' }) => (
-  <SearchResults.Item className={styles.hit}>
+  <SearchResults.Item>
     <Link
       href={document.href}
       tabIndex={mode === 'search' ? 0 : -1}