1
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-06-30 22:26:38 -04:00

add react-textarea-autosize to contact form

This commit is contained in:
2022-02-11 09:25:25 -05:00
parent 9aaf1ef1e7
commit 93356e9472
5 changed files with 140 additions and 92 deletions

View File

@ -1,4 +1,5 @@
import { memo } from "react";
import Head from "next/head";
import { useTheme } from "next-themes";
import HCaptcha from "@hcaptcha/react-hcaptcha";
@ -23,15 +24,22 @@ const Captcha = ({ size = "normal", theme, id, ...rest }: CaptchaProps) => {
const { resolvedTheme } = useTheme();
return (
<HCaptcha
sitekey={process.env.NEXT_PUBLIC_HCAPTCHA_SITE_KEY}
reCaptchaCompat={false}
tabIndex={0}
size={size}
theme={theme || (resolvedTheme === "dark" ? "dark" : "light")}
id={id}
{...rest}
/>
<>
<Head>
<link rel="preconnect" href="https://js.hcaptcha.com" />
<link rel="preconnect" href="https://newassets.hcaptcha.com" />
</Head>
<HCaptcha
sitekey={process.env.NEXT_PUBLIC_HCAPTCHA_SITE_KEY}
reCaptchaCompat={false}
tabIndex={0}
size={size}
theme={theme || (resolvedTheme === "dark" ? "dark" : "light")}
id={id}
{...rest}
/>
</>
);
};

View File

@ -22,8 +22,6 @@
}
.textarea {
height: 12em;
min-height: 6em;
margin-bottom: 0;
line-height: 1.5;
resize: vertical;
@ -34,7 +32,7 @@
line-height: 1.75;
}
.hcaptcha {
.captcha {
margin: 1em 0;
}

View File

@ -1,6 +1,7 @@
import { useState } from "react";
import classNames from "classnames/bind";
import { Formik, Form, Field } from "formik";
import TextareaAutosize from "react-textarea-autosize";
import Link from "../Link/Link";
import Captcha from "../Captcha/Captcha";
import { SendIcon, CheckOcticon, XOcticon } from "../Icons";
@ -96,30 +97,44 @@ const ContactForm = ({ className }: ContactFormProps) => {
return errors;
}}
>
{({ setFieldValue, isSubmitting, touched, errors }) => (
{({ setFieldValue, isSubmitting }) => (
<Form className={className} name="contact">
<Field
className={cx({ input: true, missing: errors.name && touched.name })}
name="name"
type="text"
placeholder="Name"
disabled={success}
/>
<Field
className={cx({ input: true, missing: errors.email && touched.email })}
name="email"
type="email"
inputMode="email"
placeholder="Email"
disabled={success}
/>
<Field
className={cx({ input: true, textarea: true, missing: errors.message && touched.message })}
name="message"
component="textarea"
placeholder="Write something..."
disabled={success}
/>
<Field name="name">
{({ field, meta }) => (
<input
type="text"
className={cx({ input: true, missing: meta.error && meta.touched })}
placeholder="Name"
disabled={success}
{...field}
/>
)}
</Field>
<Field name="email">
{({ field, meta }) => (
<input
type="email"
inputMode="email"
className={cx({ input: true, missing: meta.error && meta.touched })}
placeholder="Email"
disabled={success}
{...field}
/>
)}
</Field>
<Field name="message">
{({ field, meta }) => (
<TextareaAutosize
className={cx({ input: true, textarea: true, missing: meta.error && meta.touched })}
placeholder="Write something..."
minRows={5}
disabled={success}
{...field}
/>
)}
</Field>
<div className={styles.markdown_tip}>
Basic{" "}
@ -133,7 +148,7 @@ const ContactForm = ({ className }: ContactFormProps) => {
](https://jarv.is), and <code>`code`</code>.
</div>
<div className={styles.hcaptcha}>
<div className={styles.captcha}>
<Captcha onVerify={(token) => setFieldValue("h-captcha-response", token)} />
</div>