Add new demo movie

README.md

@@ -12,7 +12,7 @@ npm install -g @compositor/x0
 [build-badge]: https://img.shields.io/travis/c8r/x0/master.svg?style=flat-square
 [build]: https://travis-ci.org/c8r/x0
 
-<img src='docs/demo.gif' class='demo-image' />
+<img src='docs/hello-x0.gif' class='demo-image' />
 
 ## Features
 

demo/count.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+
+export default class extends React.Component {
+  static getInitialProps = async () => {
+    return {
+      asyncProps: 'hello'
+    }
+  }
+
+  render () {
+    const {
+      count,
+      update
+    } = this.props
+
+    return (
+      <div>
+        <Link to='/'>Home</Link>
+        <Link to='/about'>About</Link>
+        <h1>Hello x0</h1>
+        <samp>{count}</samp>
+        <button onClick={e => update(dec)}>-</button>
+        <button onClick={e => update(inc)}>+</button>
+      </div>
+    )
+  }
+}
+
+const dec = s => ({ count: s.count - 1 })
+const inc = s => ({ count: s.count + 1 })

demo/index.js

@@ -1,31 +1,25 @@
 import React from 'react'
-import { Link } from 'react-router-dom'
+import { Logo } from '@compositor/logo'
+import { Box, Text, Heading } from 'rebass'
 
-export default class extends React.Component {
+export default props =>
-  static getInitialProps = async () => {
+  <Box
-    return {
+    px={4}
-      asyncProps: 'hello'
+    pt={0}
-    }
+    pb={7}
-  }
+    color='white'
-
+    bg='black'>
-  render () {
+    <Logo
-    const {
+      horizontal
-      count,
+      size={256}
-      update
+      color='cyan'
-    } = this.props
+      backgroundColor='black'
-
+    />
-    return (
+    <Heading
-      <div>
+      is='h1'
-        <Link to='/'>Home</Link>
+      px={4}
-        <Link to='/about'>About</Link>
+      ml={2}
-        <h1>Hello x0</h1>
+      fontSize={7}>
-        <samp>{count}</samp>
+      <Text is='span' color='cyan'>Hello</Text> x0
-        <button onClick={e => update(dec)}>-</button>
+    </Heading>
-        <button onClick={e => update(inc)}>+</button>
+  </Box>
-      </div>
-    )
-  }
-}
-
-const dec = s => ({ count: s.count - 1 })
-const inc = s => ({ count: s.count + 1 })

docs/index.js

@@ -39,8 +39,8 @@ export default class extends React.Component {
               loop
               muted
               playsInline
-              poster='demo.gif'
+              poster='hello-x0.gif'
-              src='demo.mp4'
+              src='hello-x0.mp4'
             />
           </Box>
           <Pre>npm i -g @compositor/x0</Pre>