wip

1 files changed, 52 insertions, 0 deletions

diff --git a/frontend/components/CartCount.js b/frontend/components/CartCount.js
new file mode 100644
index 0000000..245b07b
--- /dev/null
+++ b/frontend/components/CartCount.js
@@ -0,0 +1,52 @@
+import styled from 'styled-components';
+import { TransitionGroup, CSSTransition } from 'react-transition-group';
+
+const Dot = styled.div`
+  background: ${props => props.theme.red};
+  color: white;
+  border-radius: 50%;
+  padding: 5px;
+  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 className="count" classNames="count" key={count} timeout={{ enter: 2000, exit: 2000 }}>
+        <Dot>{count}</Dot>
+      </CSSTransition>
+    </TransitionGroup>
+  </AnimationStyles>
+);
+
+export default CartCount;