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

Array from

Browse Source
This commit is contained in:
ArtChaos189 2023-03-20 22:46:28 +03:00
parent 55aa83a825
commit b645fc8f77
3 changed files with 221 additions and 197 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

246
src/components/CustomAccordionBasket.tsx
View File

@ -1,118 +1,154 @@
import { Box, SvgIcon, Typography, useMediaQuery, useTheme } from "@mui/material";
import { useState } from "react";
import ClearIcon from '@mui/icons-material/Clear';
import ClearIcon from "@mui/icons-material/Clear";
import ExpandIcon from "./icons/ExpandIcon";
interface Props {
header: string;
totalPrice: number;
dataSection:[string, number][];
header: string;
totalPrice: number;
dataSection: [string, number][];
}
function TotalSum(mass:[string, number][]):number {
let sum:number = 0
mass.forEach(element => {
sum += element[1]
});
return sum
function TotalSum(mass: [string, number][]): number {
let sum: number = 0;
mass.forEach((element) => {
sum += element[1];
});
return sum;
}
export default function CustomAccordionBasket({ header, totalPrice, dataSection }: Props) {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const upSm = useMediaQuery(theme.breakpoints.up("sm"));
const [isExpanded, setIsExpanded] = useState<boolean>(false);
let sum:number = TotalSum(dataSection);
return (
<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}`,
}
}}
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const upSm = useMediaQuery(theme.breakpoints.up("sm"));
const [isExpanded, setIsExpanded] = useState<boolean>(false);
let sum: number = TotalSum(dataSection);
return (
<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",
px: "20px",
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,
}}
>
<Box
onClick={() => setIsExpanded(prev => !prev)}
sx={{
height: "72px",
px: "20px",
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,
}}
>{header}</Typography>
{header}
</Typography>
<Box sx={{display:"flex", justifyContent:"flex-end", height:"100%", alignItems:"center",gap:upSm ? "111px": "17px"}}>
<Typography sx={{color: theme.palette.grey3.main,fontSize:upSm ? "20px": "16px", fontWeight:500, }}>{sum} руб.</Typography>
<Box sx={{borderLeft:upSm ? "1px solid #9A9AAF": "none", paddingLeft:upSm ? "24px" : 0, height:"100%", display:"flex", justifyContent:"center", alignItems:"center"}}>
<ExpandIcon isExpanded={isExpanded} />
</Box>
</Box>
</Box>
{isExpanded &&
dataSection.map((item, index)=>{
return (
<Box
key={index}
sx={{
px: "20px",
py: upMd ? "25px" : undefined,
pt: upMd ? undefined : "15px",
pb: upMd ? undefined : "25px",
backgroundColor: "#F1F2F6",
display:"flex",
justifyContent:"space-between",
alignItems:"center",
gap:"15px",
}}
>
<Typography
sx={{
fontSize: upMd ? undefined : "16px",
lineHeight: upMd ? undefined : "19px",
color: theme.palette.grey3.main,
}}
>{item[0]}</Typography>
<Box sx={{display:"flex",
justifyContent:"space-between",
gap:"10px",
alignItems:"center",width:upSm ?"195px":"123px", marginRight:upSm ? "65px": 0}}>
<Typography sx={{color: theme.palette.grey3.main,fontSize:upSm ? "20px": "16px", fontWeight:500, }}>{item[1]} руб.</Typography>
{upSm ? <Typography sx={{color: theme.palette.text.secondary,borderBottom:`1px solid ${theme.palette.text.secondary}`,width:"max-content", lineHeight:"19px"}}>Удалить</Typography> : <SvgIcon component={ClearIcon}></SvgIcon>}
</Box>
</Box>
)
})
}
<Box
sx={{
display: "flex",
justifyContent: "flex-end",
height: "100%",
alignItems: "center",
gap: upSm ? "111px" : "17px",
}}
>
<Typography sx={{ color: theme.palette.grey3.main, fontSize: upSm ? "20px" : "16px", fontWeight: 500 }}>
{sum} руб.
</Typography>
<Box
sx={{
borderLeft: upSm ? "1px solid #9A9AAF" : "none",
paddingLeft: upSm ? "24px" : 0,
height: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<ExpandIcon isExpanded={isExpanded} />
</Box>
</Box>
);
}
</Box>
{isExpanded &&
dataSection.map((item, index) => {
return (
<Box
key={index}
sx={{
px: "20px",
py: upMd ? "25px" : undefined,
pt: upMd ? undefined : "15px",
pb: upMd ? undefined : "25px",
backgroundColor: "#F1F2F6",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
gap: "15px",
}}
>
<Typography
sx={{
fontSize: upMd ? undefined : "16px",
lineHeight: upMd ? undefined : "19px",
color: theme.palette.grey3.main,
}}
>
{item[0]}
</Typography>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
gap: "10px",
alignItems: "center",
width: upSm ? "195px" : "123px",
marginRight: upSm ? "65px" : 0,
}}
>
<Typography sx={{ color: theme.palette.grey3.main, fontSize: upSm ? "20px" : "16px", fontWeight: 500 }}>
{item[1]} руб.
</Typography>
{upSm ? (
<Typography
sx={{
color: theme.palette.text.secondary,
borderBottom: `1px solid ${theme.palette.text.secondary}`,
width: "max-content",
lineHeight: "19px",
}}
>
Удалить
</Typography>
) : (
<SvgIcon component={ClearIcon}></SvgIcon>
)}
</Box>
</Box>
);
})}
</Box>
);
}

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

@ -1,112 +1,68 @@
import { Box, IconButton, Tabs, Typography, useMediaQuery, useTheme } from "@mui/material";
import { Box, IconButton, Typography, useMediaQuery, useTheme } from "@mui/material";
import ComplexNavText from "../../components/ComplexNavText";
import SectionWrapper from "../../components/SectionWrapper";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import { useState } from "react";
import AccordionWrapperBasket from "./AccordionWrapper";
import TotalPrice from "../../components/TotalPrice";
import { basketStore } from "@root/stores/BasketStore";
interface TabPanelProps {
index: number;
value: number;
children?: React.ReactNode;
mt: string;
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>
);
return (
<Box hidden={index !== value} sx={{ mt }}>
{children}
</Box>
);
}
const contentBasket = [
{
title:"Шаблонизатор",
data:[
["Дисковое хранилище 5 гб", 390],
["Подписка на месяц ", 290],
["200 бесплатных генераций", 590]
]
},
{
title:"Квиз конструктор",
data:[
["Дисковое хранилище 5 гб", 200],
["Подписка на месяц ", 300],
["200 бесплатных генераций", 1000],
]
},
]
export default function BasketPage() {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const [tabIndex, setTabIndex] = useState<number>(0);
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const [tabIndex, setTabIndex] = useState<number>(0);
const { templ, squiz } = basketStore();
const handleChange = (event: React.SyntheticEvent, newValue: number) => {
setTabIndex(newValue);
};
console.log(Array.from(templ));
const handleChange = (event: React.SyntheticEvent, newValue: number) => {
setTabIndex(newValue);
};
return (
<SectionWrapper
maxWidth="lg"
sx={{
mt: upMd ? "25px" : "20px",
mb: upMd ? "70px" : "37px",
}}
return (
<SectionWrapper
maxWidth="lg"
sx={{
mt: upMd ? "25px" : "20px",
mb: upMd ? "70px" : "37px",
}}
>
{upMd &&
<ComplexNavText text1="Все тарифы — " text2="Корзина" />
}
<Box
sx={{
mt: "20px",
mb: upMd ? "40px" : "20px",
display: "flex",
gap: "10px",
}}
>
{!upMd &&
<IconButton sx={{ p: 0, height: "28px", width: "28px", color: "black" }}>
<ArrowBackIcon />
</IconButton>
}
<Typography variant="h4">Вопросы и ответы</Typography>
</Box>
<TabPanel value={tabIndex} index={0} mt={upMd ? "27px" : "10px"}>
<AccordionWrapperBasket
content={[
{
title:"Шаблонизатор",
data:[
["Дисковое хранилище 5 гб", 390],
["Подписка на месяц ", 290],
["200 бесплатных генераций", 590]
]
},
{
title:"Квиз конструктор",
data:[
["Дисковое хранилище 5 гб", 200],
["Подписка на месяц ", 300],
["200 бесплатных генераций", 1000],
]
},
]}
/>
</TabPanel>
<TotalPrice/>
</SectionWrapper >
);
{upMd && <ComplexNavText text1="Все тарифы — " text2="Корзина" />}
<Box
sx={{
mt: "20px",
mb: upMd ? "40px" : "20px",
display: "flex",
gap: "10px",
}}
>
{!upMd && (
<IconButton sx={{ p: 0, height: "28px", width: "28px", color: "black" }}>
<ArrowBackIcon />
</IconButton>
)}
<Typography variant="h4">Корзина</Typography>
</Box>
<TabPanel value={tabIndex} index={0} mt={upMd ? "27px" : "10px"}>
{/* <AccordionWrapperBasket content={basket} /> */}
</TabPanel>
<TotalPrice />
</SectionWrapper>
);
}

32
src/stores/BasketStore.ts Normal file
View File

@ -0,0 +1,32 @@
import { create } from "zustand";
import { persist } from "zustand/middleware";
export const basketStore = create<any>()(
persist(
(set, get) => ({
templ: {
id1: {
title: "Шаблонизатор",
data: [
["Дисковое хранилище 5 гб", 390],
["Подписка на месяц ", 290],
["200 бесплатных генераций", 590],
],
},
},
squiz: {
id2: {
title: "Квиз конструктор",
data: [
["Дисковое хранилище 5 гб", 200],
["Подписка на месяц ", 300],
["200 бесплатных генераций", 1000],
],
},
},
}),
{
name: "basket",
}
)
);