feat: add forms logic

src/widgets/footer-form/ui.tsx

@@ -3,26 +3,94 @@
 import s from './styles.module.scss';
 import { Button, Input, Mark, TextArea } from '@shared/ui';
 import toast from 'react-hot-toast';
+import { Controller, useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+
+const FormSchema = z.object({
+  name: z.string().min(3),
+  phone: z.string(),
+  message: z.string(),
+});
+type TForm = z.infer<typeof FormSchema>;
+
+const defaultValues = {
+  name: '',
+  phone: '',
+  message: '',
+};
 
 export default function FooterForm() {
-  const notify = () => toast.success('Заявка на консультацию принята');
+  const {
+    handleSubmit,
+    control,
+    reset,
+    formState: { errors },
+    clearErrors,
+  } = useForm<TForm>({
+    mode: 'onSubmit',
+    reValidateMode: 'onBlur',
+    resolver: zodResolver(FormSchema),
+    defaultValues,
+  });
+
+  const onSubmit = async (data: TForm) => {
+    try {
+      console.log('Form', data);
+      toast.success('Заявка на консультацию принята');
+      reset(defaultValues);
+    } catch (e) {
+      toast.error('Ошибка при отправке заявки...', {
+        duration: 3000,
+      });
+    }
+  };
 
   return (
-    <form className={s.Form}>
+    <form className={s.Form} onSubmit={handleSubmit(onSubmit)}>
       <h2 className={s.Header}>
         Давайте <Mark>обсудим</Mark> ваши задачи
       </h2>
-      <Input variant='ghost' placeholder={'Ваше имя'} fullWidth />
-      <Input variant='ghost' placeholder={'+7 999 1234567'} fullWidth />
-      <TextArea
-        variant='ghost'
-        placeholder={'Кратко опишите вашу задачу'}
-        fullWidth
-        id='story'
-        name='story'
-        rows={6}
+      <Controller
+        control={control}
+        name={'name'}
+        render={({ field }) => (
+          <Input
+            {...field}
+            variant='ghost'
+            placeholder={'Ваше имя'}
+            fullWidth
+          />
+        )}
       />
-      <Button className={s.SendBtn} variant='orange' fullWidth onClick={notify}>
+      <Controller
+        control={control}
+        name={'phone'}
+        render={({ field }) => (
+          <Input
+            {...field}
+            variant='ghost'
+            placeholder={'+7 999 1234567'}
+            fullWidth
+          />
+        )}
+      />
+      <Controller
+        control={control}
+        name={'message'}
+        render={({ field }) => (
+          <TextArea
+            {...field}
+            variant='ghost'
+            placeholder={'Кратко опишите вашу задачу'}
+            fullWidth
+            id='story'
+            name='story'
+            rows={6}
+          />
+        )}
+      />
+      <Button className={s.SendBtn} variant='orange' fullWidth>
         Отправить
       </Button>
     </form>