border.jsx

import styled from 'styled-components';

const isCurrent = (current, key) => current.group === key[0] && current.attr === key[1] ? true : false;

const hoverColor = '#9c9c9c';
const activeColor = '#00bbff';
const pressColor= '#6c6c6c';

export const BorderWrap = styled.div`
  position: relative;
`;

export const Border = styled.div`
  position: absolute;
  width: ${props => props.width ? props.width : '100%'};
  height: ${props => props.height ? props.height : '100%'};
  top: ${props => props.top ? props.top : 0}; : 0};
  left: ${props => props.left ? props.left : 0};
  border: ${props => isCurrent(props.current, props.name) ? `2px solid ${activeColor}` : '2px solid transparent'};
  &:hover {
    border-color: ${hoverColor};
  }
  &:active {
    border-color: ${pressColor};
  }
`;