From bf2c94f1f55e716a0f94e7367d7b139626dcbf01 Mon Sep 17 00:00:00 2001 From: ArtChaos189 Date: Sun, 19 Mar 2023 18:25:40 +0300 Subject: [PATCH] create Basket --- src/assets/Icons/BasketIcon.svg | 5 + src/components/Navbar/NavbarCollapsed.tsx | 57 +++-- src/components/Navbar/NavbarFull.tsx | 223 +++++++++--------- src/components/icons/WalletIcon.tsx | 51 ++-- src/index.tsx | 64 ++++- src/pages/Basket.tsx | 32 +++ src/utils/routes/PrivateRoute.tsx | 11 + .../PublicRoute.tsx} | 2 +- 8 files changed, 271 insertions(+), 174 deletions(-) create mode 100644 src/assets/Icons/BasketIcon.svg create mode 100644 src/pages/Basket.tsx create mode 100644 src/utils/routes/PrivateRoute.tsx rename src/utils/{publicRoute.tsx => routes/PublicRoute.tsx} (86%) diff --git a/src/assets/Icons/BasketIcon.svg b/src/assets/Icons/BasketIcon.svg new file mode 100644 index 0000000..8f1c427 --- /dev/null +++ b/src/assets/Icons/BasketIcon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/Navbar/NavbarCollapsed.tsx b/src/components/Navbar/NavbarCollapsed.tsx index 0936839..7e0127e 100644 --- a/src/components/Navbar/NavbarCollapsed.tsx +++ b/src/components/Navbar/NavbarCollapsed.tsx @@ -3,37 +3,36 @@ import SectionWrapper from "../SectionWrapper"; import MenuIcon from "@mui/icons-material/Menu"; import PenaLogo from "../PenaLogo"; - interface Props { - isLoggedIn: boolean; + isLoggedIn: boolean; } export default function NavbarCollapsed({ isLoggedIn }: Props) { - const theme = useTheme(); + const theme = useTheme(); - return ( - - - - - - - ); -} \ No newline at end of file + return ( + + + + + + + ); +} diff --git a/src/components/Navbar/NavbarFull.tsx b/src/components/Navbar/NavbarFull.tsx index 02531ac..5a249be 100644 --- a/src/components/Navbar/NavbarFull.tsx +++ b/src/components/Navbar/NavbarFull.tsx @@ -7,120 +7,131 @@ import WalletIcon from "../icons/WalletIcon"; import CustomAvatar from "./Avatar"; import { useNavigate } from "react-router-dom"; import { apiRequestHandler } from "../../utils/api/apiRequestHandler"; +import { IconsCreate } from "@root/lib/IconsCreate"; +import BasketIcon from "../../assets/Icons/BasketIcon.svg"; interface Props { - isLoggedIn: boolean; + isLoggedIn: boolean; } export default function NavbarFull({ isLoggedIn }: Props) { - const theme = useTheme(); - const navigate = useNavigate(); + const theme = useTheme(); + const navigate = useNavigate(); - async function handleLogoutClick() { - await apiRequestHandler.logout(); - navigate("/"); - } + async function handleLogoutClick() { + await apiRequestHandler.logout(); + navigate("/"); + } - return isLoggedIn ? ( - + + + + + + + + + + + + + + + + + + + + Мой баланс + + + 00.00 руб. + + + + - - - - - - - - - - - - - - - - Мой баланс - 00.00 руб. - - - - - - - - ) : ( - - - - - - - - - - - - - ); -} \ No newline at end of file + + + + + ) : ( + + + + + + + + + + + + + ); +} diff --git a/src/components/icons/WalletIcon.tsx b/src/components/icons/WalletIcon.tsx index 3265109..a85b43a 100644 --- a/src/components/icons/WalletIcon.tsx +++ b/src/components/icons/WalletIcon.tsx @@ -1,32 +1,31 @@ import { Box } from "@mui/material"; - interface Props { - color: string; - bgcolor: string; + color: string; + bgcolor: string; } export default function WalletIcon({ color, bgcolor }: Props) { - - return ( - - - - - - ); -} \ No newline at end of file + return ( + + + + + + ); +} diff --git a/src/index.tsx b/src/index.tsx index ffc205e..6c57b96 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -17,12 +17,15 @@ import Tariffs from "./pages/Tariffs/Tariffs"; import { TariffsTime } from "./pages/Tariffs/TariffsTime"; import Signin from "./pages/auth/Signin"; import Signup from "./pages/auth/Signup"; +import { Basket } from "./pages/Basket"; import Footer from "@components/Footer"; import Navbar from "@components/Navbar/Navbar"; import darkTheme from "@utils/themes/dark"; import lightTheme from "@utils/themes/light"; +import PublicRoute from "@root/utils/routes/PublicRoute"; +import PrivateRoute from "@root/utils/routes/PrivateRoute"; import { SnackbarProvider } from "notistack"; @@ -47,8 +50,22 @@ const App = () => { } /> - } /> - } /> + + + + } + /> + + + + } + /> { } > } /> - } /> + + + + } + /> { - - - + + <> + + + + } /> - - - + + <> + + + + + } /> { /> + <> + + + + + } + /> + - + } /> diff --git a/src/pages/Basket.tsx b/src/pages/Basket.tsx new file mode 100644 index 0000000..eaf4c8b --- /dev/null +++ b/src/pages/Basket.tsx @@ -0,0 +1,32 @@ +import { Typography, useMediaQuery, useTheme } from "@mui/material"; +import SectionWrapper from "@root/components/SectionWrapper"; + +export const Basket = () => { + const theme = useTheme(); + const upMd = useMediaQuery(theme.breakpoints.up("md")); + + return ( + + + Все тарифы — + + Корзина + + + + Корзина + + + ); +}; diff --git a/src/utils/routes/PrivateRoute.tsx b/src/utils/routes/PrivateRoute.tsx new file mode 100644 index 0000000..d154c3f --- /dev/null +++ b/src/utils/routes/PrivateRoute.tsx @@ -0,0 +1,11 @@ +import * as React from "react"; +import { useLocation, Navigate } from "react-router-dom"; + +export default ({ children }: any) => { + const location = useLocation(); + //Если пользователь авторизован, перенаправляем его на нужный путь. Иначе выкидываем в регистрацию + if (localStorage.getItem("AT")) { + return children; + } + return ; +}; diff --git a/src/utils/publicRoute.tsx b/src/utils/routes/PublicRoute.tsx similarity index 86% rename from src/utils/publicRoute.tsx rename to src/utils/routes/PublicRoute.tsx index 1830db8..dee7d14 100644 --- a/src/utils/publicRoute.tsx +++ b/src/utils/routes/PublicRoute.tsx @@ -5,7 +5,7 @@ export default ({ children }: any) => { const location = useLocation(); //Если пользователь авторизован, перенаправляем его в приложение. Иначе пускаем куда хотел if (localStorage.getItem("AT")) { - return ; + return ; } return children; };