82 lines
2.6 KiB
TypeScript
Executable File
82 lines
2.6 KiB
TypeScript
Executable File
import {Trans} from '../i18n/trans';
|
|
import {Navbar} from '../ui/navigation/navbar/navbar';
|
|
import {Form} from '../ui/forms/form';
|
|
import {useForm} from 'react-hook-form';
|
|
import {
|
|
ContactPagePayload,
|
|
useSubmitContactForm,
|
|
} from './use-submit-contact-form';
|
|
import {FormTextField} from '../ui/forms/input-field/text-field/text-field';
|
|
import {Button} from '../ui/buttons/button';
|
|
import {useRecaptcha} from '../recaptcha/use-recaptcha';
|
|
import {StaticPageTitle} from '../seo/static-page-title';
|
|
import {Footer} from '@common/ui/footer/footer';
|
|
|
|
export function ContactUsPage() {
|
|
const form = useForm<ContactPagePayload>();
|
|
const submitForm = useSubmitContactForm(form);
|
|
const {verify, isVerifying} = useRecaptcha('contact');
|
|
|
|
return (
|
|
<div className="flex flex-col bg-alt min-h-screen">
|
|
<StaticPageTitle>
|
|
<Trans message="Contact us" />
|
|
</StaticPageTitle>
|
|
<Navbar
|
|
className="flex-shrink-0 sticky top-0"
|
|
menuPosition="contact-us-page"
|
|
/>
|
|
<div className="container p-24 md:p-40 mx-auto flex-auto flex items-center justify-center">
|
|
<div className="border rounded bg-paper p-24 max-w-620">
|
|
<h1 className="text-2xl">
|
|
<Trans message="Contact us" />
|
|
</h1>
|
|
<p className="text-sm mt-4 mb-30">
|
|
<Trans message="Please use the form below to send us a message and we'll get back to you as soon as possible." />
|
|
</p>
|
|
<Form
|
|
form={form}
|
|
onSubmit={async value => {
|
|
const isValid = await verify();
|
|
if (isValid) {
|
|
submitForm.mutate(value);
|
|
}
|
|
}}
|
|
>
|
|
<FormTextField
|
|
label={<Trans message="Name" />}
|
|
name="name"
|
|
required
|
|
className="mb-20"
|
|
/>
|
|
<FormTextField
|
|
label={<Trans message="Email" />}
|
|
name="email"
|
|
required
|
|
type="email"
|
|
className="mb-20"
|
|
/>
|
|
<FormTextField
|
|
label={<Trans message="Message" />}
|
|
name="message"
|
|
required
|
|
inputElementType="textarea"
|
|
className="mb-20"
|
|
rows={8}
|
|
/>
|
|
<Button
|
|
type="submit"
|
|
variant="flat"
|
|
color="primary"
|
|
disabled={submitForm.isPending || isVerifying}
|
|
>
|
|
<Trans message="Send" />
|
|
</Button>
|
|
</Form>
|
|
</div>
|
|
</div>
|
|
<Footer className="container mx-auto px-24 flex-shrink-0" />
|
|
</div>
|
|
);
|
|
}
|