upd

2023-08-07 15:05:18 +05:00
commit 5e07a8952e
84 changed files with 8097 additions and 0 deletions
@@ -0,0 +1,93 @@
+import { ChangeEvent } from "react";
+import { Trans } from "react-i18next";
+import AsteriskIcon from "./icons/AsteriskIcon";
+import InputMask from "react-input-mask";
+import "./ContactsForm.css";
+import useSidebarStore from "../stores/useSidebarStore";
+
+function ContactsForm() {
+  const [name, setName, phone, setPhone, email, setEmail] = useSidebarStore(
+    (state) => [
+      state.name,
+      state.setName,
+      state.phone,
+      state.setPhone,
+      state.email,
+      state.setEmail,
+    ]
+  );
+
+  return (
+    <div>
+      <div className="relative">
+        <input
+          required
+          type="text"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          className="feedback-field bg-transparent border border-[#3D425C] rounded-none sm:pt-12 sm:pb-4 sm:px-4 pt-8 pb-3 px-3 outline-none outline-1 -outline-offset-1 focus:outline-[#D375FF] transition-all w-full"
+        />
+        <p className="feedback-placeholder lg:text-base text-sm absolute sm:pt-4 sm:pb-4 sm:px-4 sm:top-4 pt-3 pb-3 px-3 top-3 w-full opacity-50 transition-all pointer-events-none flex justify-between items-center">
+          <span>
+            <Trans i18nKey={"feedback.form.field1"}>Имя</Trans>
+          </span>
+          <AsteriskIcon />
+        </p>
+      </div>
+
+      <div className="relative">
+        <InputMask
+          required
+          type="tel"
+          mask={"+999999999999999"}
+          maskChar={null}
+          value={phone}
+          onChange={(e: ChangeEvent<HTMLInputElement>) =>
+            setPhone(e.target.value)
+          }
+          className={[
+            "feedback-field bg-transparent border rounded-none border-t-0 border-[#3D425C] sm:pt-12 sm:pb-4 sm:px-4 pt-8 pb-3 px-3 outline-none outline-1 -outline-offset-1 focus:outline-[#D375FF] transition-all w-full",
+          ].join(" ")}
+        />
+        <p className="feedback-placeholder lg:text-base text-sm absolute sm:pt-4 sm:pb-4 sm:px-4 sm:top-4 pt-3 pb-3 px-3 top-3 w-full opacity-50 transition-all pointer-events-none flex justify-between items-center">
+          <span>
+            <Trans i18nKey={"feedback.form.field2"}>Телефон</Trans>
+          </span>
+          <AsteriskIcon />
+        </p>
+      </div>
+
+      <div className="relative">
+        <input
+          required
+          type="text"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          className="feedback-field bg-transparent border rounded-none border-t-0 border-[#3D425C] sm:pt-12 sm:pb-4 sm:px-4 pt-8 pb-3 px-3 outline-none outline-1 -outline-offset-1 focus:outline-[#D375FF] transition-all w-full"
+        />
+        <p className="feedback-placeholder lg:text-base text-sm absolute sm:pt-4 sm:pb-4 sm:px-4 sm:top-4 pt-3 pb-3 px-3 top-3 w-full opacity-50 transition-all pointer-events-none flex justify-between items-center">
+          <span>Email</span>
+          <AsteriskIcon />
+        </p>
+      </div>
+
+      <div className="border border-t-0 border-[#3D425C] sm:px-4 sm:py-6 px-3 py-4 text-xs flex items-center gap-2">
+        <div className="flex gap-2">
+          <div className="">
+            <AsteriskIcon />
+          </div>
+          <p>—</p>
+          <p>
+            <Trans i18nKey={"feedback.form.desc2"}>
+              Звездочкой отмечены обязательные
+              <br />
+              для заполнения поля
+            </Trans>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ContactsForm;