добавил шильдики
This commit is contained in:
ArtChaos189
parent
cc938525ac
commit
b0e5041a0a
18
src/assets/icons/NameplateLogo.tsx
Normal file
18
src/assets/icons/NameplateLogo.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
import { FC, SVGProps } from "react";
|
||||
|
||||
export const NameplateLogo: FC<SVGProps<SVGSVGElement>> = (props) => (
|
||||
<svg {...props} height="1em" viewBox="0 0 89 81" fill="none">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M34.5604 0.0885217C24.3105 -1.09878 17.239 9.91147 10.6615 17.8703C4.88905 24.8549 0.590996 32.7441 0.0917664 41.7955C-0.439369 51.4255 1.3075 61.4545 7.86805 68.5172C14.6258 75.7923 24.7486 80.3889 34.5604 78.9028C43.5576 77.54 47.5388 67.6598 54.2372 61.4939C61.5105 54.799 75.061 51.6851 74.8731 41.7955C74.6848 31.8908 60.3836 29.952 53.5024 22.8328C46.3747 15.4585 44.7425 1.26797 34.5604 0.0885217Z"
|
||||
fill="#7E2AEA"
|
||||
/>
|
||||
<circle cx="60.0543" cy="75.1555" r="5.65583" fill="#7E2AEA" />
|
||||
<circle cx="54.4046" cy="12.3947" r="2.1546" fill="#7E2AEA" />
|
||||
<path
|
||||
d="M88.866 39.4685C88.2378 33.3607 85.3643 27.7037 80.8025 23.594C76.2408 19.4843 70.3156 17.2146 64.1757 17.2248C63.3039 17.2252 62.4328 17.2708 61.5658 17.3614C55.4608 18.0025 49.8093 20.8814 45.7015 25.443C41.5937 30.0046 39.3205 35.9256 39.3203 42.0642V42.0642V77.549H49.9658V62.468C54.128 65.3636 59.0787 66.9119 64.1491 66.9036C65.0208 66.9033 65.8919 66.8577 66.759 66.767C70.0031 66.426 73.1483 65.4494 76.0151 63.8929C78.8818 62.3364 81.4138 60.2305 83.4667 57.6955C85.5195 55.1604 87.0529 52.2458 87.9793 49.1181C88.9058 45.9904 89.2071 42.7109 88.866 39.4667V39.4685ZM75.1937 51.0011C74.0243 52.4537 72.5783 53.6599 70.9395 54.5498C69.3007 55.4397 67.5017 55.9956 65.6465 56.1854C65.149 56.2371 64.6492 56.2631 64.1491 56.2635C60.9296 56.2605 57.8068 55.1631 55.2932 53.1515C52.7796 51.1398 51.0245 48.3334 50.3161 45.1929C49.6077 42.0523 49.988 38.7642 51.3945 35.8683C52.8011 32.9723 55.1504 30.6406 58.0568 29.2558C60.9632 27.871 64.2541 27.5154 67.3892 28.2473C70.5244 28.9793 73.3176 30.7553 75.3103 33.284C77.303 35.8126 78.3769 38.9436 78.3558 42.1629C78.3346 45.3823 77.2196 48.4989 75.1937 51.0011Z"
|
||||
fill="#151515"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
@ -1,14 +1,12 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { Box, Button, useTheme } from "@mui/material";
|
||||
import { Box, Button, Typography, useTheme } from "@mui/material";
|
||||
|
||||
import type {
|
||||
AnyTypedQuizQuestion,
|
||||
QuizQuestionBase,
|
||||
} from "../../model/questionTypes/shared";
|
||||
import type { AnyTypedQuizQuestion, QuizQuestionBase } from "../../model/questionTypes/shared";
|
||||
import { useQuestionsStore } from "@root/quizData/store";
|
||||
import { getQuestionById } from "@root/quizData/actions";
|
||||
import { useQuizViewStore } from "@root/quizView/store";
|
||||
import { enqueueSnackbar } from "notistack";
|
||||
import { NameplateLogo } from "@icons/NameplateLogo";
|
||||
|
||||
type FooterProps = {
|
||||
setCurrentQuestion: (step: AnyTypedQuizQuestion) => void;
|
||||
@ -17,12 +15,7 @@ type FooterProps = {
|
||||
setShowResultForm: (show: boolean) => void;
|
||||
};
|
||||
|
||||
export const Footer = ({
|
||||
setCurrentQuestion,
|
||||
question,
|
||||
setShowContactForm,
|
||||
setShowResultForm,
|
||||
}: FooterProps) => {
|
||||
export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setShowResultForm }: FooterProps) => {
|
||||
const theme = useTheme();
|
||||
|
||||
const { settings, items } = useQuestionsStore();
|
||||
@ -30,10 +23,8 @@ export const Footer = ({
|
||||
|
||||
const [disablePreviousButton, setDisablePreviousButton] = useState<boolean>(false);
|
||||
const [disableNextButton, setDisableNextButton] = useState<boolean>(false);
|
||||
|
||||
const linear = !items.find(
|
||||
({ content }) => content.rule.parentId === "root"
|
||||
);
|
||||
|
||||
const linear = !items.find(({ content }) => content.rule.parentId === "root");
|
||||
|
||||
useEffect(() => {
|
||||
// Логика для аргумента disabled у кнопки "Назад"
|
||||
@ -56,9 +47,7 @@ export const Footer = ({
|
||||
}
|
||||
|
||||
// Логика для аргумента disabled у кнопки "Далее"
|
||||
const answer = answers.find(
|
||||
({ questionId }) => questionId === question.id
|
||||
);
|
||||
const answer = answers.find(({ questionId }) => questionId === question.id);
|
||||
|
||||
if ("required" in question.content && question.content.required && answer) {
|
||||
setDisableNextButton(false);
|
||||
@ -66,11 +55,7 @@ export const Footer = ({
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
"required" in question.content &&
|
||||
question.content.required &&
|
||||
!answer
|
||||
) {
|
||||
if ("required" in question.content && question.content.required && !answer) {
|
||||
setDisableNextButton(true);
|
||||
|
||||
return;
|
||||
@ -84,9 +69,7 @@ export const Footer = ({
|
||||
if (nextQuestionId) {
|
||||
setDisableNextButton(false);
|
||||
} else {
|
||||
const nextQuestion = getQuestionById(
|
||||
question.content.rule.default
|
||||
);
|
||||
const nextQuestion = getQuestionById(question.content.rule.default);
|
||||
|
||||
if (nextQuestion?.type) {
|
||||
setDisableNextButton(false);
|
||||
@ -94,9 +77,8 @@ export const Footer = ({
|
||||
}
|
||||
}, [question, answers]);
|
||||
|
||||
const showResult = (nextQuestion:any) => {
|
||||
|
||||
console.log(nextQuestion)
|
||||
const showResult = (nextQuestion: any) => {
|
||||
console.log(nextQuestion);
|
||||
|
||||
if (nextQuestion && settings?.cfg.resultInfo.when === "before") {
|
||||
setShowResultForm(true);
|
||||
@ -107,44 +89,34 @@ export const Footer = ({
|
||||
|
||||
const getNextQuestionId = () => {
|
||||
if (answers.length) {
|
||||
const answer = answers.find(
|
||||
({ questionId }) => questionId === question.id
|
||||
);
|
||||
const answer = answers.find(({ questionId }) => questionId === question.id);
|
||||
|
||||
let readyBeNextQuestion = "";
|
||||
|
||||
(question as QuizQuestionBase).content.rule.main.forEach(
|
||||
({ next, rules }) => {
|
||||
let longerArray = Math.max(
|
||||
rules[0].answers.length,
|
||||
answer?.answer && Array.isArray(answer?.answer)
|
||||
? answer?.answer.length
|
||||
: [answer?.answer].length
|
||||
);
|
||||
(question as QuizQuestionBase).content.rule.main.forEach(({ next, rules }) => {
|
||||
let longerArray = Math.max(
|
||||
rules[0].answers.length,
|
||||
answer?.answer && Array.isArray(answer?.answer) ? answer?.answer.length : [answer?.answer].length
|
||||
);
|
||||
|
||||
for (
|
||||
var i = 0;
|
||||
i < longerArray;
|
||||
i++ // Цикл по всем элементам бОльшего массива
|
||||
) {
|
||||
if (Array.isArray(answer?.answer)) {
|
||||
if (
|
||||
answer?.answer.find((item) =>
|
||||
String(item === rules[0].answers[i])
|
||||
)
|
||||
) {
|
||||
readyBeNextQuestion = next; // Если хоть один элемент отличается, массивы не равны
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (String(rules[0].answers[i]) === answer?.answer) {
|
||||
for (
|
||||
var i = 0;
|
||||
i < longerArray;
|
||||
i++ // Цикл по всем элементам бОльшего массива
|
||||
) {
|
||||
if (Array.isArray(answer?.answer)) {
|
||||
if (answer?.answer.find((item) => String(item === rules[0].answers[i]))) {
|
||||
readyBeNextQuestion = next; // Если хоть один элемент отличается, массивы не равны
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (String(rules[0].answers[i]) === answer?.answer) {
|
||||
readyBeNextQuestion = next; // Если хоть один элемент отличается, массивы не равны
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
return readyBeNextQuestion;
|
||||
}
|
||||
@ -180,7 +152,7 @@ export const Footer = ({
|
||||
const questionIndex = items.findIndex(({ id }) => id === question.id);
|
||||
const nextQuestion = items[questionIndex + 1];
|
||||
|
||||
console.log(nextQuestion)
|
||||
console.log(nextQuestion);
|
||||
if (nextQuestion && nextQuestion.type !== "result") {
|
||||
setCurrentQuestion(nextQuestion);
|
||||
} else {
|
||||
@ -202,9 +174,7 @@ export const Footer = ({
|
||||
enqueueSnackbar("не могу получить последующий вопрос");
|
||||
}
|
||||
} else {
|
||||
const nextQuestion = getQuestionById(
|
||||
question.content.rule.default
|
||||
);
|
||||
const nextQuestion = getQuestionById(question.content.rule.default);
|
||||
if (nextQuestion?.type && nextQuestion.type !== "result") {
|
||||
setCurrentQuestion(nextQuestion);
|
||||
} else {
|
||||
@ -216,10 +186,25 @@ export const Footer = ({
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
position: "relative",
|
||||
padding: "15px 0",
|
||||
borderTop: `1px solid ${theme.palette.grey[400]}`,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
position: "absolute",
|
||||
top: "-45px",
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
gap: "8px",
|
||||
}}
|
||||
>
|
||||
<NameplateLogo style={{ fontSize: "34px" }} />
|
||||
<Typography sx={{ fontSize: "20px", color: "#4D4D4D", whiteSpace: "nowrap" }}>Сделано на PenaQuiz</Typography>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
|
||||
@ -1,28 +1,20 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
ButtonBase,
|
||||
Link,
|
||||
Paper,
|
||||
Typography,
|
||||
useMediaQuery,
|
||||
useTheme,
|
||||
} from "@mui/material";
|
||||
import { Box, Button, ButtonBase, Link, Paper, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||||
import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe";
|
||||
import { QuizStartpageAlignType, QuizStartpageType } from "@model/quizSettings";
|
||||
import { notReachable } from "../../utils/notReachable";
|
||||
import { useUADevice } from "../../utils/hooks/useUADevice";
|
||||
import { useQuestionsStore } from "@root/quizData/store";
|
||||
import { NameplateLogo } from "@icons/NameplateLogo";
|
||||
|
||||
interface Props {
|
||||
setVisualStartPage: (a: boolean) => void
|
||||
setVisualStartPage: (a: boolean) => void;
|
||||
}
|
||||
|
||||
export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
|
||||
const theme = useTheme();
|
||||
const { isMobileDevice } = useUADevice();
|
||||
|
||||
const { settings } = useQuestionsStore()
|
||||
const { settings } = useQuestionsStore();
|
||||
|
||||
if (!settings) return null;
|
||||
|
||||
@ -30,9 +22,9 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
|
||||
navigator.clipboard.writeText(settings?.cfg.info.phonenumber);
|
||||
};
|
||||
|
||||
const background = settings?.cfg.startpage.background.type === "image"
|
||||
? settings?.cfg.startpage.background.desktop
|
||||
? (
|
||||
const background =
|
||||
settings?.cfg.startpage.background.type === "image" ? (
|
||||
settings?.cfg.startpage.background.desktop ? (
|
||||
<img
|
||||
src={settings?.cfg.startpage.background.desktop}
|
||||
alt=""
|
||||
@ -40,155 +32,197 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
objectFit: "cover",
|
||||
overflow: "hidden"
|
||||
overflow: "hidden",
|
||||
}}
|
||||
/>
|
||||
)
|
||||
: null
|
||||
: settings?.cfg.startpage.background.type === "video"
|
||||
? settings?.cfg.startpage.background.video
|
||||
? (
|
||||
<YoutubeEmbedIframe videoUrl={settings?.cfg.startpage.background.video}
|
||||
containerSX={{
|
||||
width: settings?.cfg.startpageType === "centered" ? "550px" : settings?.cfg.startpageType === "expanded" ? "100vw" : "100%",
|
||||
height: settings?.cfg.startpageType === "centered" ? "275px" : settings?.cfg.startpageType === "expanded" ? "100vh" : "100%",
|
||||
borderRadius: settings?.cfg.startpageType === "centered" ? "10px" : "0",
|
||||
overflow: "hidden",
|
||||
"& iframe": {
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
transform: settings?.cfg.startpageType === "centered" ? "" : settings?.cfg.startpageType === "expanded" ? "scale(1.5)" : "scale(2.4)",
|
||||
|
||||
}
|
||||
|
||||
}}
|
||||
/>
|
||||
)
|
||||
: null
|
||||
: null;
|
||||
) : null
|
||||
) : settings?.cfg.startpage.background.type === "video" ? (
|
||||
settings?.cfg.startpage.background.video ? (
|
||||
<YoutubeEmbedIframe
|
||||
videoUrl={settings?.cfg.startpage.background.video}
|
||||
containerSX={{
|
||||
width:
|
||||
settings?.cfg.startpageType === "centered"
|
||||
? "550px"
|
||||
: settings?.cfg.startpageType === "expanded"
|
||||
? "100vw"
|
||||
: "100%",
|
||||
height:
|
||||
settings?.cfg.startpageType === "centered"
|
||||
? "275px"
|
||||
: settings?.cfg.startpageType === "expanded"
|
||||
? "100vh"
|
||||
: "100%",
|
||||
borderRadius: settings?.cfg.startpageType === "centered" ? "10px" : "0",
|
||||
overflow: "hidden",
|
||||
"& iframe": {
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
transform:
|
||||
settings?.cfg.startpageType === "centered"
|
||||
? ""
|
||||
: settings?.cfg.startpageType === "expanded"
|
||||
? "scale(1.5)"
|
||||
: "scale(2.4)",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
) : null
|
||||
) : null;
|
||||
|
||||
return (
|
||||
<Paper className="quiz-preview-draghandle"
|
||||
<Paper
|
||||
className="quiz-preview-draghandle"
|
||||
sx={{
|
||||
height: "100vh",
|
||||
background: settings?.cfg.startpageType === "expanded" ?
|
||||
settings?.cfg.startpage.position === "left" ? "linear-gradient(90deg,#272626,transparent)" :
|
||||
settings?.cfg.startpage.position === "center" ? "linear-gradient(180deg,transparent,#272626)" :
|
||||
"linear-gradient(270deg,#272626,transparent)"
|
||||
: "",
|
||||
color: settings?.cfg.startpageType === "expanded" ? "white" : "black"
|
||||
|
||||
|
||||
}}>
|
||||
background:
|
||||
settings?.cfg.startpageType === "expanded"
|
||||
? settings?.cfg.startpage.position === "left"
|
||||
? "linear-gradient(90deg,#272626,transparent)"
|
||||
: settings?.cfg.startpage.position === "center"
|
||||
? "linear-gradient(180deg,transparent,#272626)"
|
||||
: "linear-gradient(270deg,#272626,transparent)"
|
||||
: "",
|
||||
color: settings?.cfg.startpageType === "expanded" ? "white" : "black",
|
||||
}}
|
||||
>
|
||||
<QuizPreviewLayoutByType
|
||||
quizHeaderBlock={<Box
|
||||
p={settings?.cfg.startpageType === "standard" ? "" : "16px"}
|
||||
>
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "20px",
|
||||
mb: "7px"
|
||||
}}>
|
||||
{settings?.cfg.startpage.logo && (
|
||||
<img
|
||||
src={settings?.cfg.startpage.logo}
|
||||
style={{
|
||||
height: "37px",
|
||||
maxWidth: "43px",
|
||||
objectFit: "cover",
|
||||
}}
|
||||
alt=""
|
||||
/>
|
||||
)}
|
||||
<Typography sx={{ fontSize: "14px" }}>
|
||||
{settings?.cfg.info.orgname}
|
||||
</Typography>
|
||||
quizHeaderBlock={
|
||||
<Box p={settings?.cfg.startpageType === "standard" ? "" : "16px"}>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "20px",
|
||||
mb: "7px",
|
||||
}}
|
||||
>
|
||||
{settings?.cfg.startpage.logo && (
|
||||
<img
|
||||
src={settings?.cfg.startpage.logo}
|
||||
style={{
|
||||
height: "37px",
|
||||
maxWidth: "43px",
|
||||
objectFit: "cover",
|
||||
}}
|
||||
alt=""
|
||||
/>
|
||||
)}
|
||||
<Typography sx={{ fontSize: "14px" }}>{settings?.cfg.info.orgname}</Typography>
|
||||
</Box>
|
||||
<Link mb="16px" href={settings?.cfg.info.site}>
|
||||
<Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
|
||||
{settings?.cfg.info.site}
|
||||
</Typography>
|
||||
</Link>
|
||||
</Box>
|
||||
<Link mb="16px" href={settings?.cfg.info.site}>
|
||||
<Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
|
||||
{settings?.cfg.info.site}
|
||||
</Typography>
|
||||
</Link>
|
||||
</Box>}
|
||||
quizMainBlock={<>
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: settings?.cfg.startpageType === "centered" ? "center" :
|
||||
settings?.cfg.startpageType === "expanded"
|
||||
? settings?.cfg.startpage.position === "center" ?
|
||||
"center"
|
||||
: "start" : "start",
|
||||
mt: "28px",
|
||||
width: "100%"
|
||||
}}>
|
||||
<Typography sx={{
|
||||
fontWeight: "bold",
|
||||
fontSize: "26px",
|
||||
fontStyle: "normal",
|
||||
fontStretch: "normal",
|
||||
lineHeight: "1.2",
|
||||
}}>{settings.name}</Typography>
|
||||
<Typography sx={{
|
||||
fontSize: "16px",
|
||||
m: "16px 0"
|
||||
}}>
|
||||
{settings?.cfg.startpage.description}
|
||||
</Typography>
|
||||
<Box width={settings?.cfg.startpageType === "standard" ? "100%" : "auto"}>
|
||||
<Button
|
||||
variant="contained"
|
||||
}
|
||||
quizMainBlock={
|
||||
<>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems:
|
||||
settings?.cfg.startpageType === "centered"
|
||||
? "center"
|
||||
: settings?.cfg.startpageType === "expanded"
|
||||
? settings?.cfg.startpage.position === "center"
|
||||
? "center"
|
||||
: "start"
|
||||
: "start",
|
||||
mt: "28px",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
fontWeight: "bold",
|
||||
fontSize: "26px",
|
||||
fontStyle: "normal",
|
||||
fontStretch: "normal",
|
||||
lineHeight: "1.2",
|
||||
}}
|
||||
>
|
||||
{settings.name}
|
||||
</Typography>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "16px",
|
||||
padding: "10px 15px",
|
||||
width: settings?.cfg.startpageType === "standard" ? "100%" : "auto"
|
||||
m: "16px 0",
|
||||
}}
|
||||
onClick={() => setVisualStartPage(false)}
|
||||
>
|
||||
{settings?.cfg.startpage.button.trim() ? settings?.cfg.startpage.button : "Пройти тест"}
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
mt: "46px"
|
||||
}}
|
||||
>
|
||||
{settings?.cfg.info.clickable ? (
|
||||
isMobileDevice ? (
|
||||
<Link href={`tel:${settings?.cfg.info.phonenumber}`}>
|
||||
<Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
|
||||
{settings?.cfg.info.phonenumber}
|
||||
</Typography>
|
||||
</Link>
|
||||
) : (
|
||||
<ButtonBase onClick={handleCopyNumber}>
|
||||
<Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
|
||||
{settings?.cfg.info.phonenumber}
|
||||
</Typography>
|
||||
</ButtonBase>
|
||||
)
|
||||
) : (
|
||||
<Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
|
||||
{settings?.cfg.info.phonenumber}
|
||||
{settings?.cfg.startpage.description}
|
||||
</Typography>
|
||||
)}
|
||||
<Typography sx={{ fontSize: "12px", textAlign: "end" }}>
|
||||
{settings?.cfg.info.law}
|
||||
</Typography>
|
||||
</Box>
|
||||
</>}
|
||||
<Box width={settings?.cfg.startpageType === "standard" ? "100%" : "auto"}>
|
||||
<Button
|
||||
variant="contained"
|
||||
sx={{
|
||||
fontSize: "16px",
|
||||
padding: "10px 15px",
|
||||
width: settings?.cfg.startpageType === "standard" ? "100%" : "auto",
|
||||
}}
|
||||
onClick={() => setVisualStartPage(false)}
|
||||
>
|
||||
{settings?.cfg.startpage.button.trim() ? settings?.cfg.startpage.button : "Пройти тест"}
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{ mt: "46px", display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }}
|
||||
>
|
||||
<Box>
|
||||
{settings?.cfg.info.clickable ? (
|
||||
isMobileDevice ? (
|
||||
<Link href={`tel:${settings?.cfg.info.phonenumber}`}>
|
||||
<Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
|
||||
{settings?.cfg.info.phonenumber}
|
||||
</Typography>
|
||||
</Link>
|
||||
) : (
|
||||
<ButtonBase onClick={handleCopyNumber}>
|
||||
<Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
|
||||
{settings?.cfg.info.phonenumber}
|
||||
</Typography>
|
||||
</ButtonBase>
|
||||
)
|
||||
) : (
|
||||
<Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
|
||||
{settings?.cfg.info.phonenumber}
|
||||
</Typography>
|
||||
)}
|
||||
<Typography sx={{ fontSize: "12px", textAlign: "end" }}>{settings?.cfg.info.law}</Typography>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<NameplateLogo style={{ fontSize: "34px" }} />
|
||||
<Typography sx={{ fontSize: "20px", color: "#4D4D4D", whiteSpace: "nowrap" }}>
|
||||
Сделано на PenaQuiz
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</>
|
||||
}
|
||||
backgroundBlock={background}
|
||||
startpageType={settings?.cfg.startpageType}
|
||||
alignType={settings?.cfg.startpage.position}
|
||||
/>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
function QuizPreviewLayoutByType({ quizHeaderBlock, quizMainBlock, backgroundBlock, startpageType, alignType }: {
|
||||
function QuizPreviewLayoutByType({
|
||||
quizHeaderBlock,
|
||||
quizMainBlock,
|
||||
backgroundBlock,
|
||||
startpageType,
|
||||
alignType,
|
||||
}: {
|
||||
quizHeaderBlock: JSX.Element;
|
||||
quizMainBlock: JSX.Element;
|
||||
backgroundBlock: JSX.Element | null;
|
||||
@ -202,28 +236,34 @@ function QuizPreviewLayoutByType({ quizHeaderBlock, quizMainBlock, backgroundBlo
|
||||
case null:
|
||||
case "standard": {
|
||||
return (
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
flexDirection: alignType === "left" ? "row" : "row-reverse",
|
||||
flexGrow: 1,
|
||||
height: "100vh",
|
||||
"&::-webkit-scrollbar": { width: 0 },
|
||||
}}>
|
||||
<Box sx={{
|
||||
width: !isTablet ? "40%" : "100%",
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
alignItems: !isTablet ? "flex-start" : "center",
|
||||
p: "25px"
|
||||
}}>
|
||||
flexDirection: alignType === "left" ? "row" : "row-reverse",
|
||||
flexGrow: 1,
|
||||
height: "100vh",
|
||||
"&::-webkit-scrollbar": { width: 0 },
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: !isTablet ? "40%" : "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
alignItems: !isTablet ? "flex-start" : "center",
|
||||
p: "25px",
|
||||
}}
|
||||
>
|
||||
{quizHeaderBlock}
|
||||
{quizMainBlock}
|
||||
</Box>
|
||||
<Box sx={{
|
||||
width: "60%",
|
||||
overflow: "hidden"
|
||||
}}>
|
||||
<Box
|
||||
sx={{
|
||||
width: "60%",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
{backgroundBlock}
|
||||
</Box>
|
||||
</Box>
|
||||
@ -231,36 +271,42 @@ function QuizPreviewLayoutByType({ quizHeaderBlock, quizMainBlock, backgroundBlo
|
||||
}
|
||||
case "expanded": {
|
||||
return (
|
||||
<Box sx={{
|
||||
position: "relative",
|
||||
display: "flex",
|
||||
justifyContent: startpageAlignTypeToJustifyContent[alignType],
|
||||
flexGrow: 1,
|
||||
height: "100%",
|
||||
"&::-webkit-scrollbar": { width: 0 },
|
||||
}}>
|
||||
<Box sx={{
|
||||
width: "40%",
|
||||
<Box
|
||||
sx={{
|
||||
position: "relative",
|
||||
padding: "16px",
|
||||
zIndex: 2,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
alignItems: alignType === "center" ? "center" : "start",
|
||||
}}>
|
||||
justifyContent: startpageAlignTypeToJustifyContent[alignType],
|
||||
flexGrow: 1,
|
||||
height: "100%",
|
||||
"&::-webkit-scrollbar": { width: 0 },
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: "40%",
|
||||
position: "relative",
|
||||
padding: "16px",
|
||||
zIndex: 2,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
alignItems: alignType === "center" ? "center" : "start",
|
||||
}}
|
||||
>
|
||||
{quizHeaderBlock}
|
||||
{quizMainBlock}
|
||||
</Box>
|
||||
<Box sx={{
|
||||
position: "absolute",
|
||||
left: 0,
|
||||
top: 0,
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
zIndex: 1,
|
||||
overflow: "hidden"
|
||||
}}>
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
left: 0,
|
||||
top: 0,
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
zIndex: 1,
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
{backgroundBlock}
|
||||
</Box>
|
||||
</Box>
|
||||
@ -268,27 +314,26 @@ function QuizPreviewLayoutByType({ quizHeaderBlock, quizMainBlock, backgroundBlo
|
||||
}
|
||||
case "centered": {
|
||||
return (
|
||||
<Box sx={{
|
||||
padding: "16px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
height: "100%",
|
||||
"&::-webkit-scrollbar": { width: 0 },
|
||||
overflow: "hidden"
|
||||
}}>
|
||||
<Box
|
||||
sx={{
|
||||
padding: "16px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
height: "100%",
|
||||
"&::-webkit-scrollbar": { width: 0 },
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
{quizHeaderBlock}
|
||||
{backgroundBlock &&
|
||||
<Box>
|
||||
{backgroundBlock}
|
||||
</Box>
|
||||
}
|
||||
{backgroundBlock && <Box>{backgroundBlock}</Box>}
|
||||
{quizMainBlock}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
default: notReachable(startpageType);
|
||||
default:
|
||||
notReachable(startpageType);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user