refactor: extract FilterBar component

frontend/components/FilterBar.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { Search } from 'lucide-react';
+
+interface FilterBarProps {
+  searchQuery: string;
+  onChange: (value: string) => void;
+}
+
+export default function FilterBar({ searchQuery, onChange }: FilterBarProps) {
+  return (
+    <div className="relative">
+      <input
+        type="text"
+        placeholder="Search catalog..."
+        value={searchQuery}
+        onChange={(e) => onChange(e.target.value)}
+        className="w-full bg-surface border border-slate-800 rounded-2xl py-3.5 pr-4 pl-11 text-sm focus:border-primary outline-none transition-all placeholder:text-secondary"
+      />
+      <div className="absolute left-4 top-1/2 -translate-y-1/2 text-secondary">
+        <Search size={18} />
+      </div>
+    </div>
+  );
+}