Qlockify/qlockify-frontend-deployment
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(components): improve components design and user experience

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-03-15 02:01:54 +08:00
parent 49e1f0080f
commit a35426c5c8
6 changed files with 55 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/FilterBar.tsx
View File

@@ -1,4 +1,6 @@
import { Search, ArrowUpDown } from 'lucide-react';
import { Select } from './ui/Select';
import { Input } from './ui/input';
interface FilterBarProps {
searchQuery: string;
@@ -9,32 +11,37 @@ interface FilterBarProps {
searchPlaceholder: string;
}
export default function FilterBar({ searchQuery, setSearchQuery, ordering, setOrdering, orderingOptions, searchPlaceholder }: FilterBarProps) {
export default function FilterBar({
searchQuery,
setSearchQuery,
ordering,
setOrdering,
orderingOptions,
searchPlaceholder
}: FilterBarProps) {
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" />
<Search className="absolute left-3 rtl:left-auto rtl:right-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={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"
className="w-full pl-10 pr-4 rtl:pl-4 rtl:pr-10 py-2.5 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 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
<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>
onChange={setOrdering}
options={orderingOptions}
className="w-full sm:w-max"
buttonClassName="whitespace-nowrap min-w-[150px]"
/>
</div>
</div>
);