diligent-next/components/forms/contact/ContactForm.jsx

import {
    Box,
    Button,
    Container,
    Grid,
    TextField,
    Typography
} from '@mui/material';
import { useFormik } from 'formik';
import { useTranslation } from 'next-i18next';
import Link from 'next/link';
import React from 'react';
import { BASE_PAGE } from '../../../constants/pages';
import { contactSchema } from '../../../schemas/contactSchema';
  
  const ContactForm = () => {
    const { t } = useTranslation('forms', 'contact', 'common');
  
    const handleSubmit = (values) => {
      console.log('Values', values);
    };
  
    const formik = useFormik({
      initialValues: {
        firstName: '',
        lastName: '',
        email: '',
        message: ''
      },
      validationSchema: contactSchema,
      onSubmit: handleSubmit,
      validateOnBlur: true,
      enableReinitialize: true,
    });
  
    return (
      <Container component="main" maxWidth="md">
        <Box
          sx={{
            marginTop: 32,
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
          }}
        >
          <Typography component="h1" variant="h5">
            {t('contact:Title')}
          </Typography>
          <Box
            component="form"
            onSubmit={formik.handleSubmit}
            sx={{ position: 'relative', mt: 1, p: 1 }}
          >
            <TextField
              name="firstName"
              label={t('forms:FirstName')}
              margin="normal"
              value={formik.values.firstName}
              onChange={formik.handleChange}
              error={formik.touched.firstName && Boolean(formik.errors.firstName)}
              helperText={formik.touched.firstName && formik.errors.firstName}
              autoFocus
              fullWidth
            />
            <TextField
              name="lastName"
              label={t('forms:LastName')}
              margin="normal"
              value={formik.values.lastName}
              onChange={formik.handleChange}
              error={formik.touched.lastName && Boolean(formik.errors.lastName)}
              helperText={formik.touched.lastName && formik.errors.lastName}
              autoFocus
              fullWidth
            />
            <TextField
            name="email"
            label={t('forms:Email')}
            margin="normal"
            value={formik.values.email}
            onChange={formik.handleChange}
            error={formik.touched.email && Boolean(formik.errors.email)}
            helperText={formik.touched.email && formik.errors.email}
            autoFocus
            fullWidth
          />
          <TextField
          name="message"
          label={t('forms:Message')}
          multiline
          margin="normal"
          value={formik.values.message}
          onChange={formik.handleChange}
          error={formik.touched.message && Boolean(formik.errors.message)}
          helperText={formik.touched.message && formik.errors.message}
          rows={4}
          autoFocus
          fullWidth
        />
            <Button
              type="submit"
              variant="contained"
              sx={{ mt: 3, mb: 2 }}
              fullWidth
            >
              {t('contact:SendBtn')}
            </Button>
            <Grid container justifyContent="center">
              <Link href={BASE_PAGE}>{t('common:Back')}</Link>
            </Grid>
          </Box>
        </Box>
      </Container>
    );
  };
  
  export default ContactForm;