PenaSide/front-hub
3
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

create Basket

Browse Source
This commit is contained in:
ArtChaos189 2023-03-19 18:25:40 +03:00
parent b92e54683b
commit bf2c94f1f5
8 changed files with 271 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/assets/Icons/BasketIcon.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="22" height="20" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.5 19.75C8.32843 19.75 9 19.0784 9 18.25C9 17.4216 8.32843 16.75 7.5 16.75C6.67157 16.75 6 17.4216 6 18.25C6 19.0784 6.67157 19.75 7.5 19.75Z" fill="#9A9AAF"/>
<path d="M17.25 19.75C18.0784 19.75 18.75 19.0784 18.75 18.25C18.75 17.4216 18.0784 16.75 17.25 16.75C16.4216 16.75 15.75 17.4216 15.75 18.25C15.75 19.0784 16.4216 19.75 17.25 19.75Z" fill="#9A9AAF"/>
<path d="M3.96562 4.75H20.7844L18.3094 13.4125C18.2211 13.7269 18.032 14.0036 17.7711 14.2C17.5103 14.3965 17.1922 14.5019 16.8656 14.5H7.88437C7.55783 14.5019 7.2397 14.3965 6.97886 14.2C6.71803 14.0036 6.52893 13.7269 6.44062 13.4125L3.04688 1.54375C3.00203 1.38696 2.9073 1.24905 2.77704 1.15093C2.64677 1.05282 2.48808 0.999828 2.325 1H0.75" stroke="#9A9AAF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 906 B

57
src/components/Navbar/NavbarCollapsed.tsx
View File

@ -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 (
<SectionWrapper
component="nav"
maxWidth="lg"
outerContainerSx={{
backgroundColor: theme.palette.navbarbg.main,
position: "sticky",
top: 0,
zIndex: 1,
// borderBottom: "1px solid #E3E3E3",
}}
sx={{
height: "51px",
py: "6px",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
}}
>
<PenaLogo width={100} />
<IconButton sx={{ p: 0, height: "30px", width: "30px", color: theme.palette.primary.main }}>
<MenuIcon sx={{ height: "30px", width: "30px" }} />
</IconButton>
</SectionWrapper>
);
}
return (
<SectionWrapper
component="nav"
maxWidth="lg"
outerContainerSx={{
backgroundColor: theme.palette.navbarbg.main,
position: "sticky",
top: 0,
zIndex: 1,
// borderBottom: "1px solid #E3E3E3",
}}
sx={{
height: "51px",
py: "6px",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
}}
>
<PenaLogo width={100} />
<IconButton sx={{ p: 0, height: "300px", width: "30px", color: theme.palette.primary.main }}>
<MenuIcon sx={{ height: "30px", width: "30px" }} />
</IconButton>
</SectionWrapper>
);
}

223
src/components/Navbar/NavbarFull.tsx
View File

