60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { ChevronDown } from 'lucide-react';
|
||
|
|
|
||
|
|
interface NavigationItemProps {
|
||
|
|
label: string;
|
||
|
|
href: string;
|
||
|
|
current: boolean;
|
||
|
|
hasDropdown?: boolean;
|
||
|
|
isDropdownOpen?: boolean;
|
||
|
|
onKeyDown?: (event: React.KeyboardEvent) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function NavigationItem({
|
||
|
|
label,
|
||
|
|
href,
|
||
|
|
current,
|
||
|
|
hasDropdown = false,
|
||
|
|
isDropdownOpen = false,
|
||
|
|
onKeyDown,
|
||
|
|
}: NavigationItemProps) {
|
||
|
|
const baseClasses =
|
||
|
|
'relative inline-flex items-center px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-offset-2 focus:ring-offset-amber-900 min-h-[44px]';
|
||
|
|
|
||
|
|
const currentClasses = current
|
||
|
|
? 'bg-amber-800 text-yellow-300 shadow-md'
|
||
|
|
: 'text-yellow-100 hover:text-yellow-300 hover:bg-amber-800/50';
|
||
|
|
|
||
|
|
const dropdownClasses = isDropdownOpen ? 'bg-amber-800/50' : '';
|
||
|
|
|
||
|
|
return (
|
||
|
|
<a
|
||
|
|
href={href}
|
||
|
|
className={`${baseClasses} ${currentClasses} ${dropdownClasses}`}
|
||
|
|
aria-current={current ? 'page' : undefined}
|
||
|
|
onKeyDown={onKeyDown}
|
||
|
|
role={hasDropdown ? 'button' : 'link'}
|
||
|
|
aria-expanded={hasDropdown ? isDropdownOpen : undefined}
|
||
|
|
aria-haspopup={hasDropdown ? 'menu' : undefined}
|
||
|
|
>
|
||
|
|
<span className="flex items-center space-x-2">
|
||
|
|
<span>{label}</span>
|
||
|
|
{hasDropdown && (
|
||
|
|
<ChevronDown
|
||
|
|
className={`w-4 h-4 transition-transform duration-200 ${
|
||
|
|
isDropdownOpen ? 'rotate-180' : ''
|
||
|
|
}`}
|
||
|
|
aria-hidden="true"
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
</span>
|
||
|
|
|
||
|
|
{/* Current page indicator */}
|
||
|
|
{current && (
|
||
|
|
<div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-8 h-0.5 bg-yellow-300 rounded-full" />
|
||
|
|
)}
|
||
|
|
</a>
|
||
|
|
);
|
||
|
|
}
|