From f4e83e0cc8bf2d9ed46bf9f1cdb55aee45fa7226 Mon Sep 17 00:00:00 2001
From: Maximus <ten.maksim97@gmail.com>
Date: Thu, 8 Sep 2022 11:11:22 +0300
Subject: [PATCH] updated link to universal component

---
 src/components/typography/Link.tsx | 54 +++++++++++++++++++++++-------
 1 file changed, 41 insertions(+), 13 deletions(-)

diff --git a/src/components/typography/Link.tsx b/src/components/typography/Link.tsx
index 15a3eb8..184bbb7 100644
--- a/src/components/typography/Link.tsx
+++ b/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
-    <a
-      href={disabled ? undefined : href}
-      aria-disabled={disabled}
-      {...props}
-    >
-      {children}
-    </a>
-  );
+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 : getURL(to).origin}
+        aria-disabled={disabled}
+        {...props}
+      >
+        {children}
+      </a>
+    );
+  return <div>{link}</div>;
 }