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

apps/docs/components/search/SearchDialog.tsx

@@ -0,0 +1,192 @@
+import { Combobox, ComboboxItem, ComboboxProvider, VisuallyHidden } from '@ariakit/react'
+import { MagnifyingGlassIcon } from '@heroicons/react/20/solid'
+import { Hit } from 'instantsearch.js'
+import { SendEventForHits } from 'instantsearch.js/es/lib/utils'
+import Link from 'next/link'
+import { usePathname, useRouter } from 'next/navigation'
+import { Dialog as _Dialog } from 'radix-ui'
+import { Fragment, startTransition, useState } from 'react'
+import { Highlight } from 'react-instantsearch'
+import { twJoin } from 'tailwind-merge'
+import { SearchEntry } from '@/utils/algolia'
+import { ContentHighlight } from './ContentHighlight'
+
+interface AutocompleteProps {
+	items: Hit<SearchEntry>[]
+	onChange(value: string): void
+	onInputChange(value: string): void
+	onClose(): void
+	sendEvent: SendEventForHits
+}
+
+export default function SearchDialog({
+	items,
+	onInputChange,
+	onChange,
+	onClose,
+	sendEvent,
+}: AutocompleteProps) {
+	const [open, setOpen] = useState(true)
+	const [value, setValue] = useState('')
+
+	const handleOpenChange = (open: boolean) => {
+		if (!open) {
+			onClose()
+		}
+		setOpen(open)
+	}
+
+	return (
+		<ComboboxProvider<string>
+			defaultSelectedValue=""
+			open={open}
+			setOpen={setOpen}
+			resetValueOnHide
+			includesBaseElement={false}
+			setValue={(newValue) => {
+				startTransition(() => {
+					setValue(newValue)
+					onInputChange(newValue)
+				})
+			}}
+			setSelectedValue={(newValue) => onChange(newValue)}
+		>
+			<div
+				className={twJoin(
+					'fixed w-screen h-screen left-0 top-14 sm:top-[6.5rem] md:top-0 z-40',
+					'bg-white/90 dark:bg-zinc-950/90 pointer-events-none'
+				)}
+			>
+				<SearchDialogWrapper onOpenChange={handleOpenChange}>
+					<div className="w-full max-w-3xl mx-auto px-5 lg:px-12 pt-[4.5rem]">
+						<div
+							className={twJoin(
+								'pointer-events-auto bg-zinc-50 dark:bg-zinc-900 rounded-lg',
+								'overflow-hidden focus-within:ring-2 focus-within:ring-blue-500'
+							)}
+						>
+							<SearchInput value={value} />
+							<Results items={items} sendEvent={sendEvent} />
+						</div>
+					</div>
+				</SearchDialogWrapper>
+			</div>
+		</ComboboxProvider>
+	)
+}
+
+function SearchInput({ value }: { value: string }) {
+	const router = useRouter()
+	const pathName = usePathname()
+	const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+		if (e.key !== 'Enter') return
+		const searchPath = pathName.startsWith('/blog') ? '/search/blog' : '/search'
+		router.push(`${searchPath}?query=${encodeURIComponent(value.trim())}`)
+	}
+	return (
+		<div className="w-full h-10 flex items-center px-4">
+			<div className="flex h-full grow items-center gap-3">
+				<MagnifyingGlassIcon className="h-4 shrink-0" />
+				<Combobox
+					className="h-full w-full mr-4 focus:outline-none text-black dark:text-white bg-transparent"
+					autoFocus
+					placeholder="Search..."
+					onKeyDown={handleKeyDown}
+				/>
+			</div>
+		</div>
+	)
+}
+
+function Results({ items, sendEvent }: { items: Hit<SearchEntry>[]; sendEvent: SendEventForHits }) {
+	let section = ''
+	const renderedItems = items.map((hit) => {
+		const showChapter = hit.section !== section
+		section = hit.section
+
+		const href = hit.headingSlug ? `${hit.path}#${hit.headingSlug}` : hit.path
+
+		return (
+			<Fragment key={hit.objectID}>
+				{showChapter && (
+					<div className="text-black dark:text-white font-semibold mt-6 mb-4">{section}</div>
+				)}
+
+				<ComboboxItem
+					className={twJoin(
+						'px-4 pt-2.5 pb-3 bg-zinc-100 dark:bg-zinc-800 mt-2',
+						'rounded-md cursor-pointer data-[active-item=true]:bg-blue-500',
+						'dark:data-[active-item=true]:bg-blue-500 data-[active-item=true]:text-blue-200',
+						'[&_mark]:bg-transparent [&_mark]:font-bold',
+						'[&_mark]:text-black [&_mark]:data-[active-item=true]:text-white',
+						'dark:[&_mark]:text-white',
+						'[&_.ais-Highlight-nonHighlighted]:data-[active-item=true]:text-white',
+						'hover:text-zinc-800 dark:hover:text-zinc-200'
+					)}
+					value={href}
+					onKeyDown={(e) => {
+						if (e.key === 'Enter') {
+							sendEvent('click', hit, 'Hit clicked via keyboard')
+						}
+					}}
+				>
+					<Link href={href} onClick={() => sendEvent('click', hit, 'Hit clicked')}>
+						<Highlight attribute="title" hit={hit} />
+						<ContentHighlight hit={hit} />
+					</Link>
+				</ComboboxItem>
+			</Fragment>
+		)
+	})
+
+	return (
+		<div
+			className={twJoin(
+				'max-h-[32rem] overflow-y-auto p-4 pt-0',
+				'border-t border-zinc-100 dark:border-zinc-800'
+			)}
+		>
+			{items.length === 0 && (
+				<div className="text-center py-8 text-zinc-400 dark:text-zinc-600">
+					<p>No results found.</p>
+					<p className="mt-2">
+						Will you tell us what you{"'"}re looking for on our{' '}
+						<a
+							className="text-blue-500 hover:text-blue-600"
+							target="_blank"
+							href="https://discord.tldraw.com/?utm_source=blog&utm_medium=search&utm_campaign=no-results-found"
+							rel="noreferrer"
+						>
+							discord
+						</a>
+						?
+					</p>
+				</div>
+			)}
+			{items.length !== 0 && renderedItems}
+		</div>
+	)
+}
+
+function SearchDialogWrapper({
+	children,
+	onOpenChange,
+}: {
+	children: React.ReactNode
+	onOpenChange(open: boolean): void
+}) {
+	return (
+		<_Dialog.Root open onOpenChange={onOpenChange}>
+			<_Dialog.Portal>
+				<_Dialog.Overlay />
+				<_Dialog.Content className="fixed inset-0 z-50" style={{ pointerEvents: 'none' }}>
+					<VisuallyHidden>
+						<_Dialog.Title>Search</_Dialog.Title>
+						<_Dialog.Description>Search dialog</_Dialog.Description>
+					</VisuallyHidden>
+					{children}
+				</_Dialog.Content>
+			</_Dialog.Portal>
+		</_Dialog.Root>
+	)
+}