Aarni Halinen
37 lines
837 B
TypeScript
37 lines
837 B
TypeScript
import React from "react";
|
|
import styled from "styled-components";
|
|
import colors from "@theme/colors";
|
|
import breakpoints from "@theme/breakpoints";
|
|
import { Link } from "@components/index";
|
|
|
|
interface NavbarChildLinkProps {
|
|
to: string;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
const StyledLink = styled(Link)`
|
|
display: block;
|
|
padding: 1rem;
|
|
letter-spacing: 1.5px;
|
|
padding-right: 4rem;
|
|
font-weight: 400;
|
|
|
|
@media screen and (max-width: ${breakpoints.medium}) {
|
|
border-bottom: 1px dotted ${colors.lightBlue};
|
|
margin-left: 2rem;
|
|
padding-left: 0;
|
|
}
|
|
|
|
&:hover {
|
|
@media screen and (min-width: ${breakpoints.medium}) {
|
|
background-color: ${colors.lightBlue};
|
|
}
|
|
}
|
|
`;
|
|
|
|
const NavbarChildLink: React.FC<NavbarChildLinkProps> = (props) => (
|
|
<StyledLink passHref {...props} />
|
|
);
|
|
|
|
export default NavbarChildLink;
|