search-bar.tsx)¶

Overview¶

Search input component that provides real-time search functionality with a styled search icon.

Features¶

Real-time search
Icon integration
Styled input field
Focus states
Responsive design

Dependencies¶

import { useState } from 'react'
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Search } from "lucide-react"

Props¶

interface SearchBarProps {
  onSearch: (query: string) => void;
}

Implementation¶

State Management¶

No local state management required.

Methods¶

const handleSearch = (value: string) => {
  onSearch(value);
};

Unique Functionality¶

Real-time search updates
Icon positioning
Focus ring styling
Transition effects

HTML Structure¶

<div className="relative">
  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
    <Search className="h-5 w-5 text-gray-400" />
  </div>
  <input
    type="text"
    className="block w-full pl-10 pr-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-925 focus:border-transparent transition-all"
    placeholder="Search documents..."
    onChange={(e) => onSearch(e.target.value)}
  />
</div>

API Integration¶

No direct API integration.

Components Used¶

Notes¶

Uses Tailwind CSS for styling
Implements smooth transitions
Features accessible design
Provides immediate feedback
Supports keyboard navigation

Components Using This¶

State Management¶

Handles input changes
Manages search query
Controls focus state
Maintains input value
Triggers search events
Updates parent state
Manages transitions

Integration Points¶

Search functionality
Input component
Icon system
Event handling
Style system
Parent updates
Query management

Usage Example¶

function DocumentSearch() {
  const handleSearch = (query: string) => {
    // Handle search logic
    console.log('Searching for:', query);
  };

  return (
    <div className="w-full max-w-md mx-auto">
      <SearchBarComponent onSearch={handleSearch} />
    </div>
  );
}

Notes¶

Uses client-side rendering
Features clean design
Implements real-time search
Includes search icon
Supports focus states
Provides smooth transitions
Follows design system
Maintains accessibility