38 lines
1.2 KiB
TypeScript
38 lines
1.2 KiB
TypeScript
/**
|
|
* 廠商搜尋列元件
|
|
*/
|
|
|
|
import { Search, Plus } from "lucide-react";
|
|
import { Input } from "@/Components/ui/input";
|
|
import { Button } from "@/Components/ui/button";
|
|
|
|
interface VendorSearchBarProps {
|
|
searchQuery: string;
|
|
onSearchChange: (query: string) => void;
|
|
onAddClick: () => void;
|
|
}
|
|
|
|
export default function VendorSearchBar({
|
|
searchQuery,
|
|
onSearchChange,
|
|
onAddClick,
|
|
}: VendorSearchBarProps) {
|
|
return (
|
|
<div className="flex justify-between items-center">
|
|
<div className="relative flex-1 max-w-md">
|
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
|
|
<Input
|
|
placeholder="搜尋廠商名稱 / 聯絡人 / Email"
|
|
value={searchQuery}
|
|
onChange={(e) => onSearchChange(e.target.value)}
|
|
className="pl-9 input-outlined-primary"
|
|
/>
|
|
</div>
|
|
<Button onClick={onAddClick} className="gap-2 button-filled-primary">
|
|
<Plus className="h-4 w-4" />
|
|
新增廠商
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|