@ -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 ? (
<Container
component="nav"
disableGutters
maxWidth={false}
return isLoggedIn ? (
<Container
component="nav"
disableGutters
maxWidth={false}
sx={{
px: "16px",
display: "flex",
height: "80px",
alignItems: "center",
gap: "60px",
bgcolor: "white",
borderBottom: "1px solid #E3E3E3",
}}
>
<PenaLogo width={124} />
<Box
sx={{
display: "flex",
gap: "30px",
overflow: "hidden",
}}
>
<NavMenuItem text="Меню 1" />
<NavMenuItem text="Меню 2" isActive />
<NavMenuItem text="Меню 3" />
<NavMenuItem text="Меню 4" />
<NavMenuItem text="Меню 5" />
<NavMenuItem text="Меню 1" />
<NavMenuItem text="Меню 2" />
</Box>
<Box
sx={{
display: "flex",
ml: "auto",
}}
>
<IconButton sx={{ p: 0 }}>
<IconsCreate svg={BasketIcon} bgcolor="#F2F3F7" />
</IconButton>
<IconButton sx={{ p: 0 }}>
<WalletIcon color={theme.palette.grey2.main} bgcolor="#F2F3F7" />
</IconButton>
<Box sx={{ ml: "8px", whiteSpace: "nowrap" }}>
<Typography
sx={{
px: "16px",
display: "flex",
height: "80px",
alignItems: "center",
gap: "60px",
bgcolor: "white",
borderBottom: "1px solid #E3E3E3",
fontSize: "12px",
lineHeight: "14px",
color: theme.palette.grey3.main,
}}
>
Мой баланс
</Typography>
<Typography variant="body2" color={theme.palette.brightPurple.main}>
00.00 руб.
</Typography>
</Box>
<CustomAvatar sx={{ ml: "27px", backgroundColor: theme.palette.orange.main, height: "36px", width: "36px" }} />
<IconButton
onClick={handleLogoutClick}
sx={{ ml: "20px", bgcolor: "#F2F3F7", borderRadius: "6px", height: "36px", width: "36px" }}
>
<PenaLogo width={124} />
<Box
sx={{
display: "flex",
gap: "30px",
overflow: "hidden",
}}
>
<NavMenuItem text="Меню 1" />
<NavMenuItem text="Меню 2" isActive />
<NavMenuItem text="Меню 3" />
<NavMenuItem text="Меню 4" />
<NavMenuItem text="Меню 5" />
<NavMenuItem text="Меню 1" />
<NavMenuItem text="Меню 2" />
</Box>
<Box
sx={{
display: "flex",
ml: "auto",
}}
>
<IconButton sx={{ p: 0 }}>
<WalletIcon color={theme.palette.grey2.main} bgcolor="#F2F3F7" />
</IconButton>
<Box sx={{ ml: "8px", whiteSpace: "nowrap" }}>
<Typography
sx={{
fontSize: "12px",
lineHeight: "14px",
color: theme.palette.grey3.main,
}}
>Мой баланс</Typography>
<Typography variant="body2" color={theme.palette.brightPurple.main}>00.00 руб.</Typography>
</Box>
<CustomAvatar sx={{ ml: "27px", backgroundColor: theme.palette.orange.main, height: "36px", width: "36px" }} />
<IconButton
onClick={handleLogoutClick}
sx={{ ml: "20px", bgcolor: "#F2F3F7", borderRadius: "6px", height: "36px", width: "36px" }}
>
<LogoutIcon />
</IconButton>
</Box>
</Container>
) : (
<SectionWrapper
component="nav"
maxWidth="lg"
outerContainerSx={{
backgroundColor: theme.palette.lightPurple.main,
// borderBottom: "1px solid #E3E3E3",
}}
sx={{
px: "20px",
display: "flex",
justifyContent: "space-between",
height: "80px",
alignItems: "center",
}}
>
<Box
sx={{
display: "flex",
gap: "30px",
overflow: "hidden",
}}
>
<NavMenuItem text="Меню 1" />
<NavMenuItem text="Меню 2" isActive />
<NavMenuItem text="Меню 3" />
<NavMenuItem text="Меню 4" />
<NavMenuItem text="Меню 5" />
<NavMenuItem text="Меню 1" />
<NavMenuItem text="Меню 2" />
</Box>
<Button
variant="outlined"
sx={{
px: "18px",
py: "10px",
borderColor: "white",
borderRadius: "8px"
}}
>Личный кабинет</Button>
</SectionWrapper>
);
}
<LogoutIcon />
</IconButton>
</Box>
</Container>
) : (
<SectionWrapper
component="nav"
maxWidth="lg"
outerContainerSx={{
backgroundColor: theme.palette.lightPurple.main,
// borderBottom: "1px solid #E3E3E3",
}}
sx={{
px: "20px",
display: "flex",
justifyContent: "space-between",
height: "80px",
alignItems: "center",
}}
>
<Box
sx={{
display: "flex",
gap: "30px",
overflow: "hidden",
}}
>
<NavMenuItem text="Меню 1" />
<NavMenuItem text="Меню 2" isActive />
<NavMenuItem text="Меню 3" />
<NavMenuItem text="Меню 4" />
<NavMenuItem text="Меню 5" />
<NavMenuItem text="Меню 1" />
<NavMenuItem text="Меню 2" />
</Box>
<Button
variant="outlined"
sx={{
px: "18px",
py: "10px",
borderColor: "white",
borderRadius: "8px",
}}
>
Личный кабинет
</Button>
</SectionWrapper>
);
}

51
src/components/icons/WalletIcon.tsx
View File

