1import * as React from 'react';
2import { classNames } from '../../../lib/utils';
3
4interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
5  href: string;
6  variant?: 'small' | 'large';
7  className?: string;
8  children: React.ReactNode;
9}
10
11const Link: React.FC<LinkProps> = ({
12  href,
13  variant = 'small',
14  className,
15  children,
16  ...props
17}) => {
18  const baseClasses =
19    'rounded-xl font-semibold text-base transition-colors hover:text-primary active:text-red-700';
20  const variantClasses =
21    variant === 'small'
22      ? 'font-medium'
23      : 'text-alpha-900 text-lg';
24
25  const classes = classNames(baseClasses, variantClasses, className);
26
27  return (
28    <a href={href} className={classes} {...props}>
29      {children}
30    </a>
31  );
32};
33
34Link.displayName = 'Link';
35
36export { Link, LinkProps };
37

1import * as React from 'react';
2import { classNames } from '../../../lib/utils';
3
4interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
5  href: string;
6  variant?: 'small' | 'large';
7  className?: string;
8  children: React.ReactNode;
9}
10
11const Link: React.FC<LinkProps> = ({
12  href,
13  variant = 'small',
14  className,
15  children,
16  ...props
17}) => {
18  const baseClasses =
19    'rounded-xl font-semibold text-base transition-colors hover:text-primary active:text-red-700';
20  const variantClasses =
21    variant === 'small'
22      ? 'font-medium'
23      : 'text-alpha-900 text-lg';
24
25  const classes = classNames(baseClasses, variantClasses, className);
26
27  return (
28    <a href={href} className={classes} {...props}>
29      {children}
30    </a>
31  );
32};
33
34Link.displayName = 'Link';
35
36export { Link, LinkProps };
37