import React from 'react'; import Button from './Button'; import { FiPlus, FiMinus } from 'react-icons/fi'; import styled from 'styled-components'; const PlusButton = ({ ...rest }) => { return ( <StCounterButton btnType="circle" fontSize="1.7rem" {...rest}> <FiPlus strokeWidth="3px" /> </StCounterButton> ); }; const MinusButton = ({ ...rest }) => { return ( <StCounterButton btnType="circle" fontSize="1.7rem" {...rest}> <FiMinus strokeWidth="3px" /> </StCounterButton> ); }; const StCounterButton = styled(Button)` color: ${({ theme }) => theme.color.gray}; border: 1px solid ${({ theme }) => theme.color.gray}; &:hover { color: ${({ theme }) => theme.color.black}; border: 1px solid ${({ theme }) => theme.color.black}; } &:disabled { color: ${({ theme }) => theme.color.shadow}; border: 1px solid ${({ theme }) => theme.color.shadow}; } `; export { PlusButton, MinusButton };