| 10 | import type { NavItemProps } from "../types"; |
| 11 | |
| 12 | export function NavItem(item: NavItemProps) { |
| 13 | const { title, icon, info, caption, open, active, disabled, depth, hasChild } = item; |
| 14 | const { t } = useLocale(); |
| 15 | |
| 16 | const content = ( |
| 17 | <> |
| 18 | {/* Icon */} |
| 19 | <span style={navItemStyles.icon} className="mr-3 items-center justify-center"> |
| 20 | {icon && typeof icon === "string" ? <Icon icon={icon} /> : icon} |
| 21 | </span> |
| 22 | |
| 23 | {/* Texts */} |
| 24 | <span style={navItemStyles.texts} className="min-h-[24px]"> |
| 25 | {/* Title */} |
| 26 | <span style={navItemStyles.title}>{t(title)}</span> |
| 27 | |
| 28 | {/* Caption */} |
| 29 | {caption && ( |
| 30 | <TooltipProvider> |
| 31 | <Tooltip> |
| 32 | <TooltipTrigger asChild> |
| 33 | <span style={navItemStyles.caption}>{t(caption)}</span> |
| 34 | </TooltipTrigger> |
| 35 | <TooltipContent side="top" align="start"> |
| 36 | {t(caption)} |
| 37 | </TooltipContent> |
| 38 | </Tooltip> |
| 39 | </TooltipProvider> |
| 40 | )} |
| 41 | </span> |
| 42 | |
| 43 | {/* Info */} |
| 44 | {info && <span style={navItemStyles.info}>{info}</span>} |
| 45 | |
| 46 | {/* Arrow */} |
| 47 | {hasChild && ( |
| 48 | <Icon |
| 49 | icon="eva:arrow-ios-forward-fill" |
| 50 | style={{ |
| 51 | ...navItemStyles.arrow, |
| 52 | transform: open ? "rotate(90deg)" : "rotate(0deg)", |
| 53 | }} |
| 54 | /> |
| 55 | )} |
| 56 | </> |
| 57 | ); |
| 58 | |
| 59 | const itemClassName = cn( |
| 60 | navItemClasses.base, |
| 61 | navItemClasses.hover, |
| 62 | "min-h-[44px]", |
| 63 | active && depth === 1 && navItemClasses.active, |
| 64 | active && depth !== 1 && "bg-action-hover!", |
| 65 | disabled && navItemClasses.disabled, |
| 66 | ); |
| 67 | |
| 68 | return ( |
| 69 | <NavItemRenderer item={item} className={itemClassName}> |