new-personal-site/components/lib/layout/Link.tsx
2024-12-09 16:36:17 +01:00

31 lines
866 B
TypeScript

import { AnchorHTMLAttributes, DetailedHTMLProps } from "react";
import { twMerge } from "tailwind-merge";
/**
* # General Anchor Elements
* @className twui-a | twui-anchor
*/
export default function Link({
...props
}: DetailedHTMLProps<
AnchorHTMLAttributes<HTMLAnchorElement>,
HTMLAnchorElement
>) {
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",
// "focus:text-red-600",
"twui-anchor",
"twui-a",
props.className
)}
>
{props.children}
</a>
);
}