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

Заполнил вопросы, адаптив

Browse Source
This commit is contained in:
ArtChaos189 2024-01-15 14:41:23 +03:00
parent 13820d6652
commit 5b42706455
3 changed files with 285 additions and 263 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

183
src/components/CustomAccordion.tsx
View File

@ -1,11 +1,11 @@
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material" import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import { useState } from "react" import { useState } from "react";
import ExpandIcon from "./icons/ExpandIcon" import ExpandIcon from "./icons/ExpandIcon";
import type { ReactNode } from "react" import type { ReactNode } from "react";
interface Props { interface Props {
header: ReactNode; header: ReactNode;
text: string; text: ReactNode;
divide?: boolean; divide?: boolean;
price?: number; price?: number;
last?: boolean; last?: boolean;
@ -13,91 +13,94 @@ interface Props {
} }
export default function CustomAccordion({ header, text, divide = false, price, last, first }: Props) { export default function CustomAccordion({ header, text, divide = false, price, last, first }: Props) {
const theme = useTheme() const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md")) const upMd = useMediaQuery(theme.breakpoints.up("md")); //900
const upXs = useMediaQuery(theme.breakpoints.up("xs")) const upXs = useMediaQuery(theme.breakpoints.up("xs")); //300
const [isExpanded, setIsExpanded] = useState<boolean>(false) const [isExpanded, setIsExpanded] = useState<boolean>(false);
return ( console.log(upXs);
<Box
sx={{
backgroundColor: "white",
borderTopLeftRadius: first ? "12px" : "0",
borderTopRightRadius: first ? "12px" : "0",
borderBottomLeftRadius: last ? "12px" : "0",
borderBottomRightRadius: last ? "12px" : "0",
borderBottom: `1px solid ${theme.palette.gray.main}`,
...(last && { borderBottom: "none" }), return (
}} <Box
> sx={{
<Box backgroundColor: "white",
onClick={() => setIsExpanded((prev) => !prev)} borderTopLeftRadius: first ? "12px" : "0",
sx={{ borderTopRightRadius: first ? "12px" : "0",
minHeight: "72px", borderBottomLeftRadius: last ? "12px" : "0",
px: "20px", borderBottomRightRadius: last ? "12px" : "0",
display: "flex", borderBottom: `1px solid ${theme.palette.gray.main}`,
alignItems: "stretch",
justifyContent: "space-between", ...(last && { borderBottom: "none" }),
cursor: "pointer", }}
userSelect: "none", >
rowGap: "10px", <Box
flexDirection: upXs ? undefined : "column", onClick={() => setIsExpanded((prev) => !prev)}
}} sx={{
> minHeight: "72px",
<Box px: "20px",
sx={{ display: "flex",
display: "flex", alignItems: "stretch",
alignItems: "center", justifyContent: "space-between",
width: "100%", cursor: "pointer",
fontSize: upMd ? undefined : "16px", userSelect: "none",
lineHeight: upMd ? undefined : "19px", rowGap: "10px",
fontWeight: 500, flexDirection: upXs ? undefined : "column",
color: theme.palette.gray.dark, }}
px: 0, >
}} <Box
> sx={{
{header} display: "flex",
</Box> alignItems: "center",
<Box width: "100%",
sx={{ fontSize: upMd ? undefined : "16px",
pl: "20px", lineHeight: upMd ? undefined : "19px",
width: "52px", p: !upMd ? "17px 0 20px" : undefined,
display: "flex", fontWeight: 500,
alignItems: "center", color: theme.palette.gray.dark,
justifyContent: "center", px: 0,
borderLeft: divide ? "1px solid #000000" : "none", }}
}} >
> {header}
<ExpandIcon isExpanded={isExpanded} /> </Box>
</Box> <Box
</Box> sx={{
{isExpanded && ( pl: "20px",
<Box width: "52px",
sx={{ display: "flex",
display: "flex", alignItems: "center",
justifyContent: "space-between", justifyContent: "center",
px: "20px", borderLeft: divide ? "1px solid #000000" : "none",
py: upMd ? "25px" : undefined, }}
pt: upMd ? undefined : "15px", >
pb: upMd ? undefined : "25px", <ExpandIcon isExpanded={isExpanded} />
backgroundColor: "#F1F2F6", </Box>
}} </Box>
> {isExpanded && (
<Typography <Box
sx={{ sx={{
fontSize: upMd ? undefined : "16px", display: "flex",
lineHeight: upMd ? undefined : "19px", justifyContent: "space-between",
color: theme.palette.gray.dark, px: "20px",
}} py: upMd ? "25px" : undefined,
> pt: upMd ? undefined : "15px",
{text} pb: upMd ? undefined : "25px",
</Typography> backgroundColor: "#F1F2F6",
<Typography sx={{ display: price ? "block" : "none", fontSize: "18px", mr: "120px" }}> }}
{price} руб. >
</Typography> <Typography
</Box> sx={{
)} fontSize: upMd ? undefined : "16px",
</Box> lineHeight: upMd ? undefined : "19px",
) color: theme.palette.gray.dark,
}}
>
{text}
</Typography>
<Typography sx={{ display: price ? "block" : "none", fontSize: "18px", mr: "120px" }}>
{price} руб.
</Typography>
</Box>
)}
</Box>
);
} }

42
src/pages/Faq/AccordionWrapper.tsx
View File

@ -1,24 +1,34 @@
import { Box } from "@mui/material" import React from "react";
import { Box } from "@mui/material";
import CustomAccordion from "@components/CustomAccordion" import CustomAccordion from "@components/CustomAccordion";
import { cardShadow } from "@root/utils/theme" import { cardShadow } from "@root/utils/theme";
interface Props { interface Props {
content: [string, string][]; content: [string, string][];
} }
export default function AccordionWrapper({ content }: Props) { export default function AccordionWrapper({ content }: Props) {
return ( return (
<Box <Box
sx={{ sx={{
overflow: "hidden", overflow: "hidden",
borderRadius: "12px", borderRadius: "12px",
boxShadow: cardShadow, boxShadow: cardShadow,
}} }}
> >
{content.map((accordionItem, index) => ( {content.map((accordionItem, index) => (
<CustomAccordion key={index} header={accordionItem[0]} text={accordionItem[1]} /> <CustomAccordion
))} key={index}
</Box> header={accordionItem[0]}
) text={accordionItem[1].split("\n").map((line, index) => (
<React.Fragment key={index}>
{line}
<br />
</React.Fragment>
))}
/>
))}
</Box>
);
} }

323
src/pages/Faq/Faq.tsx
View File

@ -1,162 +1,171 @@
import { IconButton, useMediaQuery, useTheme } from "@mui/material" import { IconButton, useMediaQuery, useTheme } from "@mui/material";
import { Select } from "@root/components/Select" import { Select } from "@root/components/Select";
import { Box } from "@mui/material" import { Box } from "@mui/material";
import { Typography } from "@mui/material" import { Typography } from "@mui/material";
import { useState } from "react" import { useState } from "react";
import SectionWrapper from "../../components/SectionWrapper" import SectionWrapper from "../../components/SectionWrapper";
import AccordionWrapper from "./AccordionWrapper" import AccordionWrapper from "./AccordionWrapper";
import ArrowBackIcon from "@mui/icons-material/ArrowBack" import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import { Tabs } from "@root/components/Tabs" import { Tabs } from "@root/components/Tabs";
import { useHistoryTracker } from "@root/utils/hooks/useHistoryTracker" import { useHistoryTracker } from "@root/utils/hooks/useHistoryTracker";
const subPages = ["Pena hub", "Шаблоны", "Опросы", "Ссылки", "Финансовые", "Юридические", "Юридические лица"] const subPages = ["Pena hub", "Шаблоны", "Опросы", "Ссылки", "Финансовые", "Юридические", "Юридические лица"];
export default function Faq() { export default function Faq() {
const theme = useTheme() const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md")) const upMd = useMediaQuery(theme.breakpoints.up("md"));
const isMobile = useMediaQuery(theme.breakpoints.down(550)) const isMobile = useMediaQuery(theme.breakpoints.down(550));
const isTablet = useMediaQuery(theme.breakpoints.down(1000)) const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const [tabIndex, setTabIndex] = useState<number>(0) const [tabIndex, setTabIndex] = useState<number>(0);
const [selectedItem, setSelectedItem] = useState<number>(0) const [selectedItem, setSelectedItem] = useState<number>(0);
const handleCustomBackNavigation = useHistoryTracker() const handleCustomBackNavigation = useHistoryTracker();
return ( return (
<SectionWrapper <SectionWrapper
maxWidth="lg" maxWidth="lg"
sx={{ sx={{
mt: upMd ? "25px" : "20px", mt: upMd ? "25px" : "20px",
px: isTablet ? (isMobile ? "18px" : "40px") : "20px", px: isTablet ? (isMobile ? "18px" : "40px") : "20px",
mb: upMd ? "70px" : "37px", mb: upMd ? "70px" : "37px",
}} }}
> >
<Box <Box
sx={{ sx={{
mt: "20px", mt: "20px",
mb: isTablet ? "38px" : "20px", mb: isTablet ? "38px" : "20px",
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
gap: "10px", gap: "10px",
}} }}
> >
{isMobile && ( {isMobile && (
<IconButton onClick={handleCustomBackNavigation} sx={{ p: 0, height: "28px", width: "28px", color: "black" }}> <IconButton onClick={handleCustomBackNavigation} sx={{ p: 0, height: "28px", width: "28px", color: "black" }}>
<ArrowBackIcon /> <ArrowBackIcon />
</IconButton> </IconButton>
)} )}
<Typography <Typography
sx={{ sx={{
fontSize: isMobile ? "24px" : "36px", fontSize: isMobile ? "24px" : "36px",
fontWeight: "500", fontWeight: "500",
}} }}
> >
Вопросы и ответы Вопросы и ответы
</Typography> </Typography>
</Box> </Box>
<Box sx={{ marginBottom: isMobile ? "20px" : "0px" }}> <Box sx={{ marginBottom: isMobile ? "20px" : "0px" }}>
{isMobile ? ( {isMobile ? (
<Select items={subPages} selectedItem={selectedItem} setSelectedItem={setSelectedItem} /> <Select items={subPages} selectedItem={selectedItem} setSelectedItem={setSelectedItem} />
) : ( ) : (
<Tabs items={subPages} selectedItem={tabIndex} setSelectedItem={setTabIndex} /> <Tabs items={subPages} selectedItem={tabIndex} setSelectedItem={setTabIndex} />
)} )}
</Box> </Box>
<TabPanel value={tabIndex} index={0} mt={upMd ? "42px" : "10px"}> <TabPanel value={tabIndex} index={0} mt={upMd ? "42px" : "10px"}>
<AccordionWrapper <AccordionWrapper
content={[ content={[
[ [
"Что такое корзина?", "Что такое бесплатный тариф?",
"Корзина это место где хранятся выбранные и собранные вами тарифы,оплатить можно в 1 клик или удалить не актуальные.", "Это тариф который доступен каждому пользователю после регистрации, он позволяет пользоваться всеми нашими продуктами 14 дней бесплатно, что позволит в полной мере понять ценность наших сервисов.",
], ],
[ [
"Какие функции я могу использовать бесплатно?", "Что такое PenaHub? Куда я попал?",
"Все функции и все продукты, но с ограничением бесплатного периода", "Это личный кабинет по управлению всеми продуктами экосистемы PenaHub, тут вы можете приобрести любой тип услуги, любого нашего продукта, пройти верификацию как НКО или Юр лицо и получить акт оказанных услуг, так же только в рамках PenaHub вам доступна кастомная настройка тарифа (Мой Тариф).",
], ],
[ [
"Чем могут помочь ваши продукты, конкретно в моём бизнесе?", "Как у вас формируется скидка?",
"Вы можете написать в тех поддержку и наши опытные операторы, проконсультируют вас по этому и многим другим вопросам, при наличии таковых.", `У нашей скидочной системы 4 уровня: \n 1 уровень. Тариф: чем объемнее тариф, тем больше скидка. \n2 уровень Продукт: если вы через “Мой тариф” берете больше одного вида тарифов,то в зависимости от итоговой суммы в рамках одного продукта, вы получаете увеличение итоговой скидки.\n3 уровень. Корзина: Чем больше товаров в корзине,не важно каких,то в зависимости от суммы получаете увеличенную скидку на разовую покупку.\n4 уровень. Лояльность: считается сумма покупок за всю историю вашего аккаунта и появляется скидка за лояльность,она действует на любые тарифы экосистемы независимо от остальных уровней скидки.`,
], ],
[ [
"Можно ли использовать все ваши продукты не имея в штате программиста?", "Как у вас формируется скидка для НКО?",
"Абсолютно все наши продукты работают по принципу no-code.", "Скидка для НКО всегда равна 60%, так как мы проводим политику социальной ответственности.",
], ],
]} ["Где можно пройти верификацию как НКО или юр лицо?", "Вкладка профиль."],
/> [
</TabPanel> "Хочу предложить крутую идею или предложение о сотрудничестве, как это сделать?",
<TabPanel value={tabIndex} index={1} mt={upMd ? "27px" : "10px"}> "Напишите в техническую поддержку и ваша заявка будет прочитана руководством, со 100% вероятностью.",
<AccordionWrapper ],
content={[ [
["Placeholder", "Placeholder"], "Хочу заказать у вас разработку, как это сделать?",
["Placeholder", "Placeholder"], "Заказать разработку полного цикла или отдельные услуги по web-разработке можно по адресу pena.digital",
["Placeholder", "Placeholder"], ],
["Placeholder", "Placeholder"], ]}
["Placeholder", "Placeholder"], />
["Placeholder", "Placeholder"], </TabPanel>
]} <TabPanel value={tabIndex} index={1} mt={upMd ? "27px" : "10px"}>
/> <AccordionWrapper
</TabPanel> content={[
<TabPanel value={tabIndex} index={2} mt={upMd ? "27px" : "10px"}> ["Placeholder", "Placeholder"],
<AccordionWrapper ["Placeholder", "Placeholder"],
content={[ ["Placeholder", "Placeholder"],
["Placeholder", "Placeholder"], ["Placeholder", "Placeholder"],
["Placeholder", "Placeholder"], ["Placeholder", "Placeholder"],
["Placeholder", "Placeholder"], ["Placeholder", "Placeholder"],
["Placeholder", "Placeholder"], ]}
["Placeholder", "Placeholder"], />
["Placeholder", "Placeholder"], </TabPanel>
]} <TabPanel value={tabIndex} index={2} mt={upMd ? "27px" : "10px"}>
/> <AccordionWrapper
</TabPanel> content={[
<TabPanel value={tabIndex} index={3} mt={upMd ? "27px" : "10px"}> ["Placeholder", "Placeholder"],
<AccordionWrapper ["Placeholder", "Placeholder"],
content={[ ["Placeholder", "Placeholder"],
["Placeholder", "Placeholder"], ["Placeholder", "Placeholder"],
["Placeholder", "Placeholder"], ["Placeholder", "Placeholder"],
["Placeholder", "Placeholder"], ["Placeholder", "Placeholder"],
["Placeholder", "Placeholder"], ]}
["Placeholder", "Placeholder"], />
["Placeholder", "Placeholder"], </TabPanel>
]} <TabPanel value={tabIndex} index={3} mt={upMd ? "27px" : "10px"}>
/> <AccordionWrapper
</TabPanel> content={[
<TabPanel value={tabIndex} index={4} mt={upMd ? "27px" : "10px"}> ["Placeholder", "Placeholder"],
<AccordionWrapper ["Placeholder", "Placeholder"],
content={[ ["Placeholder", "Placeholder"],
["Placeholder", "Placeholder"], ["Placeholder", "Placeholder"],
["Placeholder", "Placeholder"], ["Placeholder", "Placeholder"],
["Placeholder", "Placeholder"], ["Placeholder", "Placeholder"],
["Placeholder", "Placeholder"], ]}
["Placeholder", "Placeholder"], />
["Placeholder", "Placeholder"], </TabPanel>
]} <TabPanel value={tabIndex} index={4} mt={upMd ? "27px" : "10px"}>
/> <AccordionWrapper
</TabPanel> content={[
<TabPanel value={tabIndex} index={5} mt={upMd ? "27px" : "10px"}> ["Placeholder", "Placeholder"],
<AccordionWrapper ["Placeholder", "Placeholder"],
content={[ ["Placeholder", "Placeholder"],
["Placeholder", "Placeholder"], ["Placeholder", "Placeholder"],
["Placeholder", "Placeholder"], ["Placeholder", "Placeholder"],
["Placeholder", "Placeholder"], ["Placeholder", "Placeholder"],
["Placeholder", "Placeholder"], ]}
["Placeholder", "Placeholder"], />
["Placeholder", "Placeholder"], </TabPanel>
]} <TabPanel value={tabIndex} index={5} mt={upMd ? "27px" : "10px"}>
/> <AccordionWrapper
</TabPanel> content={[
<TabPanel value={tabIndex} index={6} mt={upMd ? "27px" : "10px"}> ["Placeholder", "Placeholder"],
<AccordionWrapper ["Placeholder", "Placeholder"],
content={[ ["Placeholder", "Placeholder"],
["Placeholder", "Placeholder"], ["Placeholder", "Placeholder"],
["Placeholder", "Placeholder"], ["Placeholder", "Placeholder"],
["Placeholder", "Placeholder"], ["Placeholder", "Placeholder"],
["Placeholder", "Placeholder"], ]}
["Placeholder", "Placeholder"], />
["Placeholder", "Placeholder"], </TabPanel>
]} <TabPanel value={tabIndex} index={6} mt={upMd ? "27px" : "10px"}>
/> <AccordionWrapper
</TabPanel> content={[
</SectionWrapper> ["Placeholder", "Placeholder"],
) ["Placeholder", "Placeholder"],
["Placeholder", "Placeholder"],
["Placeholder", "Placeholder"],
["Placeholder", "Placeholder"],
["Placeholder", "Placeholder"],
]}
/>
</TabPanel>
</SectionWrapper>
);
} }
interface TabPanelProps { interface TabPanelProps {
@ -167,9 +176,9 @@ interface TabPanelProps {
} }
function TabPanel({ index, value, children, mt }: TabPanelProps) { function TabPanel({ index, value, children, mt }: TabPanelProps) {
return ( return (
<Box hidden={index !== value} sx={{ mt }}> <Box hidden={index !== value} sx={{ mt }}>
{children} {children}
</Box> </Box>
) );
} }