64 lines
2.3 KiB
TypeScript
64 lines
2.3 KiB
TypeScript
import { openPage } from '@nanostores/router'
|
|
import { clsx } from 'clsx'
|
|
|
|
import { useLocalize } from '../../context/localize'
|
|
import { router } from '../../stores/router'
|
|
import { Icon } from '../_shared/Icon'
|
|
|
|
import styles from '../../styles/FourOuFour.module.scss'
|
|
|
|
export const FourOuFourView = (_props) => {
|
|
let queryInput: HTMLInputElement
|
|
const search = (_ev) => {
|
|
openPage(router, 'search', { q: queryInput.value })
|
|
}
|
|
const { t } = useLocalize()
|
|
return (
|
|
<div class={styles.errorPageWrapper}>
|
|
<div class={styles.errorPage}>
|
|
<div class="wide-container">
|
|
<div class="row">
|
|
<div class="col-md-14 offset-md-6 col-lg-12">
|
|
<a href="/" class="image-link">
|
|
<img class={styles.errorImage} src="/error.svg" alt="error" width="auto" height="auto" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class={clsx(styles.errorTextContainer, 'col-md-4 col-sm-6 offset-sm-2 offset-md-4')}>
|
|
<div class={styles.errorText}>
|
|
<div>{t('Error')}</div>
|
|
<div class={styles.big}>404</div>
|
|
</div>
|
|
</div>
|
|
<div class={clsx(styles.searchFormContainer, 'col-sm-10 col-md-8 col-lg-6')}>
|
|
<div class={styles.errorExplain}>
|
|
<p>{t(`You've reached a non-existed page`)}</p>
|
|
<p>{t('Try to find another way')}:</p>
|
|
<form class={clsx(styles.prettyForm, 'pretty-form')} method="get" onSubmit={search}>
|
|
<div class={clsx(styles.prettyFormItem, 'pretty-form__item')}>
|
|
<input
|
|
type="text"
|
|
name="q"
|
|
placeholder={t('Search')}
|
|
id="search-field"
|
|
ref={queryInput}
|
|
/>
|
|
<label for="search-field">{t('Search')}</label>
|
|
<button type="submit" class={styles.searchSubmit}>
|
|
<Icon name="search" />
|
|
</button>
|
|
</div>
|
|
</form>
|
|
<p class={styles.textCenter}>
|
|
<a href="/">{t('Back to main page')}</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|