NoSearchResults.tsx41 lines · main

1	import { Button, cn } from 'ui'
2
3	export interface NoSearchResultsProps {
4	searchString?: string
5	withinTableCell?: boolean
6	onResetFilter?: () => void
7	className?: string
8	label?: string
9	description?: string
10	}
11
12	export const NoSearchResults = ({
13	searchString,
14	withinTableCell = false,
15	onResetFilter,
16	className,
17	label,
18	description,
19	}: NoSearchResultsProps) => {
20	return (
21	<div
22	className={cn(
23	'flex items-center justify-between',
24	!withinTableCell && 'bg-surface-100 px-4 md:px-6 py-4 rounded-md border border-default',
25	className
26	)}
27	>
28	<div className="text-sm flex flex-col gap-y-0.5">
29	<p className="text-foreground">{label ?? 'No results found'}</p>
30	<p className="text-foreground-lighter">
31	{description ?? `Your search for “${searchString}” did not return any results`}
32	</p>
33	</div>
34	{onResetFilter !== undefined && (
35	<Button type="default" onClick={() => onResetFilter()}>
36	Reset filter
37	</Button>
38	)}
39	</div>
40	)
41	}