feat(workspaces): add FilterBar component and search/ordering to Workspaces.tsx

src/components/FilterBar.tsx

@@ -0,0 +1,44 @@
+// src/components/FilterBar.tsx
+import { Search, ArrowUpDown } from 'lucide-react';
+import { useTranslation } from '../hooks/useTranslation';
+
+interface FilterBarProps {
+  searchQuery: string;
+  setSearchQuery: (val: string) => void;
+  ordering: string;
+  setOrdering: (val: string) => void;
+  orderingOptions: { value: string; label: string }[];
+}
+
+export default function FilterBar({ searchQuery, setSearchQuery, ordering, setOrdering, orderingOptions }: FilterBarProps) {
+  const { t } = useTranslation();
+  
+  return (
+    <div className="flex flex-col sm:flex-row gap-4 mb-6">
+      <div className="relative flex-1">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-400" />
+        <input
+          type="text"
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          placeholder={t.workspace?.searchPlaceholder || 'Search...'}
+          className="w-full pl-10 pr-4 py-2.5 rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 text-slate-900 dark:text-white outline-none focus:ring-2 focus:ring-blue-500 transition-shadow"
+        />
+      </div>
+      <div className="flex items-center gap-2">
+        <ArrowUpDown className="h-5 w-5 text-slate-400 hidden sm:block" />
+        <select
+          value={ordering}
+          onChange={(e) => setOrdering(e.target.value)}
+          className="w-full sm:w-auto py-2.5 pl-3 pr-8 rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 text-slate-900 dark:text-white outline-none focus:ring-2 focus:ring-blue-500 transition-shadow appearance-none"
+        >
+          {orderingOptions.map((opt) => (
+            <option key={opt.value} value={opt.value}>
+              {opt.label}
+            </option>
+          ))}
+        </select>
+      </div>
+    </div>
+  );
+}