Automatically add attributes on external true

Author: Rikthepixel

src/components/navigation/Link.tsx

@@ -33,15 +33,21 @@ type LinkProps = {
   & InternalLinkProps
   & React.RefAttributes<HTMLAnchorElement>;
 
-const Link = ({ className, color, underline, children, external, hrefLang = "en", ...props }: LinkProps) => {
+const Link = ({ className, color, underline, children, external, hrefLang = "en", rel, ...props }: LinkProps) => {
 
   const computedClassName = useMemo(
     () => twMerge(style({ color, underline }), className),
     [className, color, underline]
   );
 
   return (
-    <InternalLink className={computedClassName} hrefLang={hrefLang} {...props}>
+    <InternalLink
+      className={computedClassName}
+      hrefLang={hrefLang}
+      rel={`${external ? "external" : ""} ${rel}`}
+      target={external ? "_blank" : undefined}
+      {...props}
+    >
       {children}
       {external && <ArrowTopRightOnSquareIcon
         className="inline w-4 h-4"