Заполнил вопросы, адаптив
This commit is contained in:
ArtChaos189
parent
13820d6652
commit
5b42706455
@ -1,11 +1,11 @@
|
||||
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material"
|
||||
import { useState } from "react"
|
||||
import ExpandIcon from "./icons/ExpandIcon"
|
||||
import type { ReactNode } from "react"
|
||||
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||||
import { useState } from "react";
|
||||
import ExpandIcon from "./icons/ExpandIcon";
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
interface Props {
|
||||
header: ReactNode;
|
||||
text: string;
|
||||
text: ReactNode;
|
||||
divide?: boolean;
|
||||
price?: number;
|
||||
last?: boolean;
|
||||
@ -13,91 +13,94 @@ interface Props {
|
||||
}
|
||||
|
||||
export default function CustomAccordion({ header, text, divide = false, price, last, first }: Props) {
|
||||
const theme = useTheme()
|
||||
const upMd = useMediaQuery(theme.breakpoints.up("md"))
|
||||
const upXs = useMediaQuery(theme.breakpoints.up("xs"))
|
||||
const [isExpanded, setIsExpanded] = useState<boolean>(false)
|
||||
const theme = useTheme();
|
||||
const upMd = useMediaQuery(theme.breakpoints.up("md")); //900
|
||||
const upXs = useMediaQuery(theme.breakpoints.up("xs")); //300
|
||||
const [isExpanded, setIsExpanded] = useState<boolean>(false);
|
||||
|
||||
return (
|
||||
<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}`,
|
||||
console.log(upXs);
|
||||
|
||||
...(last && { borderBottom: "none" }),
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
onClick={() => setIsExpanded((prev) => !prev)}
|
||||
sx={{
|
||||
minHeight: "72px",
|
||||
px: "20px",
|
||||
display: "flex",
|
||||
alignItems: "stretch",
|
||||
justifyContent: "space-between",
|
||||
cursor: "pointer",
|
||||
userSelect: "none",
|
||||
rowGap: "10px",
|
||||
flexDirection: upXs ? undefined : "column",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
width: "100%",
|
||||
fontSize: upMd ? undefined : "16px",
|
||||
lineHeight: upMd ? undefined : "19px",
|
||||
fontWeight: 500,
|
||||
color: theme.palette.gray.dark,
|
||||
px: 0,
|
||||
}}
|
||||
>
|
||||
{header}
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
pl: "20px",
|
||||
width: "52px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
borderLeft: divide ? "1px solid #000000" : "none",
|
||||
}}
|
||||
>
|
||||
<ExpandIcon isExpanded={isExpanded} />
|
||||
</Box>
|
||||
</Box>
|
||||
{isExpanded && (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
px: "20px",
|
||||
py: upMd ? "25px" : undefined,
|
||||
pt: upMd ? undefined : "15px",
|
||||
pb: upMd ? undefined : "25px",
|
||||
backgroundColor: "#F1F2F6",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: upMd ? undefined : "16px",
|
||||
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>
|
||||
)
|
||||
return (
|
||||
<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" }),
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
onClick={() => setIsExpanded((prev) => !prev)}
|
||||
sx={{
|
||||
minHeight: "72px",
|
||||
px: "20px",
|
||||
display: "flex",
|
||||
alignItems: "stretch",
|
||||
justifyContent: "space-between",
|
||||
cursor: "pointer",
|
||||
userSelect: "none",
|
||||
rowGap: "10px",
|
||||
flexDirection: upXs ? undefined : "column",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
width: "100%",
|
||||
fontSize: upMd ? undefined : "16px",
|
||||
lineHeight: upMd ? undefined : "19px",
|
||||
p: !upMd ? "17px 0 20px" : undefined,
|
||||
fontWeight: 500,
|
||||
color: theme.palette.gray.dark,
|
||||
px: 0,
|
||||
}}
|
||||
>
|
||||
{header}
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
pl: "20px",
|
||||
width: "52px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
borderLeft: divide ? "1px solid #000000" : "none",
|
||||
}}
|
||||
>
|
||||
<ExpandIcon isExpanded={isExpanded} />
|
||||
</Box>
|
||||
</Box>
|
||||
{isExpanded && (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
px: "20px",
|
||||
py: upMd ? "25px" : undefined,
|
||||
pt: upMd ? undefined : "15px",
|
||||
pb: upMd ? undefined : "25px",
|
||||
backgroundColor: "#F1F2F6",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: upMd ? undefined : "16px",
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,24 +1,34 @@
|
||||
import { Box } from "@mui/material"
|
||||
import React from "react";
|
||||
import { Box } from "@mui/material";
|
||||
|
||||
import CustomAccordion from "@components/CustomAccordion"
|
||||
import { cardShadow } from "@root/utils/theme"
|
||||
import CustomAccordion from "@components/CustomAccordion";
|
||||
import { cardShadow } from "@root/utils/theme";
|
||||
|
||||
interface Props {
|
||||
content: [string, string][];
|
||||
}
|
||||
|
||||
export default function AccordionWrapper({ content }: Props) {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
overflow: "hidden",
|
||||
borderRadius: "12px",
|
||||
boxShadow: cardShadow,
|
||||
}}
|
||||
>
|
||||
{content.map((accordionItem, index) => (
|
||||
<CustomAccordion key={index} header={accordionItem[0]} text={accordionItem[1]} />
|
||||
))}
|
||||
</Box>
|
||||
)
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
overflow: "hidden",
|
||||
borderRadius: "12px",
|
||||
boxShadow: cardShadow,
|
||||
}}
|
||||
>
|
||||
{content.map((accordionItem, index) => (
|
||||
<CustomAccordion
|
||||
key={index}
|
||||
header={accordionItem[0]}
|
||||
text={accordionItem[1].split("\n").map((line, index) => (
|
||||
<React.Fragment key={index}>
|
||||
{line}
|
||||
<br />
|
||||
</React.Fragment>
|
||||
))}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,162 +1,171 @@
|
||||
import { IconButton, useMediaQuery, useTheme } from "@mui/material"
|
||||
import { Select } from "@root/components/Select"
|
||||
import { Box } from "@mui/material"
|
||||
import { Typography } from "@mui/material"
|
||||
import { useState } from "react"
|
||||
import SectionWrapper from "../../components/SectionWrapper"
|
||||
import AccordionWrapper from "./AccordionWrapper"
|
||||
import ArrowBackIcon from "@mui/icons-material/ArrowBack"
|
||||
import { Tabs } from "@root/components/Tabs"
|
||||
import { useHistoryTracker } from "@root/utils/hooks/useHistoryTracker"
|
||||
import { IconButton, useMediaQuery, useTheme } from "@mui/material";
|
||||
import { Select } from "@root/components/Select";
|
||||
import { Box } from "@mui/material";
|
||||
import { Typography } from "@mui/material";
|
||||
import { useState } from "react";
|
||||
import SectionWrapper from "../../components/SectionWrapper";
|
||||
import AccordionWrapper from "./AccordionWrapper";
|
||||
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
|
||||
import { Tabs } from "@root/components/Tabs";
|
||||
import { useHistoryTracker } from "@root/utils/hooks/useHistoryTracker";
|
||||
|
||||
const subPages = ["Pena hub", "Шаблоны", "Опросы", "Ссылки", "Финансовые", "Юридические", "Юридические лица"]
|
||||
const subPages = ["Pena hub", "Шаблоны", "Опросы", "Ссылки", "Финансовые", "Юридические", "Юридические лица"];
|
||||
|
||||
export default function Faq() {
|
||||
const theme = useTheme()
|
||||
const upMd = useMediaQuery(theme.breakpoints.up("md"))
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(550))
|
||||
const isTablet = useMediaQuery(theme.breakpoints.down(1000))
|
||||
const [tabIndex, setTabIndex] = useState<number>(0)
|
||||
const [selectedItem, setSelectedItem] = useState<number>(0)
|
||||
const theme = useTheme();
|
||||
const upMd = useMediaQuery(theme.breakpoints.up("md"));
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(550));
|
||||
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
|
||||
const [tabIndex, setTabIndex] = useState<number>(0);
|
||||
const [selectedItem, setSelectedItem] = useState<number>(0);
|
||||
|
||||
const handleCustomBackNavigation = useHistoryTracker()
|
||||
const handleCustomBackNavigation = useHistoryTracker();
|
||||
|
||||
return (
|
||||
<SectionWrapper
|
||||
maxWidth="lg"
|
||||
sx={{
|
||||
mt: upMd ? "25px" : "20px",
|
||||
px: isTablet ? (isMobile ? "18px" : "40px") : "20px",
|
||||
mb: upMd ? "70px" : "37px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
mt: "20px",
|
||||
mb: isTablet ? "38px" : "20px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "10px",
|
||||
}}
|
||||
>
|
||||
{isMobile && (
|
||||
<IconButton onClick={handleCustomBackNavigation} sx={{ p: 0, height: "28px", width: "28px", color: "black" }}>
|
||||
<ArrowBackIcon />
|
||||
</IconButton>
|
||||
)}
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: isMobile ? "24px" : "36px",
|
||||
fontWeight: "500",
|
||||
}}
|
||||
>
|
||||
return (
|
||||
<SectionWrapper
|
||||
maxWidth="lg"
|
||||
sx={{
|
||||
mt: upMd ? "25px" : "20px",
|
||||
px: isTablet ? (isMobile ? "18px" : "40px") : "20px",
|
||||
mb: upMd ? "70px" : "37px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
mt: "20px",
|
||||
mb: isTablet ? "38px" : "20px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "10px",
|
||||
}}
|
||||
>
|
||||
{isMobile && (
|
||||
<IconButton onClick={handleCustomBackNavigation} sx={{ p: 0, height: "28px", width: "28px", color: "black" }}>
|
||||
<ArrowBackIcon />
|
||||
</IconButton>
|
||||
)}
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: isMobile ? "24px" : "36px",
|
||||
fontWeight: "500",
|
||||
}}
|
||||
>
|
||||
Вопросы и ответы
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ marginBottom: isMobile ? "20px" : "0px" }}>
|
||||
{isMobile ? (
|
||||
<Select items={subPages} selectedItem={selectedItem} setSelectedItem={setSelectedItem} />
|
||||
) : (
|
||||
<Tabs items={subPages} selectedItem={tabIndex} setSelectedItem={setTabIndex} />
|
||||
)}
|
||||
</Box>
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ marginBottom: isMobile ? "20px" : "0px" }}>
|
||||
{isMobile ? (
|
||||
<Select items={subPages} selectedItem={selectedItem} setSelectedItem={setSelectedItem} />
|
||||
) : (
|
||||
<Tabs items={subPages} selectedItem={tabIndex} setSelectedItem={setTabIndex} />
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<TabPanel value={tabIndex} index={0} mt={upMd ? "42px" : "10px"}>
|
||||
<AccordionWrapper
|
||||
content={[
|
||||
[
|
||||
"Что такое корзина?",
|
||||
"Корзина это место где хранятся выбранные и собранные вами тарифы,оплатить можно в 1 клик или удалить не актуальные.",
|
||||
],
|
||||
[
|
||||
"Какие функции я могу использовать бесплатно?",
|
||||
"Все функции и все продукты, но с ограничением бесплатного периода",
|
||||
],
|
||||
[
|
||||
"Чем могут помочь ваши продукты, конкретно в моём бизнесе?",
|
||||
"Вы можете написать в тех поддержку и наши опытные операторы, проконсультируют вас по этому и многим другим вопросам, при наличии таковых.",
|
||||
],
|
||||
[
|
||||
"Можно ли использовать все ваши продукты не имея в штате программиста?",
|
||||
"Абсолютно все наши продукты работают по принципу no-code.",
|
||||
],
|
||||
]}
|
||||
/>
|
||||
</TabPanel>
|
||||
<TabPanel value={tabIndex} index={1} mt={upMd ? "27px" : "10px"}>
|
||||
<AccordionWrapper
|
||||
content={[
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
]}
|
||||
/>
|
||||
</TabPanel>
|
||||
<TabPanel value={tabIndex} index={2} mt={upMd ? "27px" : "10px"}>
|
||||
<AccordionWrapper
|
||||
content={[
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
]}
|
||||
/>
|
||||
</TabPanel>
|
||||
<TabPanel value={tabIndex} index={3} mt={upMd ? "27px" : "10px"}>
|
||||
<AccordionWrapper
|
||||
content={[
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
]}
|
||||
/>
|
||||
</TabPanel>
|
||||
<TabPanel value={tabIndex} index={4} mt={upMd ? "27px" : "10px"}>
|
||||
<AccordionWrapper
|
||||
content={[
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
]}
|
||||
/>
|
||||
</TabPanel>
|
||||
<TabPanel value={tabIndex} index={5} mt={upMd ? "27px" : "10px"}>
|
||||
<AccordionWrapper
|
||||
content={[
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
]}
|
||||
/>
|
||||
</TabPanel>
|
||||
<TabPanel value={tabIndex} index={6} mt={upMd ? "27px" : "10px"}>
|
||||
<AccordionWrapper
|
||||
content={[
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
]}
|
||||
/>
|
||||
</TabPanel>
|
||||
</SectionWrapper>
|
||||
)
|
||||
<TabPanel value={tabIndex} index={0} mt={upMd ? "42px" : "10px"}>
|
||||
<AccordionWrapper
|
||||
content={[
|
||||
[
|
||||
"Что такое бесплатный тариф?",
|
||||
"Это тариф который доступен каждому пользователю после регистрации, он позволяет пользоваться всеми нашими продуктами 14 дней бесплатно, что позволит в полной мере понять ценность наших сервисов.",
|
||||
],
|
||||
[
|
||||
"Что такое PenaHub? Куда я попал?",
|
||||
"Это личный кабинет по управлению всеми продуктами экосистемы PenaHub, тут вы можете приобрести любой тип услуги, любого нашего продукта, пройти верификацию как НКО или Юр лицо и получить акт оказанных услуг, так же только в рамках PenaHub вам доступна кастомная настройка тарифа (Мой Тариф).",
|
||||
],
|
||||
[
|
||||
"Как у вас формируется скидка?",
|
||||
`У нашей скидочной системы 4 уровня: \n 1 уровень. Тариф: чем объемнее тариф, тем больше скидка. \n2 уровень Продукт: если вы через “Мой тариф” берете больше одного вида тарифов,то в зависимости от итоговой суммы в рамках одного продукта, вы получаете увеличение итоговой скидки.\n3 уровень. Корзина: Чем больше товаров в корзине,не важно каких,то в зависимости от суммы получаете увеличенную скидку на разовую покупку.\n4 уровень. Лояльность: считается сумма покупок за всю историю вашего аккаунта и появляется скидка за лояльность,она действует на любые тарифы экосистемы независимо от остальных уровней скидки.`,
|
||||
],
|
||||
[
|
||||
"Как у вас формируется скидка для НКО?",
|
||||
"Скидка для НКО всегда равна 60%, так как мы проводим политику социальной ответственности.",
|
||||
],
|
||||
["Где можно пройти верификацию как НКО или юр лицо?", "Вкладка профиль."],
|
||||
[
|
||||
"Хочу предложить крутую идею или предложение о сотрудничестве, как это сделать?",
|
||||
"Напишите в техническую поддержку и ваша заявка будет прочитана руководством, со 100% вероятностью.",
|
||||
],
|
||||
[
|
||||
"Хочу заказать у вас разработку, как это сделать?",
|
||||
"Заказать разработку полного цикла или отдельные услуги по web-разработке можно по адресу pena.digital",
|
||||
],
|
||||
]}
|
||||
/>
|
||||
</TabPanel>
|
||||
<TabPanel value={tabIndex} index={1} mt={upMd ? "27px" : "10px"}>
|
||||
<AccordionWrapper
|
||||
content={[
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
]}
|
||||
/>
|
||||
</TabPanel>
|
||||
<TabPanel value={tabIndex} index={2} mt={upMd ? "27px" : "10px"}>
|
||||
<AccordionWrapper
|
||||
content={[
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
]}
|
||||
/>
|
||||
</TabPanel>
|
||||
<TabPanel value={tabIndex} index={3} mt={upMd ? "27px" : "10px"}>
|
||||
<AccordionWrapper
|
||||
content={[
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
]}
|
||||
/>
|
||||
</TabPanel>
|
||||
<TabPanel value={tabIndex} index={4} mt={upMd ? "27px" : "10px"}>
|
||||
<AccordionWrapper
|
||||
content={[
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
]}
|
||||
/>
|
||||
</TabPanel>
|
||||
<TabPanel value={tabIndex} index={5} mt={upMd ? "27px" : "10px"}>
|
||||
<AccordionWrapper
|
||||
content={[
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
]}
|
||||
/>
|
||||
</TabPanel>
|
||||
<TabPanel value={tabIndex} index={6} mt={upMd ? "27px" : "10px"}>
|
||||
<AccordionWrapper
|
||||
content={[
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
["Placeholder", "Placeholder"],
|
||||
]}
|
||||
/>
|
||||
</TabPanel>
|
||||
</SectionWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
interface TabPanelProps {
|
||||
@ -167,9 +176,9 @@ interface TabPanelProps {
|
||||
}
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user