Debounced Search Input

1"use client";
2
3import { useMemo, useState } from "react";
4import { DebouncedSearchInput } from "@/registry/ui";
5
6const rows = [
7  "Invoices",
8  "Customers",
9  "Subscriptions",
10  "Usage reports",
11  "Refunds",
12  "Payouts",
13];
14
15export function DebouncedSearchInputDefaultExample() {
16  const [query, setQuery] = useState("");
17  const [debouncedQuery, setDebouncedQuery] = useState("");
18
19  const filtered = useMemo(
20    () =>
21      rows.filter((item) =>
22        item.toLowerCase().includes(debouncedQuery.toLowerCase()),
23      ),
24    [debouncedQuery],
25  );
26
27  return (
28    <div className="mx-auto w-full max-w-xl space-y-3">
29      <DebouncedSearchInput
30        value={query}
31        onChange={setQuery}
32        onDebouncedChange={setDebouncedQuery}
33        placeholder="Search resources..."
34      />
35      <p className="text-xs text-muted-foreground">
36        Debounced query:{" "}
37        <span className="font-medium">{debouncedQuery || "-"}</span>
38      </p>
39      <ul className="space-y-1 text-sm">
40        {filtered.map((item) => (
41          <li key={item} className="rounded border bg-card px-3 py-2">
42            {item}
43          </li>
44        ))}
45      </ul>
46    </div>
47  );
48}

1"use client";
2
3import { useState } from "react";
4import { DebouncedSearchInput } from "@/registry/ui";
5
6export function DebouncedSearchInputLoadingExample() {
7  const [query, setQuery] = useState("");
8
9  return (
10    <div className="mx-auto w-full max-w-xl">
11      <DebouncedSearchInput
12        value={query}
13        onChange={setQuery}
14        loading
15        debounceMs={500}
16        placeholder="Search invoices..."
17      />
18    </div>
19  );
20}