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

Drawers cerate

Browse Source
This commit is contained in:
ArtChaos189 2023-03-24 18:30:58 +03:00
parent 0f9a0c4f9f
commit e39f28e269
7 changed files with 363 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/CustomRadioButtons.tsx
View File

@ -20,7 +20,7 @@ export const CustomRadioButtons: React.FC<Props> = ({ setType, _mocsk_ }) => {
<List
sx={{
marginLeft: "-10px",
width: "430px",
width: upSm ? "430px" : "auto",
display: "flex",
fontWeight: "500",
fontSize: " 16px",

163
src/components/Drawer/CustomWrapperDrawer.tsx Normal file
View File

@ -0,0 +1,163 @@
import { useState } from "react";
import { Box, SvgIcon, Typography, useMediaQuery, useTheme } from "@mui/material";
import ClearIcon from "@mui/icons-material/Clear";
import { basketStore } from "@root/stores/BasketStore";
interface Props {
type: string;
content: {
name: string;
desc: string;
id: string;
privelegeid: string;
amount: number;
price: number;
}[];
}
export default function CustomWrapperDrawer({ type, content }: Props) {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const upSm = useMediaQuery(theme.breakpoints.up("sm"));
const [isExpanded, setIsExpanded] = useState<boolean>(false);
const { remove } = basketStore();
const totalSum = Object.values(content).reduce((accamulator, { price }) => (accamulator += price), 0);
const name = Object.values(content).map(({ name }) => name);
return (
<Box
sx={{
overflow: "hidden",
borderRadius: "12px",
boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
0px 2.76726px 8.55082px rgba(210, 208, 225, 0.067
4749)`,
}}
>
<Box
sx={{
backgroundColor: "white",
"&:first-of-type": {
borderTopLeftRadius: "12px",
borderTopRightRadius: "12px",
},
"&:last-of-type": {
borderBottomLeftRadius: "12px",
borderBottomRightRadius: "12px",
},
"&:not(:last-of-type)": {
borderBottom: `1px solid ${theme.palette.grey2.main}`,
},
}}
>
<Box
onClick={() => setIsExpanded((prev) => !prev)}
sx={{
height: "72px",
display: "flex",
alignItems: "center",
justifyContent: "space-between",
cursor: "pointer",
userSelect: "none",
}}
>
<Typography
sx={{
fontSize: upMd ? "20px" : "16px",
lineHeight: upMd ? undefined : "19px",
fontWeight: 500,
color: theme.palette.text.secondary,
px: 0,
}}
>
{name[0]}
</Typography>
<Box
sx={{
display: "flex",
justifyContent: "flex-end",
height: "100%",
alignItems: "center",
}}
>
<Typography
sx={{ pr: "11px", color: theme.palette.grey3.main, fontSize: upSm ? "20px" : "16px", fontWeight: 500 }}
>
{totalSum} руб.
</Typography>
<Box
sx={{
paddingLeft: upSm ? "24px" : 0,
height: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
></Box>
</Box>
</Box>
{isExpanded &&
Object.values(content).map(({ desc, id, privelegeid, amount, price }, index) => (
<Box
key={index}
sx={{
py: upMd ? "10px" : undefined,
pt: upMd ? undefined : "15px",
pb: upMd ? undefined : "20px",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
gap: "15px",
}}
>
<Typography
sx={{
width: "200px",
whiteSpace: "nowrap",
fontSize: upMd ? undefined : "16px",
lineHeight: upMd ? undefined : "19px",
color: theme.palette.grey3.main,
}}
>
{desc}
</Typography>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
gap: "10px",
alignItems: "center",
}}
>
<Typography
sx={{
color: theme.palette.grey3.main,
fontSize: "20px",
fontWeight: 500,
}}
>
{price} руб.
</Typography>
<SvgIcon
sx={{ cursor: "pointer", color: "#7E2AEA" }}
onClick={() => remove(type, id)}
component={ClearIcon}
/>
</Box>
</Box>
))}
</Box>
</Box>
);
}

85
src/components/Drawer/DrawerTotalPrice.tsx Normal file
View File

@ -0,0 +1,85 @@
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import { useNavigate } from "react-router-dom";
import CustomButton from "../CustomButton";
export const DrawerTotalPrice = () => {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const navigate = useNavigate();
return (
<Box
sx={{
mt: "40px",
pt: upMd ? "30px" : undefined,
borderTop: upMd ? `1px solid ${theme.palette.grey2.main}` : undefined,
}}
>
<Box
sx={{
width: upMd ? "100%" : undefined,
display: "flex",
flexWrap: "wrap",
flexDirection: "column",
}}
>
<Typography variant="h4" mb={upMd ? "18px" : "30px"}>
Итоговая цена
</Typography>
<Typography color={theme.palette.grey3.main}>
Текст-заполнитель — это текст, который имеет Текст-заполнитель — это текст, который имеет Текст-заполнитель —
это текст, который имеет Текст-заполнитель — это текст, который имеет Текст-заполнитель
</Typography>
</Box>
<Box
sx={{
color: theme.palette.grey3.main,
pb: "100px",
pt: "38px",
pl: upMd ? "20px" : undefined,
}}
>
<Box
sx={{
display: "flex",
flexDirection: upMd ? "column" : "row",
alignItems: upMd ? "start" : "center",
mt: upMd ? "10px" : "30px",
gap: "15px",
}}
>
<Typography
color={theme.palette.orange.main}
sx={{
textDecoration: "line-through",
order: upMd ? 1 : 2,
}}
>
20 190 руб.
</Typography>
<Typography
variant="p1"
sx={{
fontWeight: 500,
fontSize: "26px",
lineHeight: "31px",
order: upMd ? 2 : 1,
}}
>
6 380 руб.
</Typography>
</Box>
<CustomButton
variant="contained"
onClick={() => navigate("/basket")}
sx={{
mt: "25px",
backgroundColor: theme.palette.brightPurple.main,
}}
>
Оплатить
</CustomButton>
</Box>
</Box>
);
};

86
src/components/Drawer/Drawers.tsx Normal file
View File

@ -0,0 +1,86 @@
import { Typography, Drawer, useMediaQuery, useTheme, Box, IconButton, SvgIcon } from "@mui/material";
import { IconsCreate } from "@root/lib/IconsCreate";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import ClearIcon from "@mui/icons-material/Clear";
import { basketStore } from "@root/stores/BasketStore";
import { useState } from "react";
import BasketIcon from "../../assets/Icons/BasketIcon.svg";
import SectionWrapper from "../SectionWrapper";
import React from "react";
import CustomWrapperDrawer from "./CustomWrapperDrawer";
import { DrawerTotalPrice } from "./DrawerTotalPrice";
interface TabPanelProps {
index: number;
value: number;
children?: React.ReactNode;
mt: string;
}
function TabPanel({ index, value, children, mt }: TabPanelProps) {
return (
<Box hidden={index !== value} sx={{ mt }}>
{children}
</Box>
);
}
export const Drawers = () => {
const [tabIndex, setTabIndex] = useState<number>(0);
const { templ, squiz, reducer, open, openDrawer } = basketStore();
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
return (
<Typography component="div">
<Typography onClick={open(true)}>
<IconsCreate svg={BasketIcon} bgcolor="#F2F3F7" />
</Typography>
<Drawer anchor={"right"} open={openDrawer} onClose={open(false)}>
<SectionWrapper
maxWidth="lg"
sx={{
pl: "0px",
pr: "0px",
width: "450px",
}}
>
<Box
sx={{
width: "100%",
pt: "20px",
pb: "20px",
display: "flex",
justifyContent: "space-between",
bgcolor: "#F2F3F7",
gap: "10px",
pl: "20px",
pr: "20px",
}}
>
{!upMd && (
<IconButton sx={{ p: 0, height: "28px", width: "28px", color: "black" }}>
<ArrowBackIcon />
</IconButton>
)}
<Typography component="div" sx={{ fontSize: "18px", lineHeight: "21px", font: "Rubick" }}>
Корзина
</Typography>
<SvgIcon onClick={open(false)} sx={{ cursor: "pointer" }} component={ClearIcon} />
</Box>
<Box sx={{ pl: "20px", pr: "20px" }}>
<TabPanel value={tabIndex} index={0} mt={"10px"}>
{Object.keys(templ).length > 0 ? <CustomWrapperDrawer type="templ" content={templ} /> : <></>}
{Object.keys(squiz).length > 0 ? <CustomWrapperDrawer type="squiz" content={squiz} /> : <></>}
{Object.keys(reducer).length > 0 ? <CustomWrapperDrawer type="reducer" content={reducer} /> : <></>}
</TabPanel>
<DrawerTotalPrice />
</Box>
</SectionWrapper>
</Drawer>
</Typography>
);
};

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

@ -1,20 +1,19 @@
import Icon from "@mui/material/Icon";
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { Box, Button, Container, IconButton, Typography, useTheme } from "@mui/material";
import { Drawers } from "../Drawer/Drawers";
import NavMenuItem from "../NavMenuItem";
import SectionWrapper from "../SectionWrapper";
import { basketStore } from "@root/stores/BasketStore";
import { IconsCreate } from "@root/lib/IconsCreate";
import { basketStore } from "@stores/BasketStore";
import { authStore } from "@stores/makeRequest";
import BasketIcon from "../../assets/Icons/BasketIcon.svg";
import LogoutIcon from "../icons/LogoutIcon";
import WalletIcon from "../icons/WalletIcon";
import CustomAvatar from "./Avatar";
import PenaLogo from "../PenaLogo";
import Icon from "@mui/material/Icon";
import { useLocation } from "react-router-dom";
interface Props {
isLoggedIn: boolean;
@ -22,15 +21,18 @@ interface Props {
export default function NavbarFull({ isLoggedIn }: Props) {
const theme = useTheme();
const navigate = useNavigate();
const { clearToken } = authStore();
const [basketQuantity, setBasketQuantity] = useState<number>(0);
const location = useLocation();
const { templ, squiz, reducer } = basketStore();
const { templ, squiz, reducer, open } = basketStore();
useEffect(() => {
setBasketQuantity(Object.keys(templ).length + Object.keys(squiz).length);
});
if (location.pathname === "/basket") {
open(false)();
}
}, [templ, squiz, location.pathname, open]);
async function handleLogoutClick() {
clearToken();
@ -73,9 +75,9 @@ export default function NavbarFull({ isLoggedIn }: Props) {
ml: "auto",
}}
>
<IconButton onClick={() => navigate("/basket")} sx={{ p: 0 }}>
<IconButton sx={{ p: 0 }}>
<Typography component="div" sx={{ position: "absolute" }}>
<IconsCreate svg={BasketIcon} bgcolor="#F2F3F7" />
<Drawers />
</Typography>
{basketQuantity && (
<Icon

16
src/pages/Basket/Basket.tsx
View File

@ -1,11 +1,12 @@
import { Box, IconButton, Typography, useMediaQuery, useTheme } from "@mui/material";
import SectionWrapper from "@components/SectionWrapper";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import { useState, useEffect } from "react";
import { useState } from "react";
import TotalPrice from "@components/TotalPrice";
import { basketStore } from "@root/stores/BasketStore";
import CustomWrapper from "./CustomWrapper";
import { StepperSquiz } from "@root/components/StepperSquiz";
import { useLocation } from "react-router-dom";
interface TabPanelProps {
index: number;
@ -24,16 +25,19 @@ function TabPanel({ index, value, children, mt }: TabPanelProps) {
export const Basket = () => {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const [tabIndex, setTabIndex] = useState<number>(0);
const { templ, squiz, reducer } = basketStore();
const [tabIndex, setTabIndex] = useState<number>(0);
const location = useLocation();
const { templ, squiz, reducer, open } = basketStore();
const handleChange = (event: React.SyntheticEvent, newValue: number) => {
setTabIndex(newValue);
};
open(false);
return (
<SectionWrapper
maxWidth="lg"
@ -56,7 +60,9 @@ export const Basket = () => {
<ArrowBackIcon />
</IconButton>
)}
<Typography variant="h4">Корзина</Typography>
<Typography component="h4" variant="h4">
Корзина
</Typography>
</Box>
<TabPanel value={tabIndex} index={0} mt={upMd ? "27px" : "10px"}>
{Object.keys(templ).length > 0 ? <CustomWrapper type="templ" content={templ} /> : <></>}

5
src/stores/BasketStore.ts
View File

@ -39,6 +39,7 @@ export const basketStore = create<any>()((set, get) => ({
},
},
reducer: {},
openDrawer: false,
add: ({ id, obj, type }: any) => {
const store: any = get()[type] || {};
const newStore = {
@ -62,4 +63,8 @@ export const basketStore = create<any>()((set, get) => ({
set({ [type]: newStore });
},
open: (boolean: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => {
set(() => ({ openDrawer: boolean }));
},
}));