chadtmiller.com/pds.js

Switch repository

Loading…

/**
 * A real anchor. For in-app navigation a plain click is handled in place, but
 * because it carries a genuine `href`, a middle-click, a modifier-click, or a
 * copied link resolves the way any web link does. `onNavigate` receives the
 * destination for client-side routing. Pass `external` for a link off this app:
 * it opens in a new tab and is left for the browser to follow, since there is
 * nothing to route in place.
 */
export function Link({
  href,
  onNavigate,
  external,
  className,
  children,
  ...props
}) {
  if (external) {
    return (
      <a
        href={href}
        target="_blank"
        rel="noopener noreferrer"
        className={className}
        {...props}
      >
        {children}
      </a>
    );
  }

  return (
    <a
      href={href}
      onClick={(event) => {
        if (
          event.button !== 0 ||
          event.metaKey ||
          event.ctrlKey ||
          event.shiftKey ||
          event.altKey
        )
          return;
        event.preventDefault();
        onNavigate?.(href);
      }}
      className={className}
      {...props}
    >
      {children}
    </a>
  );
}