Files
myeasycms-v2/apps/web/app/(marketing)/_components/site-navigation-item.tsx
gbuomprisco 342c96abfa Update UI and improve i18n loading logic
Major changes include enhancements to the UI and modifications to the i18n loading logic to more effectively handle namespaces. Several components were updated to improve readability and layout consistency. The i18n loading logic now includes additional handling for waiting until all namespaces are loaded before the i18n instance is returned, with a warning if it takes longer than expected. Furthermore, code have been refactored for fonts, buttons, and other UI elements.
2024-07-18 04:01:45 +08:00

39 lines
957 B
TypeScript

'use client';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { NavigationMenuItem } from '@kit/ui/navigation-menu';
import { cn, isRouteActive } from '@kit/ui/utils';
const getClassName = (path: string, currentPathName: string) => {
const isActive = isRouteActive(path, currentPathName);
return cn(
`text-sm font-medium px-2.5 py-2 border rounded-lg border-transparent transition-colors duration-100`,
{
'dark:text-gray-300 dark:hover:text-white':
!isActive,
'dark:text-white text-current': isActive,
},
);
};
export function SiteNavigationItem({
path,
children,
}: React.PropsWithChildren<{
path: string;
}>) {
const currentPathName = usePathname();
const className = getClassName(path, currentPathName);
return (
<NavigationMenuItem key={path}>
<Link className={className} href={path}>
{children}
</Link>
</NavigationMenuItem>
);
}