You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

43 lines
777 B

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 (
<Content onClick={onClick}>
<span>{message}</span>
</Content>
);
}
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