38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
import { Box } from '@/ui/Box';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Link } from '@/ui/Link';
|
|
import { Text } from '@/ui/Text';
|
|
import { LucideIcon } from 'lucide-react';
|
|
|
|
interface NavLinkProps {
|
|
href: string;
|
|
label: string;
|
|
icon?: LucideIcon;
|
|
isActive?: boolean;
|
|
variant?: 'sidebar' | 'top';
|
|
}
|
|
|
|
/**
|
|
* NavLink provides a consistent link component for navigation.
|
|
* Supports both sidebar and top navigation variants.
|
|
*/
|
|
export function NavLink({ href, label, icon, isActive, variant = 'sidebar' }: NavLinkProps) {
|
|
const content = (
|
|
<Box display="flex" alignItems="center" gap={variant === 'top' ? 2 : 3} paddingX={3} paddingY={2} rounded={variant === 'sidebar' ? 'md' : undefined} style={{ transition: 'all 0.2s' }}>
|
|
{icon && <Icon icon={icon} size={variant === 'top' ? 4 : 5} intent={isActive ? 'primary' : 'low'} />}
|
|
<Text size="sm" weight={isActive ? 'bold' : 'medium'} variant={isActive ? 'primary' : 'med'}>
|
|
{label}
|
|
</Text>
|
|
{variant === 'sidebar' && isActive && (
|
|
<Box marginLeft="auto" width="4px" height="1rem" bg="var(--ui-color-intent-primary)" rounded="full" />
|
|
)}
|
|
</Box>
|
|
);
|
|
|
|
return (
|
|
<Link href={href} variant="inherit" underline="none" block={variant === 'sidebar'}>
|
|
{content}
|
|
</Link>
|
|
);
|
|
}
|