From 21190b5f795f22b5fdcfc9866e26b530ec767681 Mon Sep 17 00:00:00 2001
From: vasya <mitrofffanych@mail.ru>
Date: Sun, 22 Mar 2026 18:51:47 +0300
Subject: [PATCH] =?UTF-8?q?=D1=81=D0=BA=D1=80=D0=B8=D0=BF=D1=82=D1=8B=20?=
 =?UTF-8?q?=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82=D0=B0=20?=
 =?UTF-8?q?=D0=BF=D0=BE=D0=B4=D1=81=D0=B2=D0=B5=D1=82=D0=BA=D0=B8=D0=B5=20?=
 =?UTF-8?q?=D0=BE=D1=88=D0=B8=D0=B1=D0=BE=D0=BA=20=D0=B2=D0=B0=D0=BB=D0=B8?=
 =?UTF-8?q?=D0=B4=D0=B0=D1=86=D0=B8=D0=B8=20=D1=84=D0=BE=D1=80=D0=BC=D1=8B?=
 =?UTF-8?q?,=20=D0=BF=D0=BE=20=D0=B0=D0=BD=D0=B0=D0=BB=D0=BE=D0=B3=D0=B8?=
 =?UTF-8?q?=D0=B8=20=D1=81=20=D1=82=D0=B5=D0=BC,=20=D0=BA=D0=B0=D0=BA=20?=
 =?UTF-8?q?=D0=B2=20=D1=82=D0=B5=D0=BA=D1=83=D1=89=D0=B5=D0=BC=20magic=20?=
 =?UTF-8?q?=D1=81=20=D0=BF=D0=BE=D0=BC=D0=BE=D1=89=D1=8C=D1=8E=20comm=5Ffo?=
 =?UTF-8?q?rm=20=D0=BF=D0=BE=D0=B4=D1=81=D0=B2=D0=B5=D1=87=D0=B8=D0=B2?=
 =?UTF-8?q?=D0=B0=D1=8E=D1=82=D1=81=D1=8F=20=D0=BE=D1=88=D0=B8=D0=B1=D0=BA?=
 =?UTF-8?q?=D0=B8=20=D0=B2=D0=B0=D0=BB=D0=B8=D0=B4=D0=B0=D1=86=D0=B8=D0=B8?=
 =?UTF-8?q?=20=D1=84=D0=BE=D1=80=D0=BC=D1=8B.=20=D0=A1=D0=BE=D1=81=D1=82?=
 =?UTF-8?q?=D0=BE=D1=8F=D0=BD=D0=B8=D0=B5=20=D1=81=D1=8B=D1=80=D0=BE=D0=B5?=
 =?UTF-8?q?,=20=D0=BF=D0=BE=D0=BA=D0=B0=20=D0=B3=D0=BE=D1=82=D0=BE=D0=B2?=
 =?UTF-8?q?=20=D1=82=D0=BE=D0=BB=D1=8C=D0=BA=D0=BE=20=D0=BA=D0=B0=D1=80?=
 =?UTF-8?q?=D0=BA=D0=B0=D1=81.=20=D0=92=D0=BE=D0=B7=D0=BC=D0=BE=D0=B6?=
 =?UTF-8?q?=D0=BD=D0=BE,=20=D1=81=D1=82=D0=BE=D0=B8=D1=82=20=D0=BF=D0=BE?=
 =?UTF-8?q?=D1=81=D0=BC=D0=BE=D1=82=D1=80=D0=B5=D1=82=D1=8C=20=D0=BD=D0=B0?=
 =?UTF-8?q?=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82\?=
 =?UTF-8?q?=D0=B1=D0=B8=D0=B1=D0=BB=D0=B8=D0=BE=D1=82=D0=B5=D0=BA=D1=83=20?=
 =?UTF-8?q?UseForm,=20=D0=BD=D0=BE=20=D0=BA=D0=B0=D0=B6=D0=B5=D1=82=D1=81?=
 =?UTF-8?q?=D1=8F=20=D1=8D=D1=82=D0=BE=20=D0=B1=D1=83=D0=B4=D0=B5=D1=82=20?=
 =?UTF-8?q?=D0=B1=D0=BE=D0=BB=D0=B5=D0=B5=20=D0=B7=D0=B0=D0=BC=D0=BE=D1=80?=
 =?UTF-8?q?=D0=BD=D1=8B=D0=B9=20=D0=B2=D0=B0=D1=80=D0=B8=D0=B0=D0=BD=D1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/css/components/formValidErr.css     | 15 ++++++++++
 .../components/formValidErr/FormValidErr.tsx  | 30 +++++++++++++++++++
 2 files changed, 45 insertions(+)
 create mode 100644 resources/css/components/formValidErr.css
 create mode 100644 resources/js/components/formValidErr/FormValidErr.tsx

diff --git a/resources/css/components/formValidErr.css b/resources/css/components/formValidErr.css
new file mode 100644
index 0000000..e2b12a3
--- /dev/null
+++ b/resources/css/components/formValidErr.css
@@ -0,0 +1,15 @@
+@import url('./../variables.css');
+
+#form-valid-err-container{
+
+  background: red;
+  padding: 5px;
+  border-radius: 5px;
+
+  &.form-valid-err--hide{
+    display: none;
+  }
+  &.form-valid-err--visible{
+    display: block;
+  }
+}
diff --git a/resources/js/components/formValidErr/FormValidErr.tsx b/resources/js/components/formValidErr/FormValidErr.tsx
new file mode 100644
index 0000000..7c64e8f
--- /dev/null
+++ b/resources/js/components/formValidErr/FormValidErr.tsx
@@ -0,0 +1,30 @@
+import React, { useEffect, useState } from "react";
+
+/**
+ * Объект с данными для отображения в блоке с ошибками
+ */
+export interface FormValidErrObject
+{
+  fieldName: string | null,
+  fieldErrors: string[] | []
+}
+
+export default function FormValidErr ( {visible, validErrorsObj}: {visible: boolean, validErrorsObj: FormValidErrObject[]} ) 
+{
+  const [blockVisible, setBlockVisible] = useState<boolean>(false);
+  useEffect ( () => {
+    setBlockVisible(visible)
+  }, [visible]);
+  return (
+    <div id="form-valid-err-container" className={`form-valid-err--${blockVisible ? "visible" : 'hide'}`}>
+      <ul>
+      { validErrorsObj.map( (validErrObj: FormValidErrObject, index: number) => (
+        <li key={index}>
+          <b>{ validErrObj.fieldName }</b>: 
+          <span>{ validErrObj.fieldErrors }</span>
+        </li>
+      )) }
+      </ul>
+    </div>
+  )
+}