Files
myeasycms-v2/apps/web/app/(marketing)/_components/site-navigation-item.tsx
giancarlo f58d2e364f Update UI elements and refine billing schema
Several changes were made to improve UI consistency across various components. Styling updates and enhancements were applied to elements including but not limited to, the SiteHeader, SiteNavigationItem, and ModeToggle components. Additionally, a refinement was made to the billing schema to enforce only having one per-seat and one flat line item per plan.
2024-04-19 00:04:37 +08:00

38 lines
1022 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-200`,
{
'hover:border-border active:dark:bg-secondary active:bg-gray-50 dark:text-gray-400 text-gray-600 hover:text-current dark:hover:text-white':
!isActive,
'dark:bg-secondary bg-gray-50': isActive,
},
);
};
export function SiteNavigationItem({
path,
children,
}: React.PropsWithChildren<{
path: string;
}>) {
const currentPathName = usePathname();
return (
<NavigationMenuItem key={path}>
<Link className={getClassName(path, currentPathName)} href={path}>
{children}
</Link>
</NavigationMenuItem>
);
}