feat: add debounced search input

[legend4tech]

Pull Request: Add Debounced Search Input

Closes: #90

---

Summary

Creates a reusable SearchInput component with built-in debouncing to prevent excessive API calls during typing.

Purpose

Provides an efficient search input that waits for the user to stop typing before triggering search operations, reducing unnecessary API calls and improving performance.

---

Changes

New Files

• frontend/src/components/ui/SearchInput.tsx — Main SearchInput component
• frontend/src/hooks/useDebounce.ts — Reusable useDebounce hook

Modified Files

• frontend/src/components/ui/index.ts — Exports SearchInput component

---

Features

Feature	Description
Debounced Search	300ms default delay (configurable via debounceMs prop)
Console Logging	Debug logs to verify rate limiting behavior
Clear Button	Built-in clear button to reset search
Controlled/Uncontrolled	Supports both controlled and uncontrolled modes
Search Icon	Includes Lucide React search icon
Accessible	Proper ARIA labels and keyboard support

---

Console Output (Debugging)

When typing, the console will show:

[SearchInput] Typing detected: "h"
[SearchInput] Typing detected: "he"
[SearchInput] Debounce timer cleared for: "he"
[SearchInput] Typing detected: "hel"
[SearchInput] Typing detected: "hello"
[SearchInput] Debounce completed (300ms) - Triggering search: "hello"

---

Usage

import { SearchInput } from '@/components/ui'
 
// Basic usage
<SearchInput
  placeholder="Search..."
  onSearch={(value) => handleSearch(value)}
/>
 
// Custom debounce delay
<SearchInput
  debounceMs={500}
  onSearch={(value) => handleSearch(value)}
/>
 
// Controlled mode
<SearchInput
  value={searchTerm}
  onChange={(e) => setSearchTerm(e.target.value)}
  onSearch={(value) => handleSearch(value)}
/>
 
// Without clear button
<SearchInput
  showClearButton={false}
  onSearch={(value) => handleSearch(value)}
/>

---

Props

Prop	Type	Default	Description
onSearch	(value: string) => void	—	Callback triggered after debounce
debounceMs	number	300	Debounce delay in milliseconds
placeholder	string	"Search..."	Input placeholder text
showClearButton	boolean	true	Show/hide clear button
value	string	—	Controlled value (optional)
onChange	ChangeEventHandler	—	Change handler (for controlled mode)
className	string	—	Additional CSS classes

---

Testing

• Build passes (npm run build)
• Debounce timing verified via console logs
• Clear button functionality tested
• Controlled and uncontrolled modes work correctly
• TypeScript types export correctly

[drips-wave]

Hey @legend4tech! 👋 It looks like this PR isn't linked to any issue.

If this PR is for one of the issues assigned to you as part of a Wave, please link it to ensure your contribution is tracked properly. You can do this by adding a keyword to the PR description (e.g., Closes #123), or by clicking a button below:

Issue	Title
#88	Badge & Tag UI Components	Link to this issue
#90	Search Bar UI with Debounce logic	Link to this issue
#85	Skeleton Loading Component Wrapper	Link to this issue

ℹ️ Learn more about linking PRs to issues

[legend4tech]

@gabito1451 pls merge