| 1 | import type { MobileNavItemProps } from '../types' |
| 2 | /** |
| 3 | * MobileNavItem - 移动端单个导航项 |
| 4 | */ |
| 5 | import { FileText } from 'lucide-react' |
| 6 | import Link from 'next/link' |
| 7 | import { useTransClient } from '@/app/i18n/client' |
| 8 | import { useGetClientLng } from '@/hooks/useSystem' |
| 9 | import { cn } from '@/utils/className' |
| 10 | |
| 11 | export function MobileNavItem({ |
| 12 | path, |
| 13 | href, |
| 14 | translationKey, |
| 15 | icon, |
| 16 | isActive, |
| 17 | onClose, |
| 18 | className, |
| 19 | }: MobileNavItemProps) { |
| 20 | const { t } = useTransClient('route') |
| 21 | const lng = useGetClientLng() |
| 22 | const fullPath = href ?? (path.startsWith('/') ? `/${lng}${path}` : `/${lng}/${path}`) |
| 23 | |
| 24 | return ( |
| 25 | <Link |
| 26 | href={fullPath} |
| 27 | onClick={onClose} |
| 28 | data-testid={`mobile-nav-item-${translationKey}`} |
| 29 | className={cn( |
| 30 | 'flex items-center gap-3 px-4 py-3 rounded-lg text-base font-medium transition-all', |
| 31 | 'text-muted-foreground hover:bg-brand-cyan/10 hover:text-brand-cyan', |
| 32 | isActive && 'bg-brand-cyan/10 text-brand-cyan', |
| 33 | className, |
| 34 | )} |
| 35 | > |
| 36 | <span className={cn('flex items-center justify-center', isActive && 'text-brand-cyan')}> |
| 37 | {icon || <FileText size={20} />} |
| 38 | </span> |
| 39 | <span>{t(translationKey)}</span> |
| 40 | </Link> |
| 41 | ) |
| 42 | } |
| 43 |