Auth navigation

package-lock.json

@@ -8,14 +8,15 @@
       "name": "react-kit",
       "version": "0.0.0",
       "dependencies": {
-        "@reduxjs/toolkit": "^2.2.7",
+        "@reduxjs/toolkit": "^2.9.2",
         "@types/react-redux": "^7.1.33",
         "clsx": "^2.1.1",
         "framer-motion": "^11.9.0",
         "postcss": "^8.4.47",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "react-redux": "^9.1.2",
+        "react-redux": "^9.2.0",
+        "react-router-dom": "^7.9.4",
         "tailwind-cn": "^1.0.2",
         "tailwind-merge": "^1.14.0",
         "tailwindcss": "^3.4.12"
@@ -1066,18 +1067,20 @@
       }
     },
     "node_modules/@reduxjs/toolkit": {
-      "version": "2.2.7",
+      "version": "2.9.2",
-      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.2.7.tgz",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.9.2.tgz",
-      "integrity": "sha512-faI3cZbSdFb8yv9dhDTmGwclW0vk0z5o1cia+kf7gCbaCwHI5e+7tP57mJUv22pNcNbeA62GSrPpfrUfdXcQ6g==",
+      "integrity": "sha512-ZAYu/NXkl/OhqTz7rfPaAhY0+e8Fr15jqNxte/2exKUxvHyQ/hcqmdekiN1f+Lcw3pE+34FCgX+26zcUE3duCg==",
       "license": "MIT",
       "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
+        "@standard-schema/utils": "^0.3.0",
         "immer": "^10.0.3",
         "redux": "^5.0.1",
         "redux-thunk": "^3.1.0",
         "reselect": "^5.1.0"
       },
       "peerDependencies": {
-        "react": "^16.9.0 || ^17.0.0 || ^18",
+        "react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
         "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
       },
       "peerDependenciesMeta": {
@@ -1313,6 +1316,18 @@
         "win32"
       ]
     },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.0.0.tgz",
