62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
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
|
|
}: Props) {
|
|
return (
|
|
<a
|
|
{...props}
|
|
className={twMerge(
|
|
"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>
|
|
);
|
|
}
|