35 lines
761 B
TypeScript
35 lines
761 B
TypeScript
|
/**
|
||
|
|
* 搜尋工具列元件
|
||
|
|
* 提供搜尋輸入框功能
|
||
|
|
*/
|
||
|
|
|
||
|
|
import { Search } from "lucide-react";
|
||
|
|
import { Input } from "../ui/input";
|
||
|
|
|
||
|
|
interface SearchToolbarProps {
|
||
|
|
value: string;
|
||
|
|
onChange: (value: string) => void;
|
||
|
|
placeholder?: string;
|
||
|
|
className?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function SearchToolbar({
|
||
|
|
value,
|
||
|
|
onChange,
|
||
|
|
placeholder = "搜尋...",
|
||
|
|
className = "",
|
||
|
|
}: SearchToolbarProps) {
|
||
|
|
return (
|
||
|
|
<div className={`relative ${className}`}>
|
||
|
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
|
||
|
|
<Input
|
||
|
|
type="text"
|
||
|
|
placeholder={placeholder}
|
||
|
|
value={value}
|
||
|
|
onChange={(e) => onChange(e.target.value)}
|
||
|
|
className="pl-10"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|