File size: 2,870 Bytes
19e25f3 |
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 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
import { LucideIcon } from 'lucide-react';
import * as React from 'react';
import { IconType } from 'react-icons';
import { cn } from '@/lib/utils';
import UnstyledLink, {
UnstyledLinkProps,
} from '@/components/links/UnstyledLink';
const IconLinkVariant = [
'primary',
'outline',
'ghost',
'light',
'dark',
] as const;
type IconLinkProps = {
isDarkBg?: boolean;
variant?: (typeof IconLinkVariant)[number];
icon?: IconType | LucideIcon;
classNames?: {
icon?: string;
};
} & Omit<UnstyledLinkProps, 'children'>;
const IconLink = React.forwardRef<HTMLAnchorElement, IconLinkProps>(
(
{
className,
icon: Icon,
variant = 'outline',
isDarkBg = false,
classNames,
...rest
},
ref
) => {
return (
<UnstyledLink
ref={ref}
type='button'
className={cn(
'inline-flex items-center justify-center rounded font-medium',
'focus-visible:ring-primary-500 focus:outline-none focus-visible:ring',
'shadow-sm',
'transition-colors duration-75',
'min-h-[28px] min-w-[28px] p-1 md:min-h-[34px] md:min-w-[34px] md:p-2',
//#region //*=========== Variants ===========
[
variant === 'primary' && [
'bg-primary-500 text-white',
'border-primary-600 border',
'hover:bg-primary-600 hover:text-white',
'active:bg-primary-700',
'disabled:bg-primary-700',
],
variant === 'outline' && [
'text-primary-500',
'border-primary-500 border',
'hover:bg-primary-50 active:bg-primary-100 disabled:bg-primary-100',
isDarkBg &&
'hover:bg-gray-900 active:bg-gray-800 disabled:bg-gray-800',
],
variant === 'ghost' && [
'text-primary-500',
'shadow-none',
'hover:bg-primary-50 active:bg-primary-100 disabled:bg-primary-100',
isDarkBg &&
'hover:bg-gray-900 active:bg-gray-800 disabled:bg-gray-800',
],
variant === 'light' && [
'bg-white text-gray-700',
'border border-gray-300',
'hover:text-dark hover:bg-gray-100',
'active:bg-white/80 disabled:bg-gray-200',
],
variant === 'dark' && [
'bg-gray-900 text-white',
'border border-gray-600',
'hover:bg-gray-800 active:bg-gray-700 disabled:bg-gray-700',
],
],
//#endregion //*======== Variants ===========
'disabled:cursor-not-allowed',
className
)}
{...rest}
>
{Icon && <Icon size='1em' className={cn(classNames?.icon)} />}
</UnstyledLink>
);
}
);
export default IconLink;
|