Aarni Halinen
40 lines
1.4 KiB
TypeScript
40 lines
1.4 KiB
TypeScript
import React from "react";
|
|
import NextJSLink, { LinkProps } from "next/link";
|
|
|
|
interface Props extends Omit<LinkProps, "href" | "as"> {
|
|
to: string;
|
|
template?: string;
|
|
target?: string;
|
|
onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
|
|
onMouseEnter?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
|
|
onMouseLeave?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
|
|
}
|
|
|
|
const Link: React.FC<Props> = ({
|
|
to, template, passHref, onClick, onMouseEnter, onMouseLeave, ...props
|
|
}) => {
|
|
if (template) {
|
|
return (
|
|
<NextJSLink href={template} passHref={passHref} as={to} {...props}>
|
|
{/* eslint-disable-next-line jsx-a11y/anchor-has-content */}
|
|
<a onClick={onClick} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} {...props} />
|
|
</NextJSLink>
|
|
);
|
|
}
|
|
if (to.startsWith("/") || to.startsWith("#")) {
|
|
return (
|
|
<NextJSLink href={to} passHref={passHref} {...props}>
|
|
{/* eslint-disable-next-line jsx-a11y/anchor-has-content */}
|
|
<a onClick={onClick} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} {...props} />
|
|
</NextJSLink>
|
|
);
|
|
}
|
|
|
|
return (
|
|
// eslint-disable-next-line jsx-a11y/anchor-has-content
|
|
<a href={to} onClick={onClick} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} {...props} />
|
|
);
|
|
};
|
|
|
|
export default Link;
|