94 lines
3.4 KiB
TypeScript
94 lines
3.4 KiB
TypeScript
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;
|