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) {
+function getURL(to: string): URL {
-  return (
+  try {
-    // eslint-disable-next-line jsx-a11y/anchor-is-valid
+    return new URL(to);
-    <a
+  } catch {
-      href={disabled ? undefined : href}
+    let outurl = `${window.location.origin}${
-      aria-disabled={disabled}
+      to.startsWith("/") ? to : "/" + to
-      {...props}
+    }`;
-    >
+    return new URL(outurl);
-      {children}
+  }
-    </a>
+}
-  );
+
+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 : getURL(to).origin}
+        aria-disabled={disabled}
+        {...props}
+      >
+        {children}
+      </a>
+    );
+  return <div>{link}</div>;
 }