chore: upgrade searchbox / add suggestions / fix theme (#312)

Author: rjborba

app/components/DocsLayout.tsx

@@ -29,6 +29,7 @@ import { DocsCalloutBytes } from '~/components/DocsCalloutBytes'
 import { ClientOnlySearchButton } from './ClientOnlySearchButton'
 import { twMerge } from 'tailwind-merge'
 import { partners } from '~/utils/partners'
+import { useThemeStore } from './ThemeToggle'
 
 // Let's use zustand to wrap the local storage logic. This way
 // we'll get subscriptions for free and we can use it in other
@@ -321,6 +322,10 @@ export function DocsLayout({
   const versionConfig = useVersionConfig({ versions })
   const menuConfig = useMenuConfig({ config, frameworks, repo })
 
+  const { mode: themeMode } = useThemeStore()
+
+  const oramaThemeMode = themeMode === 'auto' ? 'system' : themeMode
+
   const matches = useMatches()
   const lastMatch = last(matches)
 
@@ -493,7 +498,10 @@ export function DocsLayout({
               onSelect={versionConfig.onSelect}
             />
           </div>
-          <ClientOnlySearchButton {...searchButtonParams}>
+          <ClientOnlySearchButton
+            {...searchButtonParams}
+            colorScheme={oramaThemeMode}
+          >
             Search
           </ClientOnlySearchButton>
           {menuItems}
@@ -554,6 +562,7 @@ export function DocsLayout({
               } as any,
             }}
             facetProperty={undefined}
+            colorScheme={oramaThemeMode}
           />
         )}
       </div>

app/components/Orama.tsx

@@ -4,6 +4,14 @@ export const searchBoxParams = {
     endpoint: 'https://cloud.orama.run/v1/indexes/tanstack-dev-ur0ppd',
   },
   colorScheme: 'system' as 'light' | 'dark' | 'system',
+  suggestions: [
+    'What is TanStack?',
+    'Why should I use TanStack query?',
+    'Show me an example integration of useQuery hook',
+    'How is TanStack router different than other routers?',
+    'What is TanStack Table for?',
+    'Code example using TanStack Store',
+  ],
   facetProperty: 'category',
   resultMap: {
     description: 'content',

app/routes/_libraries/route.tsx

@@ -17,7 +17,7 @@ import { getLibrary, libraries } from '~/libraries'
 import { Scarf } from '~/components/Scarf'
 import { searchBoxParams, searchButtonParams } from '~/components/Orama'
 import { ClientOnlySearchButton } from '~/components/ClientOnlySearchButton'
-import { ThemeToggle } from '~/components/ThemeToggle'
+import { ThemeToggle, useThemeStore } from '~/components/ThemeToggle'
 import { TbBrandBluesky, TbBrandTwitter } from 'react-icons/tb'
 
 export const Route = createFileRoute('/_libraries')({
@@ -41,6 +41,10 @@ function LibrariesLayout() {
 
   const [mounted, setMounted] = React.useState(false)
 
+  const { mode: themeMode } = useThemeStore()
+
+  const oramaThemeMode = themeMode === 'auto' ? 'system' : themeMode
+
   React.useEffect(() => {
     setMounted(true)
   }, [])
@@ -242,7 +246,10 @@ function LibrariesLayout() {
           dark:bg-gray-900"
         >
           <div className="p-2 pb-0">
-            <ClientOnlySearchButton {...searchButtonParams} />
+            <ClientOnlySearchButton
+              {...searchButtonParams}
+              colorScheme={oramaThemeMode}
+            />
           </div>
           <div className="space-y-px text-sm p-2 border-b border-gray-500/10 dark:border-gray-500/20">
             {items}
@@ -259,7 +266,10 @@ function LibrariesLayout() {
           {logo}
         </div>
         <div className="p-2">
-          <ClientOnlySearchButton {...searchButtonParams}>
+          <ClientOnlySearchButton
+            {...searchButtonParams}
+            colorScheme={oramaThemeMode}
+          >
             Search
           </ClientOnlySearchButton>
         </div>
@@ -284,7 +294,7 @@ function LibrariesLayout() {
       </div>
       {mounted ? (
         <div className="fixed z-50">
-          <OramaSearchBox {...searchBoxParams} />
+          <OramaSearchBox {...searchBoxParams} colorScheme={oramaThemeMode} />
         </div>
       ) : null}
     </div>

package.json

@@ -24,7 +24,7 @@
     "@number-flow/react": "^0.4.1",
     "@octokit/graphql": "^7.0.2",
     "@octokit/rest": "^20.0.2",
-    "@orama/react-components": "^0.0.25",
+    "@orama/react-components": "^0.1.23",
     "@remix-run/node": "^2.8.1",
     "@sentry/react": "^8.35.0",
     "@sentry/vite-plugin": "^2.22.6",