50 lines
1.4 KiB
TypeScript
50 lines
1.4 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>;
|
|
};
|
|
|
|
/**
|
|
* # General Anchor Elements
|
|
* @className twui-a | twui-anchor
|
|
*/
|
|
export default function Link({
|
|
showArrow,
|
|
arrowSize = 20,
|
|
arrowProps,
|
|
...props
|
|
}: 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 hover:opacity-60 transition-all",
|
|
"border-0 border-b border-blue-300 dark:border-blue-200/30 border-solid leading-4",
|
|
"twui-anchor",
|
|
"twui-a",
|
|
props.className
|
|
)}
|
|
>
|
|
{props.children}
|
|
{showArrow && (
|
|
<ArrowUpRight
|
|
size={arrowSize}
|
|
{...arrowProps}
|
|
className={twMerge(
|
|
"inline-block ml-1 -mt-[1px]",
|
|
arrowProps?.className
|
|
)}
|
|
/>
|
|
)}
|
|
</a>
|
|
);
|
|
}
|