feat: ✨ display project in iframe if it has url

Author: kitos

package-lock.json

@@ -28,6 +28,7 @@
     "react": "^16.7.0-alpha.2",
     "react-dom": "^16.7.0-alpha.2",
     "react-helmet": "^5.2.0",
+    "react-spring": "^7.2.1",
     "react-typography": "^0.16.18",
     "styled-components": "^4.1.3",
     "typography": "^0.16.18",

package.json

@@ -0,0 +1,42 @@
+import React from 'react'
+import styled from 'styled-components/macro'
+import { Transition } from 'react-spring'
+
+let Container = styled.div`
+  position: fixed;
+  top: 0;
+  right: 0;
+  height: 100%;
+  width: 60%;
+  background: #fff;
+
+  will-change: transform;
+`
+
+let Overlay = styled(Container)`
+  width: 100%;
+  background: #141a28a8;
+`
+
+let Drawer = ({ open, children, onOuterClick }) => (
+  <Transition
+    items={open}
+    from={{ transform: 'translateX(100%)', opacity: 0 }}
+    enter={{ transform: 'translateX(0)', opacity: 1 }}
+    leave={{ transform: 'translateX(100%)', opacity: 0 }}
+  >
+    {animatedOpen =>
+      animatedOpen &&
+      (({ transform, opacity }) => (
+        <Overlay style={{ opacity }} onClick={onOuterClick}>
+          <Container style={{ transform }} onClick={e => e.stopPropagation()}>
+            {children}
+          </Container>
+        </Overlay>
+      ))
+    }
+  </Transition>
+)
+
+export { Drawer }
+export default Drawer