92 lines
2.7 KiB
TypeScript
92 lines
2.7 KiB
TypeScript
/* eslint-disable no-irregular-whitespace */
|
||
import { Trans } from "react-i18next";
|
||
import useSidebarTabStore from "../stores/useSidebarStore";
|
||
import ContactsForm from "./ContactsForm";
|
||
import ArrowRightIcon from "./icons/ArrowRightIcon";
|
||
import CloseIcon from "./icons/CloseIcon";
|
||
|
||
function SidebarTab3() {
|
||
const [
|
||
currentTab,
|
||
setCurrentTab,
|
||
setIsOpen,
|
||
name,
|
||
phone,
|
||
email,
|
||
] = useSidebarTabStore((state) => [
|
||
state.currentTab,
|
||
state.setCurrentTab,
|
||
state.setIsOpen,
|
||
state.name,
|
||
state.phone,
|
||
state.email,
|
||
state.selectedDay,
|
||
state.selectedTime,
|
||
]);
|
||
|
||
function handleSubmit() {
|
||
if (!name || !phone || !email) {
|
||
return;
|
||
}
|
||
|
||
setCurrentTab(currentTab + 1);
|
||
}
|
||
|
||
return (
|
||
<form
|
||
onSubmit={handleSubmit}
|
||
className="sm:p-8 p-6 flex flex-col justify-between sm:gap-8 gap-6 min-h-full"
|
||
>
|
||
<div>
|
||
<div className="flex items-start justify-between">
|
||
<p className="text-2xl text-gradient font-semibold font-gilroy w-fit leading-snug">
|
||
<Trans i18nKey={"sidebar.title2"}>Контакты</Trans>
|
||
</p>
|
||
<button
|
||
onClick={() => setIsOpen(false)}
|
||
className="transition-opacity hover:opacity-50"
|
||
>
|
||
<CloseIcon />
|
||
</button>
|
||
</div>
|
||
|
||
<div className="sm:mt-6 mt-4">
|
||
<ContactsForm />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex flex-col sm:gap-6 gap-4">
|
||
<p className="text-center text-xs opacity-50 leading-tight">
|
||
<Trans i18nKey={"sidebar.notice"}>
|
||
Запись на демонстрацию работает в ознакомительном режиме и не
|
||
сохраняет введенные данные
|
||
</Trans>
|
||
</p>
|
||
|
||
<div className="flex sm:gap-4 gap-2">
|
||
<button
|
||
onClick={() => setCurrentTab(currentTab - 1)}
|
||
className="px-6 py-4 border border-[#3D425C] rounded-full sm:text-base text-sm font-medium group w-fit"
|
||
>
|
||
<span className="opacity-80 transition-opacity group-hover:opacity-100">
|
||
<Trans i18nKey={"sidebar.buttonBack"}>Назад</Trans>
|
||
</span>
|
||
</button>
|
||
|
||
<button
|
||
type="submit"
|
||
className="px-6 py-3 bg-gradient rounded-full sm:text-base text-sm font-medium flex items-center justify-between w-full"
|
||
>
|
||
<span>
|
||
<Trans i18nKey={"sidebar.buttonNext"}>Далее</Trans>
|
||
</span>
|
||
<ArrowRightIcon className="sm:w-8 sm:h-8 w-6 h-6" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
);
|
||
}
|
||
|
||
export default SidebarTab3;
|