drfeely.com/components/ExtLearnMoreLink.tsx

29 lines
784 B
TypeScript
Raw Permalink Normal View History

2023-09-10 05:47:32 +00:00
import { ReactNode } from "react";
import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/solid";
import Link from "next/link";
interface Props {
className?: string;
href: string;
target?: string;
children?: ReactNode;
}
const ExtLearnMoreLink = ({ className, href, target, children }: Props) => {
return (
<Link
target={target}
href={href}
className={
"m-3 my-0 inline-block rounded-lg bg-primary-500 p-3 text-center align-middle font-bold text-primary-100 drop-shadow-md transition-all duration-300 hover:bg-secondary-500 hover:drop-shadow-xl " +
className
}
>
{children}{" "}
<ArrowTopRightOnSquareIcon className="inline w-[20px] align-[-3px]" />
</Link>
);
};
export default ExtLearnMoreLink;