جستوجو
search-inputکامپوننتفیلد جستوجو با ذرهبین، دکمهی پاک کردن، حالت بارگذاری و تأخیر کوتاه قبل از جستوجو تا با هر حرف درخواست نفرستید.
⌘K
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add search-inputنصب دستی
محتوای تب «کد» را در
components/ui/search-input.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { SearchInput } from "@/components/ui/search-input"23<SearchInput placeholder="نام محصول…" loading={isPending} onSearch={(q) => search(q)} shortcut="⌘K" />پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| onSearch | (value: string) => void | - | بعد از مکث تایپ، با Enter و وقتی فیلد پاک میشه صدا زده میشه. |
| debounce | number | 300 | مکث تایپ به میلیثانیه قبل از onSearch. |
| loading | boolean | - | به جای ذرهبین یک چرخنده نشان میده. |
| shortcut | string | — | راهنمای میانبر در انتهای فیلد، مثل «⌘K»، که با تایپ پنهان میشه. |
| size | "sm" | "md" | "md" | ارتفاع ۳۲ یا ۴۰ پیکسل. |
نکتههای راستچین
- Escape متن را پاک میکنه و Enter بدون منتظر ماندن جستوجو میکنه.
- type="search" هست تا کیبورد موبایل دکمهی جستوجو نشان بده، ولی ضربدر بومی مرورگر پنهان شده و دکمهی خودمان جای آن نشسته.