File size: 1,634 Bytes
9b906ea | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | import { useTranslation } from "react-i18next";
import { NavigationLink } from "#/components/shared/navigation-link";
import { cn } from "#/utils/utils";
import { Typography } from "#/ui/typography";
import { I18nKey } from "#/i18n/declaration";
import { SettingsNavItem } from "#/constants/settings-nav";
import { navInteractiveTransitionClassName } from "#/components/features/sidebar/sidebar-layout";
interface SettingsNavLinkProps {
item: SettingsNavItem;
onClick: () => void;
}
export function SettingsNavLink({ item, onClick }: SettingsNavLinkProps) {
const { t } = useTranslation("openhands");
const { to, icon, text } = item;
return (
<NavigationLink
end
to={to}
onClick={onClick}
className={({ isActive }) =>
cn(
"group flex items-center gap-3 p-1 sm:px-3.5 sm:py-2 rounded",
navInteractiveTransitionClassName,
isActive ? "bg-tertiary" : "hover:bg-[var(--oh-surface-raised)]",
isActive ? "[&_*]:text-white" : "",
)
}
>
<Typography.Text className="flex h-5 w-5 shrink-0 items-center justify-center text-[var(--oh-muted)] group-hover:text-white">
{icon}
</Typography.Text>
<div className="min-w-0 flex-1 overflow-hidden">
<Typography.Text
className={cn(
"block truncate whitespace-nowrap text-[var(--oh-muted)] group-hover:text-white",
"transition-transform duration-300 motion-reduce:transition-none group-hover:translate-x-1",
)}
>
{t(text as I18nKey)}
</Typography.Text>
</div>
</NavigationLink>
);
}
|