File size: 1,335 Bytes
41a71fd |
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 { Link, LinkProps } from 'react-router-dom';
import { FC, ReactNode, useEffect, useRef } from 'react';
import { classNames } from '@/shared/lib/classNames/classNames';
import cls from './AppLink.module.scss';
export enum AppLinkTheme {
PRIMARY = 'primary',
NAVIGATION = 'navigation',
}
export enum AppLinkSize {
XL = 'xl',
L = 'l',
M = 'm',
S = 's',
XS = 'xs',
}
interface AppLinkProps extends LinkProps {
className?: string;
theme?: AppLinkTheme;
icon?: ReactNode;
reverse?: boolean;
width?: string;
size?: AppLinkSize;
}
export const AppLink: FC<AppLinkProps> = props => {
const { to, className, children, reverse, theme = '', icon, width = 'auto', size = '', ...otherProps } = props;
const $link = useRef<HTMLAnchorElement | null>(null);
useEffect(() => {
if ($link.current) $link.current.style.setProperty('--custom-width', width);
}, []);
const mods = {
[cls.reverse]: reverse,
};
return (
<Link to={to} className={classNames(cls.AppLink, mods, [className, cls[theme], cls[size]])} ref={$link} {...otherProps}>
{icon && <span className={classNames(cls.icon, { [cls.mr12]: !!icon }, [])}>{icon}</span>}
{children && <span className={cls.text}>{children}</span>}
</Link>
);
};
|