42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
import { createSignal, Show } from 'solid-js'
|
|
import styles from './Subscribe.module.scss'
|
|
|
|
import { clsx } from 'clsx'
|
|
import { useLocalize } from '../../context/localize'
|
|
|
|
export default () => {
|
|
const { t } = useLocalize()
|
|
let emailElement: HTMLInputElement | undefined
|
|
const [title, setTitle] = createSignal('')
|
|
const subscribe = async () => {
|
|
setTitle(t('...subscribing'))
|
|
|
|
const requestOptions = {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
email: emailElement?.value
|
|
})
|
|
}
|
|
|
|
const r = await fetch('/api/newsletter', requestOptions)
|
|
setTitle(r.ok ? t('You are subscribed') : '')
|
|
}
|
|
|
|
return (
|
|
<div class={styles.subscribeForm}>
|
|
<Show when={!title()} fallback={title()}>
|
|
<input type="email" name="email" ref={emailElement} placeholder={t('Fill email')} />
|
|
<button
|
|
class={clsx(styles.button, 'button--light')}
|
|
onClick={() => emailElement?.value && subscribe()}
|
|
>
|
|
{t('Subscribe')}
|
|
</button>
|
|
</Show>
|
|
</div>
|
|
)
|
|
}
|