Empty

let query = "";
let matches = INVOICES.filter((invoice) =>
	`${invoice.id} ${invoice.client}`.toLowerCase().includes(query.trim().toLowerCase()),
);

<Group>
	<Input
		name="q"
		type="search"
		value={query}
		placeholder="Search invoices"
		aria-label="Search invoices"
		mix={[
			on<HTMLInputElement, "input">("input", (event) => {
				query = event.currentTarget.value;
				void handle.update();
			}),
		]}
	/>
</Group>

{matches.length > 0 ? (
	matches.map((invoice) => (
		<Item key={invoice.id}>
			<Item.Media>
				<FileTextIcon aria-hidden="true" />
			</Item.Media>
			<Item.Content>
				<Item.Title>{invoice.id}</Item.Title>
				<Item.Description>{invoice.client}</Item.Description>
			</Item.Content>
			<Item.Actions>{invoice.amount}</Item.Actions>
		</Item>
	))
) : (
	<Empty>
		<Empty.Icon>
			<SearchIcon />
		</Empty.Icon>
		<Empty.Title>No invoices match “{query.trim()}”</Empty.Title>
		<Empty.Description>
			Search runs over the invoice number and the client's name. Nothing in this workspace
			matches either.
		</Empty.Description>
		<Empty.Action>
			<Button variant="outline" color="neutral" mix={[on("click", clearQuery)]}>
				Clear the search
			</Button>
			<Button>New invoice</Button>
		</Empty.Action>
	</Empty>
)}