From 46a0ba30ef54a7e36206481a4f5b2bf1f9702fca Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Mon, 12 Mar 2018 14:06:25 -0400
Subject: wip

---
 frontend/components/CartCount.js | 52 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 frontend/components/CartCount.js

(limited to 'frontend/components/CartCount.js')

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;
-- 
cgit v1.3