@ -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 (
<Box
sx={{
bgcolor,
borderRadius: "6px",
height: "36px",
width: "36px",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<svg width="22" height="19" viewBox="0 0 22 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M19.5714 7.29857V2.29857C19.5714 1.50959 18.9318 0.869996 18.1429 0.869996L2.42857 0.869995C1.63959 0.869995 1 1.50959 1 2.29857L1 16.5843C1 17.3733 1.63959 18.0128 2.42857 18.0128L18.1429 18.0128C18.9318 18.0128 19.5714 17.3733 19.5714 16.5843V11.5843M20.901 6.58428H13.8571C12.2792 6.58428 11 7.86347 11 9.44142C11 11.0194 12.2792 12.2986 13.8571 12.2986H20.901C20.9557 12.2986 21 12.2542 21 12.1996V6.68329C21 6.62861 20.9557 6.58428 20.901 6.58428Z"
stroke={color}
strokeWidth="1.5"
/>
</svg>
</Box>
);
}
return (
<Box
sx={{
bgcolor,
borderRadius: "6px",
height: "36px",
width: "36px",
display: "flex",
justifyContent: "center",
alignItems: "center",
ml: "8px",
}}
>
<svg width="22" height="19" viewBox="0 0 22 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M19.5714 7.29857V2.29857C19.5714 1.50959 18.9318 0.869996 18.1429 0.869996L2.42857 0.869995C1.63959 0.869995 1 1.50959 1 2.29857L1 16.5843C1 17.3733 1.63959 18.0128 2.42857 18.0128L18.1429 18.0128C18.9318 18.0128 19.5714 17.3733 19.5714 16.5843V11.5843M20.901 6.58428H13.8571C12.2792 6.58428 11 7.86347 11 9.44142C11 11.0194 12.2792 12.2986 13.8571 12.2986H20.901C20.9557 12.2986 21 12.2542 21 12.1996V6.68329C21 6.62861 20.9557 6.58428 20.901 6.58428Z"
stroke={color}
strokeWidth="1.5"
/>
</svg>
</Box>
);
}

64
src/index.tsx
View File

@ -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 = () => {
</ThemeProvider>
}
/>
<Route path="/signin" element={<Signin />} />
<Route path="/signup" element={<Signup />} />
<Route
path="/signin"
element={
<PublicRoute>
<Signin />
</PublicRoute>
}
/>
<Route
path="/signup"
element={
<PublicRoute>
<Signup />
</PublicRoute>
}
/>
<Route
path="tariffs/*"
@ -60,7 +77,14 @@ const App = () => {
}
>
<Route path="time" element={<TariffsTime />} />
<Route path="volume" element={<TariffsVolume />} />
<Route
path="volume"
element={
<PublicRoute>
<TariffsVolume />
</PublicRoute>
}
/>
</Route>
<Route
@ -75,19 +99,24 @@ const App = () => {
<Route
path="/wallet"
element={
<>
<Navbar isLoggedIn={true} isCollapsed={!upMd} />
<Wallet />
</>
<PrivateRoute>
<>
<Navbar isLoggedIn={true} isCollapsed={!upMd} />
<Wallet />
</>
</PrivateRoute>
}
/>
<Route
path="/payment"
element={
<>
<Navbar isLoggedIn={true} isCollapsed={!upMd} />
<Payment />
</>
<PrivateRoute>
<>
<Navbar isLoggedIn={true} isCollapsed={!upMd} />
<Payment />
</>
</PrivateRoute>
}
/>
<Route
@ -119,10 +148,21 @@ const App = () => {
/>
<Route
path="/settings"
element={
<PrivateRoute>
<>
<Navbar isLoggedIn={true} isCollapsed={!upMd} />
<AccountSetup />
</>
</PrivateRoute>
}
/>
<Route
path="/basket"
element={
<>
<Navbar isLoggedIn={true} isCollapsed={!upMd} />
<AccountSetup />
<Basket />
</>
}
/>

32
src/pages/Basket.tsx Normal file
View File

@ -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 (
<SectionWrapper
maxWidth="lg"
sx={{
mt: "20px",
mb: upMd ? "90px" : "63px",
display: "flex",
flexDirection: "column",
}}
>
<Typography
component="div"
sx={{ fontWeight: "400px", fontSize: "12px", lineHeight: "14px", marginBottom: "19px" }}
>
Все тарифы —
<Typography component="span" sx={{ fontWeight: "400px", fontSize: "12px", color: "#C19AF5" }}>
Корзина
</Typography>
</Typography>
<Typography variant="h4" sx={{ marginBottom: "28px" }}>
Корзина
</Typography>
</SectionWrapper>
);
};

11
src/utils/routes/PrivateRoute.tsx Normal file
View File

@ -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 <Navigate to="/signup" state={{ from: location }} />;
};

2
src/utils/publicRoute.tsx → src/utils/routes/PublicRoute.tsx
View File

@ -5,7 +5,7 @@ export default ({ children }: any) => {
const location = useLocation();
//Если пользователь авторизован, перенаправляем его в приложение. Иначе пускаем куда хотел
if (localStorage.getItem("AT")) {
return <Navigate to="/users" state={{ from: location }} />;
return <Navigate to="/" state={{ from: location }} />;
}
return children;
};