All files / src/components/channels SearchBar.tsx

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Search, X } from "lucide-react";
import { Input } from "@/components/ui/input";
 
interface SearchBarProps {
	value: string;
	onChange: (value: string) => void;
	placeholder?: string;
}
 
export const SearchBar = ({
	value,
	onChange,
	placeholder = "Search channels...",
}: SearchBarProps) => {
	return (
		<div className="relative w-52">
			<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground pointer-events-none" />
			<Input
				value={value}
				onChange={(e) => onChange(e.target.value)}
				placeholder={placeholder}
				className="pl-8 pr-8 h-8 text-sm bg-secondary border-transparent focus-visible:border-primary focus-visible:ring-0"
			/>
			{value && (
				<button
					onClick={() => onChange("")}
					className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
				>
					<X className="h-3.5 w-3.5" />
				</button>
			)}
		</div>
	);
};