added form

src/App.js

@@ -1,24 +1,167 @@
-import logo from './logo.svg';
+
+
+import SendIcon from './img/paper-plane.png';
+import { useState } from 'react';
+import Message from './misc/Message';
+
 import './App.css';
 
 function App() {
+  const [Stage, setStage] = useState(0);
+  const [Loading, setLoading] = useState(false);
+  const [LoadingText, setLoadingText] = useState("");
+
+  const [formData, setFormData] = useState({
+    name: '',
+    work_place: '',
+    problem:'',
+    message:''
+  });
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+
+
+  const handleSubmit = (e) => {
+    e.preventDefault(); // Останавливаем стандартную отправку формы
+
+    console.log('Отправленные данные:', formData);
+    setLoading(true);
+    
+    setTimeout(()=>{
+      setStage(1);
+      setLoading(false);
+
+    },300)
+  
+  };
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <div className="flex w-full h-full justify-center items-center">
+      <div className="relative flex md:h-[550px] h-full md:w-[500px] w-full flex-col justify-center rounded-xl bg-gray-50 p-5 text-sm/7 text-gray-800 shadow-sm shadow-orange-500/50 dark:bg-gray-900 dark:text-gray-200">
+
+        {Loading &&
+          <div className="absolute inset-0 bg-black/10 backdrop-blur-[3px] flex flex-col items-center justify-center z-10 rounded-xl">
+            <div className="w-10 h-10 border-4 border-orange-500 border-t-transparent rounded-full animate-spin" style={{ animationDuration: "0.5s" }}    ></div>
+            <span className='block mt-2 text-gray-500 font-bold dark:text-gray-300'>{LoadingText}</span>
+          </div>
+        }
+        {Stage == 0 &&
+          <div className="p-4">
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+              Сообщить о проблеме
+            </h1>
+            <div className="space-y-6">
+              <p className="leading-5">
+                Чем подробнее вы опишете ситуацию, тем быстрее мы найдём решение
+              </p>
+              <form className="space-y-3" onSubmit={handleSubmit}>
+                <input
+                  type="text"
+                  name="name"
+                  className="block w-full rounded-xl border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-orange-500 focus:ring-orange-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-orange-500 dark:focus:ring-orange-500"
+                  placeholder="Ваше имя *"
+                  required={true}
+                  value={formData.name}
+                  onChange={handleChange}
+                />
+                <input
+                  type="text"
+                  name="work_place"
+                  className="block w-full rounded-xl border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-orange-500 focus:ring-orange-500 disabled:text-gray-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-orange-500 dark:focus:ring-orange-500"
+                  defaultValue="Рабочее место 192.168.0.24"
+                  placeholder="Адрес рабочего места *"
+                  required={true}
+                  disabled={false}
+                  value={formData.work_place}
+                  onChange={handleChange}
+                />
+                <select
+                  name="problem"
+                  className="mt-10 block w-full rounded-xl border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-orange-500 focus:ring-orange-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-orange-500 dark:focus:ring-orange-500"
+                  value={formData.problem}
+                  onChange={handleChange}
+               >
+                  <option value="0">Выберите тип проблемы *</option>
+                  <option value="1">Ошибка в работе ПО</option>
+                  <option value="2">Проблемы с доступом/паролями</option>
+                  <option value="3">Не работает оборудование</option>
+                  <option value="4">Другое</option>
+                </select>
+                <textarea
+                  name="message"
+                  rows={4}
+                  className="block w-full rounded-xl border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-orange-500 focus:ring-orange-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-orange-500 dark:focus:ring-orange-500"
+                  placeholder="Добавьте описание *"
+                  required={true}
+                  value={formData.message}
+                  onChange={handleChange}
+                />
+                <button
+                  type="submit"
+                  className="text-md dark:bg-orange-600dark:focus:ring-orange-900 mb-2 w-full cursor-pointer rounded-xl bg-orange-500 px-5 py-2.5 font-bold text-white shadow-md duration-300 hover:scale-105 focus:outline-none"
+                >
+                  Отправить
+                </button>
+              </form>
+            </div>
+          </div>
+        }
+        {Stage == 1 &&
+          <>
+            <div className="flex flex-col gap-3 w-full h-full items-start scroll-box">
+
+             
+
+            <Message self={true} text={"Test message"}/>
+            <Message self={false} text={"Test message"}/>
+            <Message self={true} text={"Test message"}/>
+
+            <Message self={false} text={"Test message"}/>
+
+
+
+
+              <div className='flex items-start gap-2 justify-center px-2'>
+                <div className="flex space-x-1 h-full items-center">
+                  <div className="w-2 h-2 bg-gray-400 rounded-full animate-pulse" />
+                  <div
+                    className="w-2 h-2 bg-gray-400 rounded-full animate-pulse"
+                    style={{ animationDelay: "0.1s" }}
+                  />
+                  <div
+                    className="w-2 h-2 bg-gray-400 rounded-full animate-pulse"
+                    style={{ animationDelay: "0.3s" }}
+                  />
+                </div>
+                <span className='text-gray-400 animate-pulse'>Генерация ответа...</span>
+              </div>
+
+
+            </div>
+            <div className="pt-4">
+              <form className='flex gap-3'>
+                <input
+                  type="text"
+                  id="name"
+                  className="block w-full rounded-xl border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-orange-500 focus:ring-orange-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-orange-500 dark:focus:ring-orange-500"
+                  placeholder="Сообщение"
+                  required=""
+                />
+                <button type='submit' className='transition-transform duration-300 hover:rotate-45'>
+                  <img src={SendIcon} className='h-6' />
+                </button>
+              </form>
+            </div>
+          </>
+        }
+
+      </div>
+    </div >
   );
 }