Function Search

apps/baseai.dev/src/components/Search.tsx:462–491

()

}

export function Search() {
	let [modifierKey, setModifierKey] = useState<string>();
	let { buttonProps, dialogProps } = useSearchProps();

	useEffect(() => {
		setModifierKey(
			/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? '⌘' : 'Ctrl '
		);
	}, []);

	return (
		<div className="hidden lg:max-w-md lg:flex-auto xl:block">
			<button
				type="button"
				className="hidden h-10 w-full items-center gap-2 rounded-lg bg-background pl-2 pr-3 text-sm text-zinc-500 ring-1 ring-border transition hover:ring-border/20 ui-not-focus-visible:outline-none lg:flex dark:bg-white/5 dark:text-zinc-400 dark:shadow-inner dark:ring-inset dark:ring-border/10 dark:ring-white/10 dark:hover:ring-white/20"
				{...buttonProps}
			>
				<SearchIcon className="h-5 w-5 flex-shrink-0 stroke-current" />
				<span className="flex-start truncate">Find something...</span>
				<kbd className="ml-auto flex-shrink-0 text-2xs text-muted-foreground">
					<kbd className="font-sans">{modifierKey}</kbd>
					<kbd className="font-sans">K</kbd>
				</kbd>
			</button> 
			<Suspense fallback={null}>
				<SearchDialog className="hidden lg:block" {...dialogProps} />
			</Suspense>
		</div>
	);
}

export function MobileSearch() {
	let { buttonProps, dialogProps } = useSearchProps();