Function SearchDialog

apps/baseai.dev/src/components/Search.tsx:320–433

({
	open,
	setOpen,
	className
}: {
	open: boolean;
	setOpen: (open: boolean) => void;
	className?: string;
})

});

function SearchDialog({
	open,
	setOpen,
	className
}: {
	open: boolean;
	setOpen: (open: boolean) => void;
	className?: string;
}) {
	let formRef = useRef<React.ElementRef<'form'>>(null);
	let panelRef = useRef<React.ElementRef<'div'>>(null);
	let inputRef = useRef<React.ElementRef<typeof SearchInput>>(null);
	let { autocomplete, autocompleteState } = useAutocomplete({
		close() {
			setOpen(false);
		}
	});
	let pathname = usePathname();
	let searchParams = useSearchParams();

	useEffect(() => {
		setOpen(false);
	}, [pathname, searchParams, setOpen]);

	useEffect(() => {
		if (open) {
			return;
		}

		function onKeyDown(event: KeyboardEvent) {
			if (event.key === 'k' && (event.metaKey || event.ctrlKey)) {
				event.preventDefault();
				setOpen(true);
			}
		}

		window.addEventListener('keydown', onKeyDown);

		return () => {
			window.removeEventListener('keydown', onKeyDown);
		};
	}, [open, setOpen]);

	return (
		<Transition
			show={open}
			as={Fragment}
			afterLeave={() => autocomplete.setQuery('')}
		>
			<Dialog
				onClose={setOpen}
				className={clsx('fixed inset-0 z-50', className)}
			>
				<TransitionChild
					as={Fragment}
					enter="ease-out duration-300"
					enterFrom="opacity-0"
					enterTo="opacity-100"