starter files

1 files changed, 64 insertions, 0 deletions

diff --git a/finished-application/frontend/components/CartCount.js b/finished-application/frontend/components/CartCount.js
new file mode 100644
index 0000000..ae51f20
--- /dev/null
+++ b/finished-application/frontend/components/CartCount.js
@@ -0,0 +1,64 @@
+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;