CommandMenuEmpty.tsx40 lines · main

1	'use client'
2
3	import { useEffect, useState, type PropsWithChildren, type RefObject } from 'react'
4	import { cn } from 'ui'
5
6	import { useQuery } from '../api/hooks/queryHooks'
7
8	const CommandMenuEmpty = ({
9	children,
10	className,
11	listRef,
12	...props
13	}: PropsWithChildren<{
14	className?: string
15	/**
16	* Reference to the div that contains the command item list in the DOM.
17	*
18	* Hacking around a bug in cmdk where the empty state will show even when
19	* there are force-mounted items.
20	*/
21	listRef: RefObject<HTMLDivElement | undefined>
22	}>) => {
23	const query = useQuery()
24
25	const [render, setRender] = useState(false)
26	useEffect(() => {
27	if (!query) return setRender(false)
28	setRender(!listRef?.current?.querySelector('[cmdk-item]'))
29	}, [query])
30
31	return (
32	render && (
33	<div className={cn('py-6 text-center text-sm text-foreground-muted', className)} {...props}>
34	{children}
35	</div>
36	)
37	)
38	}
39
40	export { CommandMenuEmpty }