45 lines
1.9 KiB
TypeScript
45 lines
1.9 KiB
TypeScript
// 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>
|
|
);
|
|
}
|