67 lines
1.6 KiB
JavaScript
67 lines
1.6 KiB
JavaScript
import React, { useState } from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { staticBadgeUrl } from '../../core/badge-urls/make-badge-url'
|
|
import { InlineInput } from './common'
|
|
|
|
export default function StaticBadgeMaker({ baseUrl = document.location.href }) {
|
|
const [values, setValues] = useState({
|
|
label: '',
|
|
message: '',
|
|
color: '',
|
|
})
|
|
|
|
const isValid = ['message', 'color'].every(k => values[k])
|
|
|
|
const onChange = ({ target: { name, value } }) => {
|
|
setValues({
|
|
...values,
|
|
[name]: value,
|
|
})
|
|
}
|
|
|
|
const onSubmit = e => {
|
|
e.preventDefault()
|
|
|
|
const { label, message, color } = values
|
|
document.location = staticBadgeUrl({ baseUrl, label, message, color })
|
|
}
|
|
|
|
return (
|
|
<form onSubmit={onSubmit}>
|
|
<InlineInput
|
|
name="label"
|
|
onChange={onChange}
|
|
placeholder="label"
|
|
value={values.label}
|
|
/>
|
|
<InlineInput
|
|
name="message"
|
|
onChange={onChange}
|
|
placeholder="message"
|
|
value={values.message}
|
|
/>
|
|
<InlineInput
|
|
list="default-colors"
|
|
name="color"
|
|
onChange={onChange}
|
|
placeholder="color"
|
|
value={values.color}
|
|
/>
|
|
<datalist id="default-colors">
|
|
<option value="brightgreen" />
|
|
<option value="green" />
|
|
<option value="yellowgreen" />
|
|
<option value="yellow" />
|
|
<option value="orange" />
|
|
<option value="red" />
|
|
<option value="lightgrey" />
|
|
<option value="blue" />
|
|
</datalist>
|
|
<button disabled={!isValid}>Make Badge</button>
|
|
</form>
|
|
)
|
|
}
|
|
StaticBadgeMaker.propTypes = {
|
|
baseUrl: PropTypes.string,
|
|
}
|