+      "integrity": "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==",
+      "license": "MIT"
+    },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+      "license": "MIT"
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -1423,9 +1438,9 @@
       }
     },
     "node_modules/@types/use-sync-external-store": {
-      "version": "0.0.3",
+      "version": "0.0.6",
-      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
-      "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
       "license": "MIT"
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
@@ -1916,9 +1931,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001662",
+      "version": "1.0.30001751",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001662.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001751.tgz",
-      "integrity": "sha512-sgMUVwLmGseH8ZIrm1d51UbrhqMCH3jvS7gF/M6byuHOnKyLOBL7W8yz5V02OHwgLGA36o/AFhWzzh4uc5aqTA==",
+      "integrity": "sha512-A0QJhug0Ly64Ii3eIqHu5X51ebln3k4yTUkY1j8drqpWHVreg/VLijN48cZ1bYPiqOQuqpkIKnzr/Ul8V+p6Cw==",
       "dev": true,
       "funding": [
         {
@@ -2036,6 +2051,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -3578,17 +3602,17 @@
       "license": "MIT"
     },
     "node_modules/react-redux": {
-      "version": "9.1.2",
+      "version": "9.2.0",
-      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
-      "integrity": "sha512-0OA4dhM1W48l3uzmv6B7TXPCGmokUU4p1M44DGN2/D9a1FjVPukVjER1PcPX97jIg6aUeLq1XJo1IpfbgULn0w==",
+      "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
       "license": "MIT",
       "dependencies": {
-        "@types/use-sync-external-store": "^0.0.3",
+        "@types/use-sync-external-store": "^0.0.6",
-        "use-sync-external-store": "^1.0.0"
+        "use-sync-external-store": "^1.4.0"
       },
       "peerDependencies": {
-        "@types/react": "^18.2.25",
+        "@types/react": "^18.2.25 || ^19",
-        "react": "^18.0",
+        "react": "^18.0 || ^19",
         "redux": "^5.0.0"
       },
       "peerDependenciesMeta": {
@@ -3610,6 +3634,44 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "7.9.4",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.9.4.tgz",
+      "integrity": "sha512-SD3G8HKviFHg9xj7dNODUKDFgpG4xqD5nhyd0mYoB5iISepuZAvzSr8ywxgxKJ52yRzf/HWtVHc9AWwoTbljvA==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.9.4",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.9.4.tgz",
+      "integrity": "sha512-f30P6bIkmYvnHHa5Gcu65deIXoA2+r3Eb6PJIAddvsT9aGlchMatJ51GgpU470aSqRRbFX22T70yQNUGuW3DfA==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.9.4"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -3773,6 +3835,12 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
+      "license": "MIT"
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -4190,12 +4258,12 @@
       }
     },
     "node_modules/use-sync-external-store": {
-      "version": "1.2.2",
+      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
-      "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
       "license": "MIT",
       "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
     "node_modules/util-deprecate": {

package.json

@@ -10,14 +10,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@reduxjs/toolkit": "^2.2.7",
+    "@reduxjs/toolkit": "^2.9.2",
     "@types/react-redux": "^7.1.33",
     "clsx": "^2.1.1",
     "framer-motion": "^11.9.0",
     "postcss": "^8.4.47",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-redux": "^9.1.2",
+    "react-redux": "^9.2.0",
+    "react-router-dom": "^7.9.4",
     "tailwind-cn": "^1.0.2",
     "tailwind-merge": "^1.14.0",
     "tailwindcss": "^3.4.12"

src/App.tsx

@@ -1,13 +1,23 @@
-import { PrimaryButton } from "./components/button/PrimaryButton";
+import { Route, Routes } from "react-router-dom";
-import { SecondaryButton } from "./components/button/SecondaryButton";
+// import { PrimaryButton } from "./components/button/PrimaryButton";
-import { Checkbox } from "./components/checkbox/Checkbox";
+// import { SecondaryButton } from "./components/button/SecondaryButton";
-import { Input } from "./components/input/Input";
+// import { Checkbox } from "./components/checkbox/Checkbox";
-import { Switch } from "./components/switch/Switch";
+// import { Input } from "./components/input/Input";
+// import { Switch } from "./components/switch/Switch";
+import Home from "./pages/Home";
 
 function App() {
   return (
     <div className="flex  py-[100px] w-full h-full">
-      <Switch
+      <Routes>
+        <Route path="/home/*" element={<Home/>}/>
+
+
+
+        <Route path="*" element={<Home/>}/>
+      </Routes>
+
+      {/* <Switch
         className=" fixed top-0 left-0 z-full"
         variant="theme"
         color="secondary"
@@ -90,7 +100,7 @@ function App() {
           <SecondaryButton onClick={() => { }} text="Button" disabled className="m-5" />
         </div>
       </div>
-      <div className="w-full"></div>
+      <div className="w-full"></div> */}
     </div>
   );
 }

src/components/checkbox/Checkbox.tsx

@@ -33,6 +33,16 @@ const colorsVariants = {
   danger: "bg-liquid-red",
 };
 
+
+const borderColorsVariants = {
+  default: "border-default",
+  primary: "border-liquid-brightmain",
+  secondary: "border-liquid-darkmain",
+  success: "border-liquid-green",
+  warning: "border-liquid-orange",
+  danger: "border-liquid-red",
+};
+
 const focuseOutlineVariants = {
   default: "[&:focus-visible+*]:outline-default",
   primary: "[&:focus-visible+*]:outline-liquid-brightmain",
@@ -97,7 +107,8 @@ export const Checkbox: React.FC<CheckboxProps> = ({
         className={cn(
           "group-hover:bg-default-100 group-active:scale-90 flex items-center justify-center bg-transparent hover:bg-default-100 box-border border-solid border-[2px] border-default z-10 relative transition-all duration-300",
           sizeVariants[size],
-          radiusVraiants[radius]
+          radiusVraiants[radius],
+          active && borderColorsVariants[color]
         )}
       >
         <input

src/main.tsx

@@ -4,9 +4,12 @@ import App from "./App.tsx";
 import "./styles/index.css";
 import "./styles/palette/theme-dark.css";
 import "./styles/palette/theme-light.css";
+import { BrowserRouter } from "react-router-dom";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </StrictMode>
 );

src/pages/Home.tsx

@@ -0,0 +1,20 @@
+// import React from "react";
+import { Route, Routes } from "react-router-dom";
+import Login from "../views/home/auth/Login";
+import Register from "../views/home/auth/Register";
+
+const Home = () => {
+  return (
+    <div className="h-full w-full bg-default-100 flex items-center justify-center">
+      <div className=" bg-layout-background w-[25rem] h-[34.375rem] rounded-[15px] box-border p-[25px] relative">
+        <Routes>
+          <Route path="login" element={<Login/>}/>
+          <Route path="register" element={<Register/>}/>
+          <Route path="*" element={"123"}/>
+        </Routes>
+      </div>
+    </div>
+  );
+};
+
+export default Home;

src/views/home/auth/Login.tsx

@@ -0,0 +1,111 @@
+// import React from "react";
+// import { Button } from "../../components/button/Button";
+// import { Input } from "../../components/input/Input";
+// import { useDispatch, useSelector } from "react-redux";
+// import { useNavigate } from "react-router-dom";
+// import { loginUser } from "../../redux/slices/user";
+// import { setUsername, setPassword } from "../../redux/slices/user";
+// import { cn } from "../../lib/cn";
+
+const Login = () => {
+  // const dispatch = useDispatch();
+  // const navigate = useNavigate();
+
+  // const [inputUsername, setInputUsername] = React.useState<string>("");
+  // const [inputPassword, setInputPassword] = React.useState<string>("");
+  // const [inputClickLogin, setInputClickLogin] = React.useState<boolean>(false);
+
+  // const changeUsername = (s: string) => {
+  //   dispatch(setUsername(s));
+  //   setInputUsername(s);
+  // };
+  // const changePassword = (s: string) => {
+  //   dispatch(setPassword(s));
+  //   setInputPassword(s);
+  // };
+
+  // const isAuthorised = useSelector((state: any) => state.user.isAuthorized);
+
+  // React.useEffect(() => {
+  //   if (isAuthorised) navigate("/home/offices");
+  // }, [isAuthorised]);
+
+  // const clickLogin = () => {
+  //   setInputClickLogin(true);
+  //   if (inputUsername == "" || inputPassword == "") return;
+  //   setInputClickLogin(false);
+  //   dispatch(loginUser());
+
+  //   if (isAuthorised) navigate("/home/offices");
+  // };
+  // const clickNavigateRegister = () => {
+  //   navigate("/auth/register");
+  // };
+  return (
+    <div className="h-full w-full bg-default-100 flex items-center justify-center">
+      <div className=" bg-layout-background w-[25rem] h-[34.375rem] rounded-[15px] box-border p-[25px] relative">
+        <div className="text-content-1 w-full h-[3.125rem] text-[28px] font-bold text-center">
+          Вход в аккаунт
+        </div>
+        <div className="text-content-1  w-full h-[3.4375rem] text-[12px] text-center mt-[15px]">
+          Для начала работы вам необходимо войти в аккаунт. Заполните поля ниже
+          и нажмите кнопку войти
+        </div>
+
+        {/* <div className="mt-[15px]">
+          <div
+            className={cn(
+              "text-[14px] text-danger font-medium h-0 transition-all mt-[20px] overflow-hidden",
+              inputClickLogin && inputUsername == "" && "h-[21px]"
+            )}
+          >
+            Поле не может быть пустым
+          </div>
+          <Input
+            color="danger"
+            required
+            label="Логин"
+            radius="sm"
+            className="w-[22rem]"
+            onChange={changeUsername}
+          />
+          <div
+            className={cn(
+              "text-[14px] text-danger font-medium h-0 transition-all mt-[15px] overflow-hidden",
+              inputClickLogin && inputPassword == "" && "h-[21px]"
+            )}
+          >
+            Поле не может быть пустым
+          </div>
+          <Input
+            required
+            label="Пароль"
+            type="password"
+            radius="sm"
+            className="w-[22rem]"
+            onChange={changePassword}
+          />
+        </div>
+
+        <div className="w-[calc(100%-50px)] absolute bottom-0">
+          <Button
+            className="w-full mb-[8px]"
+            size="lg"
+            onClick={clickLogin}
+            text="Войти"
+          />
+          <Button
+            variant="bordered"
+            color="default"
+            className="w-full  mb-[25px]"
+            size="lg"
+            onClick={clickNavigateRegister}
+            text="Зарегистрироваться"
+          />
+        </div> */}
+      </div>
+    </div>
+  );
+};
+
+export default Login;

src/views/home/auth/Register.tsx

@@ -0,0 +1,207 @@
+// import React from "react";
+// import { Button } from "../../components/button/Button";
+// import { Checkbox } from "../../components/checkbox/Checkbox";
+// import { Input } from "../../components/input/Input";
+// import { useDispatch, useSelector } from "react-redux";
+// import { useNavigate } from "react-router-dom";
+// import {
+//   setEmail,
+//   setUsername,
+//   setPassword,
+//   registerUser,
+// } from "../../redux/slices/user";
+// import { cn } from "../../lib/cn";
+
+const Register = () => {
+  // const dispatch = useDispatch();
+  // const navigate = useNavigate();
+
+  // const [inputUsername, setInputUsername] = React.useState<string>("");
+  // const [inputEmail, setInputEmail] = React.useState<string>("");
+  // const [inputPassword, setInputPassword] = React.useState<string>("");
+  // const [inputRepeatPassword, setInputRepeatPassword] =
+  //   React.useState<string>("");
+  // const [inputChecked, setInputChecked] = React.useState<boolean>(false);
+  // const [inputClickRegister, setInputClickRegister] =
+  //   React.useState<boolean>(false);
+
+  // const changeEmail = (s: string) => {
+  //   setInputEmail(s);
+  //   dispatch(setEmail(s));
+  // };
+  // const changeUsername = (s: string) => {
+  //   setInputUsername(s);
+  //   dispatch(setUsername(s));
+  // };
+  // const changePassword = (s: string) => {
+  //   setInputPassword(s);
+  //   dispatch(setPassword(s));
+  // };
+
+  // const { username, email } = useSelector((state: any) => state.user);
+
+  // const isAuthorized = useSelector((state: any) => state.user.isAuthorized);
+
+  // React.useEffect(() => {
+  //   if (isAuthorized) navigate("/home/offices");
+  // }, [isAuthorized]);
+
+  // const clickNavigateLogin = () => {
+  //   navigate("/auth/login");
+  // };
+
+  // const completeRegister = () => {
+  //   setInputClickRegister(true);
+  //   if (
+  //     inputChecked == false ||
+  //     inputEmail == "" ||
+  //     inputUsername == "" ||
+  //     inputPassword == "" ||
+  //     inputRepeatPassword == "" ||
+  //     inputPassword != inputRepeatPassword
+  //   )
+  //     return;
+  //   setInputClickRegister(false);
+  //   dispatch(registerUser());
+  //   if (isAuthorized) navigate("/home");
+  // };
+
+  return (
+    <div className="h-full w-full bg-default-100 flex items-center justify-center">
+      <div className=" bg-layout-background w-[25rem]  rounded-[15px] box-border p-[25px] relative">
+        <div className="text-content-1 w-full h-[3.125rem] text-[28px] font-bold text-center">
+          Регистрация аккаунта
+        </div>
+        <div className="text-content-1  w-full h-[3.4375rem] text-[12px] text-center mt-[15px]">
+          Для начала работы вам необходимо создать аккаунт. Заполните поля ниже
+          и нажмите кнопку продолжить
+        </div>
+
+        {/* <div>
+          <div
+            className={cn(
+              "text-[14px] text-danger font-medium h-0 transition-all mt-[15px] overflow-hidden",
+              inputClickRegister && inputUsername == "" && "h-[21px]"
+            )}
+          >
+            Поле не может быть пустым
+          </div>
+          <Input
+            required
+            label="Логин"
+            radius="sm"
+            className="w-[22rem]"
+            onChange={changeUsername}
+            defaultState={username}
+          />
+          <div
+            className={cn(
+              "text-[14px] text-danger font-medium h-0 transition-all mt-[15px] overflow-hidden",
+              inputClickRegister && inputEmail == "" && "h-[21px]"
+            )}
+          >
+            Поле не может быть пустым
+          </div>
+          <Input
+            required
+            label="Почта"
+            type="email"
+            radius="sm"
+            className="w-[22rem]"
+            onChange={changeEmail}
+            defaultState={email}
+          />
+          <div
+            className={cn(
+              "text-[14px] text-danger font-medium h-0 transition-all mt-[15px] overflow-hidden",
+              inputClickRegister && inputPassword == "" && "h-[21px]"
+            )}
+          >
+            Поле не может быть пустым
+          </div>
+          <div
+            className={cn(
+              "text-[14px] text-danger font-medium h-0 transition-all overflow-hidden",
+              inputClickRegister &&
+                inputRepeatPassword != inputPassword &&
+                "h-[21px]"
+            )}
+          >
+            Пароли не совпадают
+          </div>
+          <Input
+            required
+            label="Пароль"
+            type="password"
+            radius="sm"
+            className="w-[22rem]"
+            onChange={changePassword}
+          />
+          <div
+            className={cn(
+              "text-[14px] text-danger font-medium h-0 transition-all mt-[15px] overflow-hidden",
+              inputClickRegister && inputRepeatPassword == "" && "h-[21px]"
+            )}
+          >
+            Поле не может быть пустым
+          </div>
+          <div
+            className={cn(
+              "text-[14px] text-danger font-medium h-0 transition-all overflow-hidden",
+              inputClickRegister &&
+                inputRepeatPassword != inputPassword &&
+                "h-[21px]"
+            )}
+          >
+            Пароли не совпадают
+          </div>
+          <Input
+            required
+            label="Повторите пароль"
+            type="password"
+            radius="sm"
+            className="w-[22rem]"
+            onChange={setInputRepeatPassword}
+          />
+
+          <div
+            className={cn(
+              "text-[14px] text-danger font-medium h-0 transition-all overflow-hidden mt-[20px]",
+              inputClickRegister && inputChecked == false && "h-[21px]"
+            )}
+          >
+            Это обязательное поле
+          </div>
+          <div className="relative">
+            <Checkbox
+              className="z-10"
+              onChange={(state: boolean) => {
+                setInputChecked(state);
+              }}
+            />
+            <div className="text-[10px] absolute top-0 left-[35px] text-content-1">
+              Согласен с Условиями обслуживания и Политикой конфиденциальности
+            </div>
+          </div>
+        </div>
+
+        <Button
+          className="w-full mb-[8px] mt-[20px]"
+          size="lg"
+          onClick={completeRegister}
+          text="Зарегистрироваться"
+        />
+        <Button
+          variant="bordered"
+          color="default"
+          className="w-full  mb-[25px]"
+          size="lg"
+          onClick={clickNavigateLogin}
+          text="Вернуться ко входу"
+        /> */}
+      </div>
+    </div>
+  );
+};
+
+export default Register;

src/views/home/menu/Menu.tsx

@@ -0,0 +1,111 @@
+// import React from "react";
+// import { Button } from "../../components/button/Button";
+// import { Input } from "../../components/input/Input";
+// import { useDispatch, useSelector } from "react-redux";
+// import { useNavigate } from "react-router-dom";
+// import { loginUser } from "../../redux/slices/user";
+// import { setUsername, setPassword } from "../../redux/slices/user";
+// import { cn } from "../../lib/cn";
+
+const Menu = () => {
+  // const dispatch = useDispatch();
+  // const navigate = useNavigate();
+
+  // const [inputUsername, setInputUsername] = React.useState<string>("");
+  // const [inputPassword, setInputPassword] = React.useState<string>("");
+  // const [inputClickLogin, setInputClickLogin] = React.useState<boolean>(false);
+
+  // const changeUsername = (s: string) => {
+  //   dispatch(setUsername(s));
+  //   setInputUsername(s);
+  // };
+  // const changePassword = (s: string) => {
+  //   dispatch(setPassword(s));
+  //   setInputPassword(s);
+  // };
+
+  // const isAuthorised = useSelector((state: any) => state.user.isAuthorized);
+
+  // React.useEffect(() => {
+  //   if (isAuthorised) navigate("/home/offices");
+  // }, [isAuthorised]);
+
+  // const clickLogin = () => {
+  //   setInputClickLogin(true);
+  //   if (inputUsername == "" || inputPassword == "") return;
+  //   setInputClickLogin(false);
+  //   dispatch(loginUser());
+
+  //   if (isAuthorised) navigate("/home/offices");
+  // };
+  // const clickNavigateRegister = () => {
+  //   navigate("/auth/register");
+  // };
+  return (
+    <div className="h-full w-full bg-default-100 flex items-center justify-center">
+      <div className=" bg-layout-background w-[25rem] h-[34.375rem] rounded-[15px] box-border p-[25px] relative">
+        <div className="text-content-1 w-full h-[3.125rem] text-[28px] font-bold text-center">
+          Вход в аккаунт
+        </div>
+        <div className="text-content-1  w-full h-[3.4375rem] text-[12px] text-center mt-[15px]">
+          Для начала работы вам необходимо войти в аккаунт. Заполните поля ниже
+          и нажмите кнопку войти
+        </div>
+
+        {/* <div className="mt-[15px]">
+          <div
+            className={cn(
+              "text-[14px] text-danger font-medium h-0 transition-all mt-[20px] overflow-hidden",
+              inputClickLogin && inputUsername == "" && "h-[21px]"
+            )}
+          >
+            Поле не может быть пустым
+          </div>
+          <Input
+            color="danger"
+            required
+            label="Логин"
+            radius="sm"
+            className="w-[22rem]"
+            onChange={changeUsername}
+          />
+          <div
+            className={cn(
+              "text-[14px] text-danger font-medium h-0 transition-all mt-[15px] overflow-hidden",
+              inputClickLogin && inputPassword == "" && "h-[21px]"
+            )}
+          >
+            Поле не может быть пустым
+          </div>
+          <Input
+            required
+            label="Пароль"
+            type="password"
+            radius="sm"
+            className="w-[22rem]"
+            onChange={changePassword}
+          />
+        </div>
+
+        <div className="w-[calc(100%-50px)] absolute bottom-0">
+          <Button
+            className="w-full mb-[8px]"
+            size="lg"
+            onClick={clickLogin}
+            text="Войти"
+          />
+          <Button
+            variant="bordered"
+            color="default"
+            className="w-full  mb-[25px]"
+            size="lg"
+            onClick={clickNavigateRegister}
+            text="Зарегистрироваться"
+          />
+        </div> */}
+      </div>
+    </div>
+  );
+};
+
+export default Menu;

tsconfig.app.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/components/button/button.tsx","./src/components/checkbox/checkbox.tsx","./src/components/checkbox-group/chexkboxgroup.tsx","./src/components/input/input.tsx","./src/components/switch/switch.tsx","./src/config/colors.ts","./src/lib/cn.ts","./src/redux/store.ts"],"version":"5.6.2"}
+{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/components/button/primarybutton.tsx","./src/components/button/secondarybutton.tsx","./src/components/checkbox/checkbox.tsx","./src/components/input/input.tsx","./src/components/switch/switch.tsx","./src/config/colors.ts","./src/lib/cn.ts","./src/redux/store.ts"],"version":"5.6.2"}