mirror of
https://github.com/System-End/site.git
synced 2026-04-19 20:55:09 +00:00
61 lines
1.1 KiB
JavaScript
61 lines
1.1 KiB
JavaScript
import { Button } from 'theme-ui'
|
|
import theme from '../lib/theme'
|
|
|
|
const bg = {
|
|
default: {
|
|
bg: 'blue',
|
|
backgroundImage: theme.util.gx('cyan', 'blue')
|
|
},
|
|
submitting: {
|
|
bg: 'blue',
|
|
backgroundImage: theme.util.gx('cyan', 'blue')
|
|
},
|
|
success: {
|
|
bg: 'green',
|
|
backgroundImage: theme.util.gx('yellow', 'green')
|
|
},
|
|
error: {
|
|
bg: 'orange',
|
|
backgroundImage: theme.util.gx('orange', 'red'),
|
|
boxShadow: `0 0 0 1px ${theme.colors.white}, 0 0 0 4px ${theme.colors.primary}`
|
|
}
|
|
}
|
|
|
|
const submitting = {
|
|
...bg.default,
|
|
opacity: 0.5,
|
|
pointerEvents: 'none',
|
|
cursor: 'not-allowed'
|
|
}
|
|
|
|
const Submit = ({
|
|
status,
|
|
labels = {
|
|
default: 'Submit',
|
|
error: 'Error!',
|
|
success: 'Check your email!'
|
|
},
|
|
width = '100%',
|
|
sx,
|
|
...props
|
|
}) => (
|
|
<Button
|
|
as="button"
|
|
type={'submit' || props.type}
|
|
sx={{
|
|
py: 2,
|
|
px: 3,
|
|
mt: 3,
|
|
fontSize: 2,
|
|
width,
|
|
...(status === 'submitting' ? submitting : bg[status]),
|
|
...sx
|
|
}}
|
|
disabled={status === 'submitting'}
|
|
{...props}
|
|
>
|
|
{status === 'submitting' ? 'Submitting…' : labels[status]}
|
|
</Button>
|
|
)
|
|
|
|
export default Submit
|