first commit

resources/js/Components/Vendor/VendorSearchBar.tsx

@@ -0,0 +1,37 @@
+/**
+ * 廠商搜尋列元件
+ */
+
+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>
+    );
+}