diligent-next-ts/components/forms/contact/ContactForm.tsx

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 { BASE_PAGE } from '../../../constants/pages';
import { contactSchema } from '../../../schemas/contactSchema';

interface FormValues {
  firstName: string;
  lastName: string;
  email: string;
  message: string;
}

const ContactForm = () => {
  const { t } = useTranslation(['forms', 'contact', 'common']);

  const handleSubmit = (values: FormValues) => {
    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;