mirror of
https://github.com/c8r/x0.git
synced 2024-10-05 17:47:32 +03:00
Add new demo movie
This commit is contained in:
parent
5f888b5996
commit
834d2a654f
@ -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
|
||||
|
||||
|
31
demo/count.js
Normal file
31
demo/count.js
Normal file
@ -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 })
|
@ -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 {
|
||||
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 })
|
||||
export default props =>
|
||||
<Box
|
||||
px={4}
|
||||
pt={0}
|
||||
pb={7}
|
||||
color='white'
|
||||
bg='black'>
|
||||
<Logo
|
||||
horizontal
|
||||
size={256}
|
||||
color='cyan'
|
||||
backgroundColor='black'
|
||||
/>
|
||||
<Heading
|
||||
is='h1'
|
||||
px={4}
|
||||
ml={2}
|
||||
fontSize={7}>
|
||||
<Text is='span' color='cyan'>Hello</Text> x0
|
||||
</Heading>
|
||||
</Box>
|
||||
|
BIN
docs/demo.gif
BIN
docs/demo.gif
Binary file not shown.
Before Width: | Height: | Size: 977 KiB |
BIN
docs/demo.mp4
BIN
docs/demo.mp4
Binary file not shown.
BIN
docs/hello-x0.gif
Normal file
BIN
docs/hello-x0.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.1 MiB |
BIN
docs/hello-x0.mp4
Normal file
BIN
docs/hello-x0.mp4
Normal file
Binary file not shown.
@ -39,8 +39,8 @@ export default class extends React.Component {
|
||||
loop
|
||||
muted
|
||||
playsInline
|
||||
poster='demo.gif'
|
||||
src='demo.mp4'
|
||||
poster='hello-x0.gif'
|
||||
src='hello-x0.mp4'
|
||||
/>
|
||||
</Box>
|
||||
<Pre>npm i -g @compositor/x0</Pre>
|
||||
|
Loading…
Reference in New Issue
Block a user