kopia lustrzana https://github.com/badgen/badgen.net
63 wiersze
1.7 KiB
TypeScript
63 wiersze
1.7 KiB
TypeScript
import React from 'react'
|
|
import Preview from '../components/builder-preview'
|
|
import Bar from '../components/builder-bar'
|
|
import Hints from '../components/builder-hints'
|
|
import Helper from '../components/builder-helper'
|
|
import Footer from '../components/footer'
|
|
|
|
export default class BuilderPage extends React.Component {
|
|
state = {
|
|
host: undefined,
|
|
badgeURL: '',
|
|
placeholder: '',
|
|
focus: false
|
|
}
|
|
|
|
handleBlur = () => this.setState({ focus: false })
|
|
|
|
handleFocus = () => this.setState({ focus: true })
|
|
|
|
handleChange = badgeURL => this.setState({ badgeURL })
|
|
|
|
handleSelect = exampleURL => this.setState({ badgeURL: exampleURL })
|
|
|
|
componentDidMount () {
|
|
const forceHost = new URL(window.location.href).searchParams.get('host')
|
|
this.setState({
|
|
host: (forceHost || window.location.origin) + '/',
|
|
badgeURL: window.location.hash.replace(/^#/, ''),
|
|
placeholder: 'badge/:subject/:status/:color?icon=github'
|
|
})
|
|
}
|
|
|
|
render () {
|
|
const { host, placeholder, badgeURL, focus } = this.state
|
|
|
|
return (
|
|
<div className='home'>
|
|
<div className='hero'>
|
|
<Preview host={host} badgeURL={badgeURL} focus={focus} />
|
|
<Bar
|
|
host={host}
|
|
badgeURL={badgeURL}
|
|
placeholder={placeholder}
|
|
onChange={this.handleChange}
|
|
onBlur={this.handleBlur}
|
|
onFocus={this.handleFocus}
|
|
/>
|
|
<Hints focus={focus} badgeURL={badgeURL} />
|
|
{badgeURL && <Helper host={host} badgeURL={badgeURL} onSelect={this.handleSelect} />}
|
|
</div>
|
|
<Footer />
|
|
<style jsx>{`
|
|
.hero {
|
|
min-height: 100vh;
|
|
position: relative;
|
|
}
|
|
`}
|
|
</style>
|
|
</div>
|
|
)
|
|
}
|
|
}
|