46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import Link from "next/link";
|
|
import { ReactNode } from "react";
|
|
|
|
const arrowChildren = (children: ReactNode) => (
|
|
<>
|
|
<span className="transition-opacity duration-300 ease-in-out group-hover:opacity-67">
|
|
{children}
|
|
</span>
|
|
<span
|
|
className="translate-x-0 opacity-0 transition-all duration-300 ease-in-out group-hover:translate-x-1 group-hover:opacity-33"
|
|
aria-hidden
|
|
>
|
|
→
|
|
</span>
|
|
</>
|
|
);
|
|
|
|
type ArrowLinkProps = {
|
|
href: string;
|
|
children: ReactNode;
|
|
className?: string;
|
|
target?: string;
|
|
rel?: string;
|
|
};
|
|
|
|
export function ArrowLink({ href, children, className, target, rel }: ArrowLinkProps) {
|
|
return (
|
|
<Link href={href} className={["group inline-flex items-baseline gap-1", className].join(" ")} target={target} rel={rel}>
|
|
{arrowChildren(children)}
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
type ArrowButtonProps = {
|
|
onClick: () => void;
|
|
children: ReactNode;
|
|
className?: string;
|
|
};
|
|
|
|
export function ArrowButton({ onClick, children, className }: ArrowButtonProps) {
|
|
return (
|
|
<button type="button" onClick={onClick} className={["group inline-flex items-baseline gap-1", className].join(" ")}>
|
|
{arrowChildren(children)}
|
|
</button>
|
|
);
|
|
}
|