add: sort legacy docs search results at last + improve: docs search l…

…egacy badge
e2b-dev · Jan 10, 2025 · f93d18e · f93d18e
1 parent 6290cb2
commit f93d18e
Showing 1 changed file with 8 additions and 3 deletions.
diff --git a/apps/web/src/components/Search.tsx b/apps/web/src/components/Search.tsx
@@ -83,7 +83,12 @@ function useAutocomplete({ close }: { close: () => void }) {
             {
               sourceId: 'documentation',
               getItems() {
-                return search(query, { limit: 5 })
+                const results = search(query, { limit: 5 })
+                return results.sort((a, b) => {
+                  if (a.badge === 'Legacy' && b.badge !== 'Legacy') return 1
+                  if (a.badge !== 'Legacy' && b.badge === 'Legacy') return -1
+                  return 0
+                })
               },
               getItemUrl({ item }) {
                 return item.url
@@ -210,7 +215,7 @@ function SearchResult({
   return (
     <li
       className={clsx(
-        'group block cursor-default px-4 py-3 aria-selected:bg-zinc-50 dark:aria-selected:bg-zinc-800/50',
+        'group block relative cursor-default px-4 py-3 aria-selected:bg-zinc-50 dark:aria-selected:bg-zinc-800/50',
         resultIndex > 0 && 'border-t border-zinc-100 dark:border-zinc-800'
       )}
       aria-labelledby={`${id}-hierarchy ${id}-title`}
@@ -255,7 +260,7 @@ function SearchResult({
       )}
       {result.badge === 'Legacy' && (
         <div className="absolute top-3 right-4">
-          <span className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-xs font-medium bg-primary text-primary-foreground hover:bg-primary/90 px-2 py-1">
+          <span className="rounded-full text-xs bg-zinc-900 py-1 px-3 text-white hover:bg-zinc-700 dark:bg-brand-400/10 dark:text-brand-400 dark:ring-1 dark:ring-inset dark:ring-brand-400/20 dark:hover:bg-brand-400/10 dark:hover:text-brand-300 dark:hover:ring-brand-300">
             {result.badge}
           </span>
         </div>