upd

2023-08-07 15:05:18 +05:00
commit 5e07a8952e
84 changed files with 8097 additions and 0 deletions
@@ -0,0 +1,102 @@
+/* eslint-disable no-irregular-whitespace */
+import { Trans } from "react-i18next";
+import useSidebarTabStore from "../stores/useSidebarStore";
+import TimeSelector from "./TimeSelector";
+import CloseIcon from "./icons/CloseIcon";
+import { format } from "date-fns";
+import i18n from "../i18n";
+import { enUS, ru } from "date-fns/locale";
+
+function SidebarTab2() {
+  const [
+    currentTab,
+    setCurrentTab,
+    setIsOpen,
+    setSelectedTime,
+    selectedDay,
+    selectedTime,
+  ] = useSidebarTabStore((state) => [
+    state.currentTab,
+    state.setCurrentTab,
+    state.setIsOpen,
+    state.setSelectedTime,
+    state.selectedDay,
+    state.selectedTime,
+  ]);
+
+  function handleSelectTime(time: string) {
+    setSelectedTime(time);
+    setCurrentTab(currentTab + 1);
+  }
+
+  return (
+    <div 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.title1"}>Дата и время</Trans>
+          </p>
+          <button
+            onClick={() => setIsOpen(false)}
+            className="transition-opacity hover:opacity-50"
+          >
+            <CloseIcon />
+          </button>
+        </div>
+
+        <div className="mt-2">
+          <div className="grid grid-cols-2 gap-2">
+            <div className="border-b border-[#3D425C] p-4 text-center">
+              <p className="leading-none font-gilroy font-semibold text-sm">
+                {selectedDay &&
+                  format(
+                    selectedDay,
+                    "dd MMMM",
+                    i18n.language === "ru" ? { locale: ru } : { locale: enUS }
+                  )}
+              </p>
+            </div>
+
+            <div className="border-b  border-[#798FFF] p-4 text-center">
+              <p className="leading-none font-gilroy font-semibold text-sm">
+                {selectedTime ? (
+                  selectedTime
+                ) : (
+                  <Trans i18nKey={"sidebar.time"}>Время</Trans>
+                )}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-6">
+          <TimeSelector
+            handleSelect={(time: string) => handleSelectTime(time)}
+          />
+        </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 sm:py-4 py-3.5 border border-[#3D425C] rounded-full font-medium group w-full"
+          >
+            <span className="opacity-80 transition-opacity group-hover:opacity-100 sm:text-base text-sm">
+              <Trans i18nKey={"sidebar.buttonBack"}>Назад</Trans>
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default SidebarTab2;