back to algolia search

Author: tannerlinsley

app/components/ClientOnlySearchButton.tsx

@@ -13,20 +13,16 @@ import {
   useNavigate,
   useParams,
 } from '@tanstack/react-router'
-import { OramaSearchBox } from '@orama/react-components'
-import { Carbon } from '~/components/Carbon'
 import { Select } from '~/components/Select'
 import { useLocalStorage } from '~/utils/useLocalStorage'
 import { DocsLogo } from '~/components/DocsLogo'
 import { last, capitalize } from '~/utils/utils'
 import type { SelectOption } from '~/components/Select'
 import type { ConfigSchema, MenuItem } from '~/utils/config'
 import { create } from 'zustand'
-import { searchBoxParams, searchButtonParams } from '~/components/Orama'
 import { Framework, getFrameworkOptions } from '~/libraries'
 import { DocsCalloutQueryGG } from '~/components/DocsCalloutQueryGG'
 import { DocsCalloutBytes } from '~/components/DocsCalloutBytes'
-import { ClientOnlySearchButton } from './ClientOnlySearchButton'
 import { twMerge } from 'tailwind-merge'
 import { partners } from '~/utils/partners'
 import { useThemeStore } from './ThemeToggle'
@@ -35,7 +31,7 @@ import {
   GadLeftRailSquare,
   GadRightRailSquare,
 } from './GoogleScripts'
-import { DocContainer } from './DocContainer'
+import { SearchButton } from './SearchButton'
 
 // 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
@@ -306,7 +302,6 @@ type DocsLayoutProps = {
   frameworks: Framework[]
   versions: string[]
   repo: string
-  stableRandoms: number[]
   children: React.ReactNode
 }
 
@@ -330,10 +325,6 @@ 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)
 
@@ -510,12 +501,7 @@ export function DocsLayout({
               onSelect={versionConfig.onSelect}
             />
           </div>
-          <ClientOnlySearchButton
-            {...searchButtonParams}
-            colorScheme={oramaThemeMode}
-          >
-            Search
-          </ClientOnlySearchButton>
+          <SearchButton />
           {menuItems}
         </div>
       </details>
@@ -533,7 +519,7 @@ export function DocsLayout({
         {logo}
       </div>
       <div className="px-4">
-        <ClientOnlySearchButton {...searchButtonParams} />
+        <SearchButton />
       </div>
       <div className="flex gap-2 px-4">
         <Select
@@ -561,23 +547,6 @@ export function DocsLayout({
     <div
       className={`min-h-screen flex flex-col lg:flex-row w-full transition-all duration-300`}
     >
-      <div className="fixed z-50">
-        {mounted && (
-          <OramaSearchBox
-            {...searchBoxParams}
-            searchParams={{
-              threshold: 0,
-              where: {
-                category: {
-                  eq: capitalize(libraryId!) as string,
-                },
-              } as any,
-            }}
-            facetProperty={undefined}
-            colorScheme={oramaThemeMode}
-          />
-        )}
-      </div>
       {smallMenu}
       {largeMenu}
       <div className="flex flex-col max-w-full min-w-0 w-full min-h-0 relative">

app/components/DocsLayout.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react'
+import { BiCommand } from 'react-icons/bi'
+import { MdSearch } from 'react-icons/md'
+import { twMerge } from 'tailwind-merge'
+import { useSearchContext } from '~/contexts/SearchContext'
+
+interface SearchButtonProps {
+  className?: string
+  children?: React.ReactNode
+}
+
+export function SearchButton({ className }: SearchButtonProps) {
+  const { openSearch } = useSearchContext()
+
+  return (
+    <button
+      onClick={openSearch}
+      className={twMerge(
+        'flex items-center justify-between w-full p-2 text-left bg-gray-500/10 rounded-lg opacity-80 hover:opacity-100 transition-opacity duration-300',
+        className
+      )}
+    >
+      <div className="flex items-center gap-2 text-sm">
+        <MdSearch className="text-lg" /> Search...
+      </div>
+      <div className="flex items-center bg-gray-500/10 rounded-lg px-2 py-1 gap-1 font-bold text-xs">
+        <BiCommand /> + K
+      </div>
+    </button>
+  )
+}