From d911bfb2612f61291b01acfa65e15ea3ef0f65fb Mon Sep 17 00:00:00 2001
From: Jiuzhen Pan <2216991777@qq.com>
Date: Sun, 21 Aug 2022 23:55:32 -0700
Subject: [PATCH] feat(link): new unstyled Next.js link component

---
 components/framework/UnstyledLink.tsx | 52 +++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 components/framework/UnstyledLink.tsx

diff --git a/components/framework/UnstyledLink.tsx b/components/framework/UnstyledLink.tsx
new file mode 100644
index 0000000..ca6e2bd
--- /dev/null
+++ b/components/framework/UnstyledLink.tsx
@@ -0,0 +1,52 @@
+import Link, { LinkProps } from "next/link";
+import * as React from "react";
+import clsxm from "../../lib/clsxm";
+
+export type UnstyledLinkProps = {
+  href: string;
+  children: React.ReactNode;
+  openNewTab?: boolean;
+  className?: string;
+  nextLinkProps?: Omit<LinkProps, "href">;
+} & React.ComponentPropsWithRef<"a">;
+
+const UnstyledLink = React.forwardRef<HTMLAnchorElement, UnstyledLinkProps>(
+  ({ children, href, openNewTab, className, nextLinkProps, ...rest }, ref) => {
+    const isNewTab =
+      openNewTab !== undefined
+        ? openNewTab
+        : href && !href.startsWith("/") && !href.startsWith("#");
+
+    if (!isNewTab) {
+      return (
+        <Link href={href} {...nextLinkProps}>
+          <a
+            ref={ref}
+            {...rest}
+            className={clsxm(
+              "outline-none [-webkit-tap-highlight-color:transparent]",
+              className
+            )}
+          >
+            {children}
+          </a>
+        </Link>
+      );
+    }
+
+    return (
+      <a
+        ref={ref}
+        target="_blank"
+        rel="noopener noreferrer"
+        href={href}
+        {...rest}
+        className={clsxm("cursor-newtab", className)}
+      >
+        {children}
+      </a>
+    );
+  }
+);
+UnstyledLink.displayName = "UnstyledLink";
+export default UnstyledLink;