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

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

@ -3,7 +3,6 @@ import SectionWrapper from "../SectionWrapper";
import MenuIcon from "@mui/icons-material/Menu";
import PenaLogo from "../PenaLogo";
interface Props {
isLoggedIn: boolean;
}
@ -31,7 +30,7 @@ export default function NavbarCollapsed({ isLoggedIn }: Props) {
}}
>
<PenaLogo width={100} />
<IconButton sx={{ p: 0, height: "30px", width: "30px", color: theme.palette.primary.main }}>
<IconButton sx={{ p: 0, height: "300px", width: "30px", color: theme.palette.primary.main }}>
<MenuIcon sx={{ height: "30px", width: "30px" }} />
</IconButton>
</SectionWrapper>

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

@ -7,7 +7,9 @@ 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;
@ -59,6 +61,9 @@ export default function NavbarFull({ isLoggedIn }: Props) {
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>
@ -69,8 +74,12 @@ export default function NavbarFull({ isLoggedIn }: Props) {
lineHeight: "14px",
color: theme.palette.grey3.main,
}}
>Мой баланс</Typography>
<Typography variant="body2" color={theme.palette.brightPurple.main}>00.00 руб.</Typography>
>
Мой баланс
</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
@ -118,9 +127,11 @@ export default function NavbarFull({ isLoggedIn }: Props) {
px: "18px",
py: "10px",
borderColor: "white",
borderRadius: "8px"
borderRadius: "8px",
}}
>Личный кабинет</Button>
>
Личный кабинет
</Button>
</SectionWrapper>
);
}

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

@ -1,13 +1,11 @@
import { Box } from "@mui/material";
interface Props {
color: string;
bgcolor: string;
}
export default function WalletIcon({ color, bgcolor }: Props) {
return (
<Box
sx={{
@ -18,6 +16,7 @@ export default function WalletIcon({ color, bgcolor }: Props) {
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">

46
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={
<PrivateRoute>
<>
<Navbar isLoggedIn={true} isCollapsed={!upMd} />
<Wallet />
</>
</PrivateRoute>
}
/>
<Route
path="/payment"
element={
<PrivateRoute>
<>
<Navbar isLoggedIn={true} isCollapsed={!upMd} />
<Payment />
</>
</PrivateRoute>
}
/>
<Route
@ -120,10 +149,21 @@ const App = () => {
<Route
path="/settings"
element={
<PrivateRoute>
<>
<Navbar isLoggedIn={true} isCollapsed={!upMd} />
<AccountSetup />
</>
</PrivateRoute>
}
/>
<Route
path="/basket"
element={
<>
<Navbar isLoggedIn={true} isCollapsed={!upMd} />
<Basket />
</>
}
/>
</Routes>

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;
};