Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | 1x 1x 4x 4x 1x 4x 1x 1x | import React from 'react' import PropTypes from 'prop-types' import styled from 'styled-components' const Wrapper = styled.div` position: relative; flex: 1 auto; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 15px; box-sizing: border-box; cursor: pointer; &:hover { & :last-child { opacity: 1 !important; } } ` const Bar = styled.div` position: absolute; bottom: -2px; left: 0; width: 100%; height: 5px; transition-duration: 0.3s; transition-timing-function: ease-in-out; background-color: ${(props) => props.theme['tabMenuBarColor']}; opacity: ${(props) => (props.visible ? '1' : '0')}; ` const TabMenuItem = ({ children, selected, ...rest }) => ( <Wrapper {...rest}> {children} <Bar visible={selected} /> </Wrapper> ) TabMenuItem.propTypes = { children: PropTypes.node, selected: PropTypes.bool, } TabMenuItem.defaultProps = { selected: false, } export default TabMenuItem |