From b645fc8f77c438671aac8c395269eec54c3dbb1a Mon Sep 17 00:00:00 2001 From: ArtChaos189 Date: Mon, 20 Mar 2023 22:46:28 +0300 Subject: [PATCH] Array from --- src/components/CustomAccordionBasket.tsx | 246 +++++++++++++---------- src/pages/Basket/Basket.tsx | 140 +++++-------- src/stores/BasketStore.ts | 32 +++ 3 files changed, 221 insertions(+), 197 deletions(-) create mode 100644 src/stores/BasketStore.ts diff --git a/src/components/CustomAccordionBasket.tsx b/src/components/CustomAccordionBasket.tsx index afe1e1a..260295c 100644 --- a/src/components/CustomAccordionBasket.tsx +++ b/src/components/CustomAccordionBasket.tsx @@ -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(false); - let sum:number = TotalSum(dataSection); - - return ( - (false); + let sum: number = TotalSum(dataSection); + + return ( + + setIsExpanded((prev) => !prev)} + sx={{ + height: "72px", + px: "20px", + + display: "flex", + alignItems: "center", + justifyContent: "space-between", + cursor: "pointer", + userSelect: "none", + }} + > + - setIsExpanded(prev => !prev)} - sx={{ - height: "72px", - px: "20px", - - display: "flex", - alignItems: "center", - justifyContent: "space-between", - cursor: "pointer", - userSelect: "none", - }} - > - {header} - + {header} + - - - {sum} руб. - - - - - - {isExpanded && - dataSection.map((item, index)=>{ - return ( - - {item[0]} - - {item[1]} руб. - {upSm ? Удалить : } - - - - ) - }) - - } + + + {sum} руб. + + + + - ); -} \ No newline at end of file + + {isExpanded && + dataSection.map((item, index) => { + return ( + + + {item[0]} + + + + {item[1]} руб. + + {upSm ? ( + + Удалить + + ) : ( + + )} + + + ); + })} + + ); +} diff --git a/src/pages/Basket/Basket.tsx b/src/pages/Basket/Basket.tsx index 3a19c46..fc2b8f5 100644 --- a/src/pages/Basket/Basket.tsx +++ b/src/pages/Basket/Basket.tsx @@ -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 ( - - ); + return ( + + ); } -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(0); - const theme = useTheme(); - const upMd = useMediaQuery(theme.breakpoints.up("md")); - const [tabIndex, setTabIndex] = useState(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 ( - - {upMd && - - } - - {!upMd && - - - - } - Вопросы и ответы - - - - - - - ); + {upMd && } + + {!upMd && ( + + + + )} + Корзина + + + {/* */} + + + + ); } - diff --git a/src/stores/BasketStore.ts b/src/stores/BasketStore.ts new file mode 100644 index 0000000..ad5a078 --- /dev/null +++ b/src/stores/BasketStore.ts @@ -0,0 +1,32 @@ +import { create } from "zustand"; +import { persist } from "zustand/middleware"; + +export const basketStore = create()( + persist( + (set, get) => ({ + templ: { + id1: { + title: "Шаблонизатор", + data: [ + ["Дисковое хранилище 5 гб", 390], + ["Подписка на месяц ", 290], + ["200 бесплатных генераций", 590], + ], + }, + }, + squiz: { + id2: { + title: "Квиз конструктор", + data: [ + ["Дисковое хранилище 5 гб", 200], + ["Подписка на месяц ", 300], + ["200 бесплатных генераций", 1000], + ], + }, + }, + }), + { + name: "basket", + } + ) +);