Daniel Bedeleanu
c45685dd4d
- Add cursor-pointer to all clickable buttons and interactive elements - Add focus:ring-2 focus:ring-primary/blue focus:outline-none to all buttons - Add aria-label to icon-only buttons and actions - Update focus states from focus-visible to focus for consistency - Add disabled:cursor-not-allowed for disabled button states - Improve keyboard navigation with proper focus indicators Components updated: - BottomNav: navigation buttons with aria-labels - Scanner: try again, zoom, word selection, cancel buttons - ItemComparisonModal: skip and update action buttons - ConfirmationModal: close, cancel, delete buttons with input focus - AIOnboarding: all mode toggles, camera, upload, capture, edit, delete buttons - Plus interactive cards and list items This ensures WCAG AA compliance for keyboard navigation and visual feedback.
90 lines
3.4 KiB
TypeScript
90 lines
3.4 KiB
TypeScript
'use client';
|
|
|
|
import { Smartphone, Package, History, Settings, Shield, LogOut } from 'lucide-react';
|
|
import { useRouter, usePathname } from 'next/navigation';
|
|
import { clsx, type ClassValue } from 'clsx';
|
|
import { twMerge } from 'tailwind-merge';
|
|
|
|
function cn(...inputs: ClassValue[]) {
|
|
return twMerge(clsx(inputs));
|
|
}
|
|
|
|
interface BottomNavProps {
|
|
currentUser: any;
|
|
}
|
|
|
|
export default function BottomNav({
|
|
currentUser
|
|
}: BottomNavProps) {
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
|
|
const isHome = pathname === '/';
|
|
const isInventory = pathname === '/inventory';
|
|
const isLogs = pathname === '/logs';
|
|
const isAdmin = pathname === '/admin';
|
|
|
|
return (
|
|
<footer className="fixed bottom-0 left-0 right-0 py-3 px-2 pb-safe bg-slate-950 border-t border-slate-900 z-40 transition-all duration-300">
|
|
<div className="max-w-xl mx-auto flex justify-around items-center text-slate-400">
|
|
|
|
<button
|
|
onClick={() => router.push('/')}
|
|
aria-label="Go to Home"
|
|
className={cn("flex flex-col items-center gap-1 rounded px-2 py-1 cursor-pointer transition-colors focus:ring-2 focus:ring-primary focus:outline-none", isHome && "text-primary")}
|
|
>
|
|
<Smartphone size={20} />
|
|
<span className="text-xs font-bold transition-all">Home</span>
|
|
</button>
|
|
|
|
{/* Inventory */}
|
|
<button
|
|
onClick={() => router.push('/inventory')}
|
|
aria-label="Go to Inventory"
|
|
className={cn("flex flex-col items-center gap-1 rounded px-2 py-1 cursor-pointer transition-colors focus:ring-2 focus:ring-primary focus:outline-none", isInventory && "text-primary")}
|
|
>
|
|
<Package size={20} />
|
|
<span className="text-xs font-bold transition-all">Inventory</span>
|
|
</button>
|
|
|
|
{/* Logs */}
|
|
<button
|
|
onClick={() => router.push('/logs')}
|
|
aria-label="Go to Logs"
|
|
className={cn("flex flex-col items-center gap-1 rounded px-2 py-1 cursor-pointer transition-colors focus:ring-2 focus:ring-primary focus:outline-none", isLogs && "text-primary")}
|
|
>
|
|
<History size={20} />
|
|
<span className="text-xs font-bold transition-all">Logs</span>
|
|
</button>
|
|
|
|
{/* Admin Settings */}
|
|
{currentUser?.role === 'admin' && (
|
|
<button
|
|
onClick={() => router.push('/admin')}
|
|
aria-label="Go to Admin"
|
|
className={cn("flex flex-col items-center gap-1 rounded px-2 py-1 cursor-pointer transition-colors focus:ring-2 focus:ring-primary focus:outline-none", isAdmin && "text-primary")}
|
|
>
|
|
<Settings size={20} />
|
|
<span className="text-xs font-bold transition-all">Admin</span>
|
|
</button>
|
|
)}
|
|
|
|
{/* Logout */}
|
|
<button
|
|
onClick={() => {
|
|
if (window.confirm("Are you sure you want to logout?")) {
|
|
import('@/lib/auth').then(m => m.clearAuth());
|
|
window.location.href = '/login';
|
|
}
|
|
}}
|
|
aria-label="Logout"
|
|
className="flex flex-col items-center gap-1 text-rose-500 hover:text-rose-400 cursor-pointer transition-colors rounded px-2 py-1 focus:ring-2 focus:ring-rose-500 focus:outline-none"
|
|
>
|
|
<LogOut size={20} />
|
|
<span className="text-xs font-bold transition-all">Logout</span>
|
|
</button>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|