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:
@ -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}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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>
|
||||
|
||||
|
Reference in New Issue
Block a user