snapshot of https://github.com/tldraw/tldraw.git (main, 2026-09-23; blobs > 131072B omitted)

apps/docs/components/search/index.tsx

@@ -0,0 +1,43 @@
+'use client'
+
+import { debounce } from '@tldraw/utils'
+import { useRouter } from 'next/navigation'
+import { InstantSearch, useHits, useSearchBox } from 'react-instantsearch'
+import { SearchEntry, SearchIndexName, getSearchIndexName } from '@/utils/algolia'
+import { searchClient } from '@/utils/search-api'
+import SearchDialog from './SearchDialog'
+
+export function Search({ type, onClose }: { type: SearchIndexName; onClose(): void }) {
+	return (
+		<InstantSearch
+			indexName={getSearchIndexName(type)}
+			searchClient={searchClient}
+			insights={true}
+			future={{ preserveSharedStateOnUnmount: true }}
+		>
+			<InstantSearchInner onClose={onClose} />
+		</InstantSearch>
+	)
+}
+
+function InstantSearchInner({ onClose }: { onClose(): void }) {
+	const { items, sendEvent } = useHits<SearchEntry>()
+	const { refine } = useSearchBox()
+	const router = useRouter()
+
+	const handleChange = (path: string) => {
+		router.push(path)
+		onClose()
+	}
+	const handleInputChange = debounce((query: string) => refine(query), 500)
+
+	return (
+		<SearchDialog
+			items={items}
+			onInputChange={handleInputChange}
+			onChange={handleChange}
+			onClose={onClose}
+			sendEvent={sendEvent}
+		/>
+	)
+}