updated link to universal component

src/components/typography/Link.tsx

@@ -1,21 +1,49 @@
 import React from "react";
+import { NavLink, NavLinkProps } from "react-router-dom";
+import classNames from "classnames";
 
 type Props = {
-  href?: string;
+  to: string;
   children: React.ReactNode;
   disabled?: boolean;
   className?: string;
-} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "">;
+} & NavLinkProps &
+  Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "">;
 
-export default function Link({ href, children, disabled, ...props }: Props) {
-  return (
-    // eslint-disable-next-line jsx-a11y/anchor-is-valid
+function getURL(to: string): URL {
+  try {
+    return new URL(to);
+  } catch {
+    let outurl = `${window.location.origin}${
+      to.startsWith("/") ? to : "/" + to
+    }`;
+    return new URL(outurl);
+  }
+}
+
+export default function Link({
+  to,
+  children,
+  disabled,
+  className,
+  ...props
+}: Props) {
+  const link =
+    getURL(to).hostname === window.location.hostname ? (
+      <NavLink
+        to={getURL(to).pathname}
+        className={classNames({ "pointer-events-none": disabled }, className)}
+      >
+        {children}
+      </NavLink>
+    ) : (
       <a
-      href={disabled ? undefined : href}
+        href={disabled ? undefined : getURL(to).origin}
         aria-disabled={disabled}
         {...props}
       >
         {children}
       </a>
     );
+  return <div>{link}</div>;
 }