import styled from 'styled-components' import Link from 'next/link'; interface ActivePropType { active?: false | true; } export const NavBar = styled.nav` display: flex; flex: 1; padding: 2rem 0; border-bottom: 1px solid ${({ theme }) => theme.colors.primary}; flex-wrap: nowrap; justify-content: center; align-items: center; ` export const NavLink = styled(Link)` color: ${props => props.active ? ({ theme }) => theme.colors.secondary : ({ theme }) => theme.colors.primary}; margin: 0.2rem; border: 1px solid; padding: 0.2rem 0.5rem; display: flex; justify-content: center; align-items: center; &:hover { color: ${({ theme }) => theme.colors.secondary}; } `