Search Bar

A simple search input with clear button.

Usage

import { SearchBar } from "@/components/search-bar"

export default function MyPage() {
  const handleSearch = (query: string) => {
    console.log("Searching for:", query)
  }
  
  return (
    <SearchBar 
      placeholder="Search for anything..." 
      onSearch={handleSearch}
    />
  )
}

Props

Name

Type

Default

Description

placeholder

string

"Search..."

Placeholder text for the search input.

onSearch

function

() =>

Callback function called when search is submitted.

className

string

undefined

Additional CSS classes to apply to the search bar.