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

+basket

Browse Source
This commit is contained in:
krokodilka 2023-03-20 16:50:01 +03:00
parent 5c0bface28
commit 55aa83a825
4 changed files with 121 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
.idea/workspace.xml
View File

@ -2,21 +2,9 @@
<project version="4">
<component name="ChangeListManager">
<list default="true" id="3a23e62a-21bd-4f51-a89e-05a6cca5b71f" name="Changes" comment="">
<change afterPath="$PROJECT_DIR$/src/pages/PaymentHistory/AccordionWrapper.tsx" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/pages/PaymentHistory/CustomAccordionPayHistory.tsx" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/pages/PaymentHistory/PaymentHistory.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/.gitignore" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/codeStyles/Project.xml" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/codeStyles/codeStyleConfig.xml" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/inspectionProfiles/Project_Default.xml" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/marketplace.iml" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/modules.xml" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/utils/privateRoute.tsx" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/utils/publicRoute.tsx" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/utils/routes/PrivateRoute.tsx" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/utils/routes/PublicRoute.tsx" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/Basket/AccordionWrapper.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/Basket/AccordionWrapper.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/Basket/Basket.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/Basket/Basket.tsx" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />

2
src/index.tsx
View File

@ -18,7 +18,7 @@ import {TariffsTime} from "./pages/Tariffs/TariffsTime";
import Signin from "./pages/auth/Signin";
import Signup from "./pages/auth/Signup";
import PaymentHistory from "./pages/PaymentHistory/PaymentHistory";
import {Basket} from "./pages/Basket";
import Basket from "./pages/Basket/Basket";
import Footer from "@components/Footer";
import Navbar from "@components/Navbar/Navbar";

43
src/pages/Basket/AccordionWrapper.tsx
View File

@ -1,33 +1,34 @@
import { Box } from "@mui/material";
import CustomAccordionBasket from "../../components/CustomAccordionBasket";
import CustomAccordionBasket from "@components/CustomAccordionBasket";
interface Props {
content: { title: string; data: [string, number][] }[];
content:{title:string, data:[string,number][]}[]
}
export default function AccordionWrapperBasket({ content }: Props) {
return (
<Box
sx={{
overflow: "hidden",
borderRadius: "12px",
boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
export default function AccordionWrapperBasket({content}:Props) {
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.0674749)`,
}}
>
{content.map((accordionItem, index) => (
<CustomAccordionBasket
key={index}
header={accordionItem.title}
dataSection={accordionItem.data}
totalPrice={3920}
/>
))}
</Box>
);
}}
>
{content.map((accordionItem, index) => (
<CustomAccordionBasket
key={index}
header={accordionItem.title}
dataSection={accordionItem.data}
totalPrice={3920}
/>
))}
</Box>
);
}

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

@ -1,101 +1,112 @@
import { Box, IconButton, Typography, useMediaQuery, useTheme } from "@mui/material";
import { Box, IconButton, Tabs, 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 ComplexNavText from "@components/ComplexNavText";
import SectionWrapper from "@components/SectionWrapper";
import TotalPrice from "@components/TotalPrice";
import AccordionWrapperBasket from "./AccordionWrapper";
import TotalPrice from "../../components/TotalPrice";
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 handleChange = (event: React.SyntheticEvent, newValue: number) => {
setTabIndex(newValue);
};
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: [
{
title:"Шаблонизатор",
data:[
["Дисковое хранилище 5 гб", 390],
["Подписка на месяц ", 290],
["200 бесплатных генераций", 590],
],
},
{
title: "Квиз конструктор",
data: [
["200 бесплатных генераций", 590]
]
},
{
title:"Квиз конструктор",
data:[
["Дисковое хранилище 5 гб", 200],
["Подписка на месяц ", 300],
["200 бесплатных генераций", 1000],
],
},
]}
/>
</TabPanel>
<TotalPrice />
</SectionWrapper>
);
]
},
]
export default function BasketPage() {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const [tabIndex, setTabIndex] = useState<number>(0);
const handleChange = (event: React.SyntheticEvent, newValue: number) => {
setTabIndex(newValue);
};
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 >
);
}