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>
);

6
src/components/Navbar.tsx
View File

@@ -104,7 +104,7 @@ export function Navbar() {
return (
<>
<header className="border-b border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 px-8 py-6 flex items-center justify-between transition-colors">
<header className="sticky top-0 z-50 border-b border-slate-200/80 dark:border-slate-800/80 bg-white/70 dark:bg-slate-900/70 backdrop-blur-md px-8 py-6 flex items-center justify-between transition-colors">
<div
className="flex items-center gap-2 cursor-pointer"
onClick={() => navigate("/")}
@@ -196,7 +196,7 @@ export function Navbar() {
</header>
{showLogoutModal && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4" onClick={() => setShowLogoutModal(false)}>
<div className="fixed inset-0 z-60 flex items-center justify-center bg-black/50 px-4" onClick={() => setShowLogoutModal(false)}>
<div className="w-full max-w-sm rounded-lg bg-white p-6 shadow-lg dark:bg-slate-900 border dark:border-slate-800" onClick={(e) => e.stopPropagation()}>
<h2 className="mb-2 text-lg font-bold text-slate-900 dark:text-white">
{t.confirmLogoutTitle || "Confirm Logout"}
@@ -210,7 +210,7 @@ export function Navbar() {
onClick={() => setShowLogoutModal(false)}
className="dark:text-white"
>
{t.cancel || "Cancel"}
{t.actions?.cancel || "Cancel"}
</Button>
<Button
variant="destructive"

42
src/components/Pagination.tsx
View File

@@ -1,5 +1,7 @@
import React from 'react';
import { useTranslation } from '../hooks/useTranslation';
import { Select } from './ui/Select';
import { Button } from './ui/button';
interface PaginationProps {
currentPage: number;
@@ -35,46 +37,48 @@ export const Pagination: React.FC<PaginationProps> = ({
const endItem = Math.min(currentPage * limit, totalCount);
return (
<div className="mt-auto sticky bottom-0 left-0 right-0 z-10 bg-white/90 dark:bg-slate-950/90 backdrop-blur-md flex items-center justify-between py-4 border-t border-slate-200 dark:border-slate-800 px-4 -mx-4 sm:px-0 sm:mx-0">
<div className="mt-auto sticky bottom-0 bg-slate-50/60 dark:bg-slate-900/60 backdrop-blur-md left-0 right-0 z-10 flex items-center justify-between py-4 px-4 -mx-4 sm:px-0 sm:mx-0">
<div className="flex items-center gap-4">
<select
value={limit}
onChange={(e) => {
onLimitChange(Number(e.target.value));
<Select
value={String(limit)}
onChange={(val) => {
onLimitChange(Number(val));
onPageChange(1);
}}
className="p-1.5 border rounded-lg text-sm bg-white dark:bg-slate-900 border-slate-300 dark:border-slate-700 text-slate-700 dark:text-slate-300 outline-none focus:ring-2 focus:ring-blue-500"
>
{pageSizeOptions.map((option) => (
<option key={option} value={option}>
{toPersianNum(option)} {t.pagination?.perPage || 'per page'}
</option>
))}
</select>
options={pageSizeOptions.map((option) => ({
value: String(option),
label: String(toPersianNum(option)),
}))}
className="w-20 shrink-0"
buttonClassName=""
/>
<span className="text-sm text-slate-500 dark:text-slate-400 hidden sm:inline-block">
{t.pagination?.showing || 'Showing'} <strong className="text-slate-700 dark:text-slate-300">{toPersianNum(startItem)}</strong> {t.pagination?.to || '-'} <strong className="text-slate-700 dark:text-slate-300">{toPersianNum(endItem)}</strong> {t.pagination?.of || 'of'} <strong className="text-slate-700 dark:text-slate-300">{toPersianNum(totalCount)}</strong>
</span>
</div>
<div className="flex items-center gap-3">
<button
<Button
variant="outline"
size="sm"
onClick={() => onPageChange(currentPage - 1)}
disabled={currentPage === 1}
className="px-4 py-1.5 border rounded-lg text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed border-slate-300 dark:border-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800"
>
{t.pagination?.previous || 'Previous'}
</button>
</Button>
<span className="text-sm text-slate-600 dark:text-slate-400 font-medium hidden sm:inline-block">
{t.pagination?.page || 'Page'} {toPersianNum(currentPage)} {t.pagination?.of || 'of'} {toPersianNum(totalPages)}
</span>
<button
<Button
variant="outline"
size="sm"
onClick={() => onPageChange(currentPage + 1)}
disabled={currentPage >= totalPages}
className="px-4 py-1.5 border rounded-lg text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed border-slate-300 dark:border-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800"
>
{t.pagination?.next || 'Next'}
</button>
</Button>
</div>
</div>
);
};

8
src/components/Sidebar.tsx
View File

@@ -6,7 +6,8 @@ import {
PanelLeftClose,
PanelLeftOpen,
PanelRightClose,
PanelRightOpen
PanelRightOpen,
Briefcase,
} from 'lucide-react';
import { useTranslation } from '../hooks/useTranslation';
@@ -31,6 +32,11 @@ export const Sidebar = () => {
icon: Users,
label: t.sidebar?.clients || 'Clients'
},
{
path: '/projects',
icon: Briefcase,
label: t.sidebar?.projects || 'Projects'
},
];
return (

2
src/components/ui/TextAreaInput.tsx
View File

@@ -6,7 +6,7 @@ const TextAreaInput = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
({ className, ...props }, ref) => {
return (
<textarea
className={`flex min-h-50 w-full rounded-md border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50 px-3 py-2 text-sm ring-offset-white dark:ring-offset-slate-950 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 dark:placeholder:text-slate-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 dark:focus-visible:ring-slate-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${className || ""}`}
className={`flex min-h-50 w-full rounded-md border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-800 dark:text-slate-50 px-3 py-2 text-sm ring-offset-white dark:ring-offset-slate-950 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 dark:placeholder:text-slate-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 dark:focus-visible:ring-slate-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${className || ""}`}
ref={ref}
{...props}
/>

2
src/components/ui/input.tsx
View File

@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
<input
type={type}
className={cn(
"flex h-10 w-full rounded-md border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50 px-3 py-2 text-sm ring-offset-white dark:ring-offset-slate-950 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 dark:placeholder:text-slate-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 dark:focus-visible:ring-slate-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
"flex h-10 w-full rounded-md border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-800 dark:text-slate-50 px-3 py-2 text-sm ring-offset-white dark:ring-offset-slate-950 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 dark:placeholder:text-slate-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 dark:focus-visible:ring-slate-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className
)}
ref={ref}