parent
7e11780f1c
commit
8f25dce7cb
@ -0,0 +1,185 @@
|
|||||||
|
import { useState, forwardRef } from 'react'
|
||||||
|
import { useFormContext } from 'react-hook-form'
|
||||||
|
import TextareaAutosize from 'react-textarea-autosize'
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Flex,
|
||||||
|
Stack,
|
||||||
|
Box,
|
||||||
|
Text,
|
||||||
|
Input,
|
||||||
|
FormControl,
|
||||||
|
FormErrorMessage,
|
||||||
|
InputProps,
|
||||||
|
Textarea,
|
||||||
|
} from '@chakra-ui/react'
|
||||||
|
|
||||||
|
const CustomInput = forwardRef<HTMLInputElement, InputProps>(
|
||||||
|
({ name, ...props }, ref) => {
|
||||||
|
return (
|
||||||
|
<Input
|
||||||
|
name={name}
|
||||||
|
type="text"
|
||||||
|
variant="flushed"
|
||||||
|
borderColor="gray"
|
||||||
|
borderBottomWidth="1px"
|
||||||
|
focusBorderColor="primary"
|
||||||
|
ref={ref}
|
||||||
|
_disabled={{ color: 'gray' }}
|
||||||
|
_autofill={{ background: 'none' }}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
)
|
||||||
|
|
||||||
|
CustomInput.displayName = 'CustomInput'
|
||||||
|
|
||||||
|
type FormFields = {
|
||||||
|
name: string
|
||||||
|
email: string
|
||||||
|
message: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const sendMessage = async () => {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
alert('¡Este formulario no es real!')
|
||||||
|
resolve(true)
|
||||||
|
}, 1500)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const ContactForm: React.FC = () => {
|
||||||
|
const [sending, setSending] = useState(false)
|
||||||
|
const [error, setError] = useState(false)
|
||||||
|
|
||||||
|
const { formState, register, handleSubmit, errors, reset } = useFormContext()
|
||||||
|
const { isSubmitSuccessful } = formState
|
||||||
|
|
||||||
|
const onSubmit = async (/* data: FormFields */) => {
|
||||||
|
setSending(true)
|
||||||
|
setError(false)
|
||||||
|
|
||||||
|
sendMessage()
|
||||||
|
.then(() => {
|
||||||
|
setSending(false)
|
||||||
|
setError(false)
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
setSending(false)
|
||||||
|
setError(true)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const buttonText = (() => {
|
||||||
|
if (sending) {
|
||||||
|
return 'Enviando'
|
||||||
|
}
|
||||||
|
if (isSubmitSuccessful) {
|
||||||
|
return '¡Enviado!'
|
||||||
|
}
|
||||||
|
return 'Enviar'
|
||||||
|
})()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box w="100%">
|
||||||
|
<Stack
|
||||||
|
as="form"
|
||||||
|
onSubmit={handleSubmit(onSubmit)}
|
||||||
|
flexDir="column"
|
||||||
|
flexWrap="nowrap"
|
||||||
|
w="480px"
|
||||||
|
maxW="calc(100% - 4rem)"
|
||||||
|
m="2rem auto"
|
||||||
|
spacing="3rem"
|
||||||
|
>
|
||||||
|
<FormControl id="name" isInvalid={errors.name}>
|
||||||
|
<CustomInput
|
||||||
|
name="name"
|
||||||
|
placeholder="Nombre"
|
||||||
|
aria-label="Nombre"
|
||||||
|
disabled={isSubmitSuccessful}
|
||||||
|
ref={register({ required: true })}
|
||||||
|
/>
|
||||||
|
<FormErrorMessage>Este campo es obligatorio</FormErrorMessage>
|
||||||
|
</FormControl>
|
||||||
|
|
||||||
|
<FormControl id="email" isInvalid={errors.email}>
|
||||||
|
<CustomInput
|
||||||
|
name="email"
|
||||||
|
placeholder="e-mail"
|
||||||
|
aria-label="e-mail"
|
||||||
|
disabled={isSubmitSuccessful}
|
||||||
|
ref={register({
|
||||||
|
required: true,
|
||||||
|
pattern: /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/,
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
<FormErrorMessage>
|
||||||
|
{errors.email
|
||||||
|
? errors.email.type === 'required'
|
||||||
|
? 'Este campo es obligatorio'
|
||||||
|
: null || errors.email.type === 'pattern'
|
||||||
|
? 'La dirección de correo electrónico no es válida'
|
||||||
|
: null
|
||||||
|
: null}
|
||||||
|
</FormErrorMessage>
|
||||||
|
</FormControl>
|
||||||
|
|
||||||
|
<FormControl id="message" isInvalid={errors.message}>
|
||||||
|
<Textarea
|
||||||
|
as={TextareaAutosize}
|
||||||
|
minRows={1}
|
||||||
|
borderBottomWidth="1px"
|
||||||
|
name="message"
|
||||||
|
aria-label="mensaje"
|
||||||
|
placeholder="Mensaje"
|
||||||
|
resize="none"
|
||||||
|
minH={0}
|
||||||
|
variant="flushed"
|
||||||
|
borderColor="gray"
|
||||||
|
focusBorderColor="primary"
|
||||||
|
overflow="hidden"
|
||||||
|
disabled={isSubmitSuccessful}
|
||||||
|
ref={register({ required: true })}
|
||||||
|
_disabled={{ color: 'gray' }}
|
||||||
|
/>
|
||||||
|
<FormErrorMessage>Este campo es obligatorio</FormErrorMessage>
|
||||||
|
</FormControl>
|
||||||
|
|
||||||
|
<Flex>
|
||||||
|
<Input
|
||||||
|
type="submit"
|
||||||
|
disabled={sending || isSubmitSuccessful}
|
||||||
|
opacity="1 !important"
|
||||||
|
value={buttonText}
|
||||||
|
bg={sending ? 'lightGray' : isSubmitSuccessful ? 'green' : 'blue'}
|
||||||
|
borderRadius="primary"
|
||||||
|
color={sending ? 'gray' : 'white'}
|
||||||
|
cursor={!sending || !isSubmitSuccessful ? 'pointer' : 'default'}
|
||||||
|
fontWeight="bold"
|
||||||
|
border="none"
|
||||||
|
outline="none"
|
||||||
|
py="1em"
|
||||||
|
fontSize="xl"
|
||||||
|
h="auto"
|
||||||
|
w="100%"
|
||||||
|
/>
|
||||||
|
</Flex>
|
||||||
|
{error ? (
|
||||||
|
<Text color="red.500">
|
||||||
|
Ocurrió un error. Por favor, intentalo nuevamente más tarde.
|
||||||
|
</Text>
|
||||||
|
) : null}
|
||||||
|
{isSubmitSuccessful ? (
|
||||||
|
<Button variant="link" onClick={() => reset()}>
|
||||||
|
Enviar un nuevo mensaje
|
||||||
|
</Button>
|
||||||
|
) : null}
|
||||||
|
</Stack>
|
||||||
|
</Box>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ContactForm
|
||||||
@ -0,0 +1,40 @@
|
|||||||
|
import { Heading, Text, Box, Flex } from '@chakra-ui/react'
|
||||||
|
|
||||||
|
import ReactMarkdown from 'react-markdown'
|
||||||
|
import SEO from '../components/SEO'
|
||||||
|
import Form from '../components/Form'
|
||||||
|
|
||||||
|
const Contact: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<SEO title="Contact" />
|
||||||
|
<Box w={['100%', '100%', '1220px']} pt="2rem" px="1rem" mx="auto">
|
||||||
|
<Flex wrap="wrap">
|
||||||
|
<Box w="50%" pr="3rem">
|
||||||
|
<Heading fontSize={['3xl', '3xl', '7xl']} mb="3rem">
|
||||||
|
¡Trabajemos juntes!
|
||||||
|
</Heading>
|
||||||
|
</Box>
|
||||||
|
<Box w="50%" pt="6rem">
|
||||||
|
<Text
|
||||||
|
as={ReactMarkdown}
|
||||||
|
fontWeight="300"
|
||||||
|
lineHeight="1.9"
|
||||||
|
pb="2rem"
|
||||||
|
sx={{ p: { display: 'block', pb: '2rem' } }}
|
||||||
|
>
|
||||||
|
Mandanos un mensaje y encaremos ese proyecto que tenés en mente :D
|
||||||
|
</Text>
|
||||||
|
<Form />
|
||||||
|
</Box>
|
||||||
|
</Flex>
|
||||||
|
</Box>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Contact
|
||||||
|
|
||||||
|
export async function getStaticProps() {
|
||||||
|
return { props: {} }
|
||||||
|
}
|
||||||
Loading…
Reference in new issue