feat: add forms logic

src/widgets/offer-form/ui.tsx

@@ -2,24 +2,75 @@
 
 import s from './styles.module.scss';
 import { Button, Input } from '@shared/ui';
-import { useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
 import toast from 'react-hot-toast';
 
+const FormSchema = z.object({
+  name: z.string().min(3),
+  phone: z.string(),
+});
+type TForm = z.infer<typeof FormSchema>;
+
+const defaultValues = {
+  name: '',
+  phone: '',
+};
+
 export default function OfferForm() {
-  const [name, setName] = useState('');
-  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.RowForm}>
-      <Input className={s.Unit} type='text' placeholder='+7 (999) 123 45 67' />
-      <Input
-        className={s.Unit}
-        type='text'
-        placeholder='Ваше имя'
-        value={name}
-        onChange={(e) => setName(e.target.value)}
+    <form className={s.RowForm} onSubmit={handleSubmit(onSubmit)}>
+      <Controller
+        control={control}
+        name={'name'}
+        render={({ field }) => (
+          <Input
+            {...field}
+            className={s.Unit}
+            type='text'
+            placeholder='Ваше имя'
+          />
+        )}
       />
-      <Button className={s.Unit} variant='orange' onClick={notify}>
+      <Controller
+        control={control}
+        name={'phone'}
+        render={({ field }) => (
+          <Input
+            {...field}
+            className={s.Unit}
+            type='text'
+            placeholder='+7 (999) 123 45 67'
+          />
+        )}
+      />
+      <Button className={s.Unit} variant='orange'>
         Получить консультацию
       </Button>
     </form>