52 lines
1.1 KiB
TypeScript
52 lines
1.1 KiB
TypeScript
import { FC } from "react";
|
|
import { Box, BoxProps } from "rebass/styled-components";
|
|
import styled, { css } from "styled-components";
|
|
import { ifProp } from "styled-tools";
|
|
import Link from "next/link";
|
|
|
|
interface Props extends BoxProps {
|
|
href?: string;
|
|
title?: string;
|
|
target?: string;
|
|
rel?: string;
|
|
forButton?: boolean;
|
|
isNextLink?: boolean;
|
|
}
|
|
const StyledBox = styled(Box)<Props>`
|
|
cursor: pointer;
|
|
color: #2196f3;
|
|
border-bottom: 1px dotted transparent;
|
|
text-decoration: none;
|
|
transition: all 0.2s ease-out;
|
|
|
|
${ifProp(
|
|
{ forButton: false },
|
|
css`
|
|
:hover {
|
|
border-bottom-color: #2196f3;
|
|
}
|
|
`
|
|
)}
|
|
`;
|
|
|
|
export const ALink: FC<Props> = (props) => {
|
|
if (props.isNextLink) {
|
|
const { href, target, title, rel, ...rest } = props;
|
|
return (
|
|
<Link href={href} target={target} title={title} rel={rel} passHref>
|
|
<StyledBox as="a" {...rest} />
|
|
</Link>
|
|
);
|
|
}
|
|
return <StyledBox as="a" {...props} />;
|
|
};
|
|
|
|
ALink.displayName = "ALink";
|
|
|
|
ALink.defaultProps = {
|
|
pb: "1px",
|
|
forButton: false
|
|
};
|
|
|
|
export default ALink;
|