Search Input

Source: packages/shared/components/ui/search-input.tsx

import { SearchInput } from "@prosper/shared/components/ui/search-input";

Overview

SearchInput is a specialized input with a magnifying glass icon positioned absolutely at the left side. It follows the same styling as the base Input component but with the icon and adjusted left padding.

Props

Accepts all standard <input> HTML attributes.

Prop	Type	Default	Description
`className`	`string`	—	Additional Tailwind classes
`placeholder`	`string`	—	Placeholder text
`value`	`string`	—	Controlled value
`onChange`	`(e: ChangeEvent) => void`	—	Change handler

Styling Details

Icon: Search from lucide-react, positioned absolutely 12px from left
Input padding-left: 40px (via inline style to accommodate icon)
Same border, focus ring, and transition styling as Input

Usage in the Codebase

Landing — Job Board

<SearchInput
  placeholder="Search by title, company, or location"
  value={searchTerm}
  onChange={(e) => setSearchTerm(e.target.value)}
  className="md:max-w-[320px]"
/>