Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | 'use client';
/**
* SearchBar - Search input for FAQ articles
*/
import React from 'react';
import { Icon } from '@/components/ui/icons';
export interface SearchBarProps {
/** Current search value */
value: string;
/** Handler for value changes */
onChange: (value: string) => void;
/** Placeholder text */
placeholder?: string;
}
export default function SearchBar({
value,
onChange,
placeholder = 'Search for answers...'}: SearchBarProps) {
return (
<div className="relative max-w-xl mx-auto">
<div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
<Icon name="search" size={20} className="text-gray-400" />
</div>
<input
type="text"
value={value}
onChange={(e) => onChange(e.target.value)}
placeholder={placeholder}
className="
w-full pl-12 pr-4 py-3
border border-gray-300 dark:border-gray-600 rounded-lg
bg-white dark:bg-gray-800
text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
shadow-sm
"
/>
{value && (
<button
type="button"
onClick={() => onChange('')}
className="absolute inset-y-0 right-0 pr-4 flex items-center"
>
<Icon name="close" size={20} className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" />
</button>
)}
</div>
);
}
|