diff options
Diffstat (limited to 'frontend/components/CartCount.js')
| -rw-r--r-- | frontend/components/CartCount.js | 64 |
1 files changed, 0 insertions, 64 deletions
diff --git a/frontend/components/CartCount.js b/frontend/components/CartCount.js deleted file mode 100644 index ae51f20..0000000 --- a/frontend/components/CartCount.js +++ /dev/null @@ -1,64 +0,0 @@ -import styled from 'styled-components'; -import { TransitionGroup, CSSTransition } from 'react-transition-group'; -import PropTypes from 'prop-types'; - -const Dot = styled.div` - background: ${props => props.theme.red}; - color: white; - border-radius: 50%; - padding: 0.5rem; - line-height: 2rem; - min-width: 3rem; - margin-left: 1rem; - font-weight: 100; - font-feature-settings: 'tnum'; - font-variant-numeric: tabular-nums; -`; - -const AnimationStyles = styled.span` - position: relative; - .count { - display: block; - position: relative; - transition: all 0.4s; - backface-visibility: hidden; - } - .count-enter { - transform: rotateX(0.5turn); - } - - .count-enter-active { - transform: rotateX(0); - } - - .count-exit { - top: 0; - position: absolute; - transform: rotateX(0); - } - - .count-exit-active { - transform: rotateX(0.5turn); - } -`; - -const CartCount = ({ count }) => ( - <AnimationStyles> - <TransitionGroup> - <CSSTransition - unmountOnExit - className="count" - classNames="count" - key={count} - timeout={{ enter: 400, exit: 400 }} - > - <Dot>{count}</Dot> - </CSSTransition> - </TransitionGroup> - </AnimationStyles> -); - -CartCount.propTypes = { - count: PropTypes.number.isRequired, -}; -export default CartCount; |
