Updates

components/layout/Link.tsx

@@ -1,29 +1,61 @@
-import { AnchorHTMLAttributes, DetailedHTMLProps } from "react";
+import { AnchorHTMLAttributes, DetailedHTMLProps, RefAttributes } from "react";
 import { twMerge } from "tailwind-merge";
+import { ArrowUpRight, LucideProps } from "lucide-react";
+
+type Props = DetailedHTMLProps<
+    AnchorHTMLAttributes<HTMLAnchorElement>,
+    HTMLAnchorElement
+> & {
+    showArrow?: boolean;
+    arrowSize?: number;
+    arrowProps?: Omit<LucideProps, "ref"> & RefAttributes<SVGSVGElement>;
+    strict?: boolean;
+};
 
 /**
  * # General Anchor Elements
  * @className twui-a | twui-anchor
+ * @info use `cancel-link` class name to prevent triggering this link from a child element
  */
 export default function Link({
+    showArrow,
+    arrowSize = 20,
+    arrowProps,
+    strict,
     ...props
-}: DetailedHTMLProps<
-    AnchorHTMLAttributes<HTMLAnchorElement>,
-    HTMLAnchorElement
->) {
+}: Props) {
     return (
         <a
             {...props}
             className={twMerge(
-                "text-base text-link-500 no-underline hover:text-link-500/50",
-                "text-blue-600 dark:text-blue-400",
-                "border-0 border-b border-blue-300 border-solid leading-4",
+                "text-link-500 no-underline hover:text-link-500/50",
+                "text-link dark:text-link-dark hover:opacity-80 transition-all",
+                "border-0 border-b border-link dark:border-link-dark border-solid leading-4",
                 "twui-anchor",
                 "twui-a",
                 props.className
             )}
+            onClick={(e) => {
+                const target = e.target as HTMLElement;
+
+                if (target.closest(".cancel-link")) {
+                    e.preventDefault();
+                }
+                props?.onClick?.(e);
+            }}
+            data-strict={strict ? "yes" : undefined}
         >
             {props.children}
+            {showArrow && (
+                <ArrowUpRight
+                    size={arrowSize}
+                    {...arrowProps}
+                    className={twMerge(
+                        "inline-block ml-1 -mt-[1px]",
+                        arrowProps?.className
+                    )}
+                />
+            )}
         </a>
     );
 }