import styled from 'styled-components' // lib import * as styles from 'lib/styles/styles' import palette from 'lib/styles/palette' const NavItem = ({ message, onClick }: Props) => { return ( {message} ); } const Content = styled.button` width: 100%; height: 48px; box-sizing: border-box; padding: 12px 24px; display: flex; align-items: center; cursor: pointer; background-color: ${palette.gray0}; outline: none; & > span { transition: .2s ${styles.transition}; font-size: 14px; } &:focus, &:hover { & > span { color: ${palette.blue3}; margin-left: 12px; } } `; interface Props { message: string; onClick: () => void; } export default NavItem