61 lines
2.1 KiB
TypeScript
61 lines
2.1 KiB
TypeScript
/**
|
||
* 庫存篩選工具列
|
||
* 包含搜尋框和產品類型篩選
|
||
*/
|
||
|
||
import { Search, Filter } from "lucide-react";
|
||
import { Input } from "@/Components/ui/input";
|
||
import {
|
||
Select,
|
||
SelectContent,
|
||
SelectItem,
|
||
SelectTrigger,
|
||
SelectValue
|
||
} from "@/Components/ui/select";
|
||
|
||
interface InventoryToolbarProps {
|
||
searchTerm: string;
|
||
onSearchChange: (value: string) => void;
|
||
typeFilter: string;
|
||
onTypeFilterChange: (value: string) => void;
|
||
}
|
||
|
||
export default function InventoryToolbar({
|
||
searchTerm,
|
||
onSearchChange,
|
||
typeFilter,
|
||
onTypeFilterChange,
|
||
}: InventoryToolbarProps) {
|
||
return (
|
||
<div className="flex flex-col md:flex-row gap-4 items-start md:items-center justify-between p-4 bg-white rounded-lg border shadow-sm">
|
||
<div className="relative w-full md:max-w-md">
|
||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
|
||
<Input
|
||
placeholder="搜尋商品名稱或批號..."
|
||
value={searchTerm}
|
||
onChange={(e) => onSearchChange(e.target.value)}
|
||
className="pl-10"
|
||
/>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-3 w-full md:w-auto">
|
||
<div className="flex items-center gap-2 text-sm text-gray-500 whitespace-nowrap">
|
||
<Filter className="h-4 w-4" />
|
||
<span>篩選類型：</span>
|
||
</div>
|
||
<Select value={typeFilter} onValueChange={onTypeFilterChange}>
|
||
<SelectTrigger className="w-full md:w-[180px]">
|
||
<SelectValue placeholder="所有類型" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="all">所有類型</SelectItem>
|
||
<SelectItem value="原物料">原物料</SelectItem>
|
||
<SelectItem value="半成品">半成品</SelectItem>
|
||
<SelectItem value="成品">成品</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|