yaak/src-web/components/core/Link.tsx

import { Link as RouterLink } from '@tanstack/react-router';
import classNames from 'classnames';
import type { HTMLAttributes } from 'react';
import { appInfo } from '../../lib/appInfo';
import { Icon } from './Icon';

interface Props extends HTMLAttributes<HTMLAnchorElement> {
  href: string;
  noUnderline?: boolean;
}

export function Link({ href, children, noUnderline, className, ...other }: Props) {
  const isExternal = href.match(/^https?:\/\//);

  className = classNames(
    className,
    'relative',
    'inline-flex items-center hover:underline group',
    !noUnderline && 'underline',
  );

  if (isExternal) {
    const isYaakLink = href.startsWith('https://yaak.app');
    let finalHref = href;
    if (isYaakLink) {
      const url = new URL(href);
      url.searchParams.set('ref', appInfo.identifier);
      finalHref = url.toString();
    }
    return (
      // eslint-disable-next-line react/jsx-no-target-blank
      <a
        href={finalHref}
        target="_blank"
        rel={isYaakLink ? undefined : 'noopener noreferrer'}
        onClick={(e) => e.preventDefault()}
        className={className}
        {...other}
      >
        <span className="pr-5">{children}</span>
        <Icon
          className="inline absolute right-0.5 top-[0.3em] opacity-70 group-hover:opacity-100"
          size="xs"
          icon="external_link"
        />
      </a>
    );
  }

  return (
    <RouterLink to={href} className={className} {...other}>
      {children}
    </RouterLink>
  );
}

export function FeedbackLink() {
  return <Link href="https://yaak.app/roadmap">Feedback</Link>;
}