Function SearchDialog

website/app/components/docs/SearchDialog.tsx:45–169

({ open, onClose }: SearchDialogProps)

};

export const SearchDialog = ({ open, onClose }: SearchDialogProps) => {
	const inputId = useId();
	const resultsId = useId();
	const statusId = useId();
	const [query, setQuery] = useState('');
	const [results, setResults] = useState<SearchResult[]>([]);
	const [loading, setLoading] = useState(false);
	const trimmedQuery = query.trim();
	const statusMessage =
		trimmedQuery.length < 2
			? 'Search by page title, heading, or text.'
			: loading
				? 'Searching...'
				: results.length === 0
					? 'No results found.'
					: undefined;

	useEffect(() => {
		if (!open) return;
		if (trimmedQuery.length < 2) {
			setResults([]);
			setLoading(false);
			return;
		}

		const controller = new AbortController();
		setLoading(true);
		const timeout = window.setTimeout(() => {
			void fetch(`/docs/search?query=${encodeURIComponent(trimmedQuery)}`, {
				signal: controller.signal,
			})
				.then((response) => {
					if (!response.ok) throw new Error('Search request failed');
					return response.json() as Promise<SearchResult[]>;
				})
				.then((data) => {
					setResults(data);
				})
				.catch((error: unknown) => {
					if (!(error instanceof DOMException && error.name === 'AbortError')) {
						setResults([]);
					}
				})
				.finally(() => {
					if (!controller.signal.aborted) {
						setLoading(false);
					}
				});
		}, 180);

		return () => {
			controller.abort();
			window.clearTimeout(timeout);
		};
	}, [open, trimmedQuery]);

	return (
		<Modal