Landings/tourism
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

create widget scripts from components

Browse Source
This commit is contained in:
nflnkr 2024-04-25 15:17:46 +03:00
parent 3e32d5cdee
commit 09dbf44e1d
4 changed files with 72 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
public/index.html
View File

@ -18,32 +18,6 @@
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="module">
import widget from "https://s.hbpn.link/export/pub.js";
setTimeout(() => {
widget.create({
selector: "quiz-1",
quizId: "0c17353b-55f9-44b5-91d4-a7ffebc5897f",
});
widget.create({
selector: "quiz-2",
quizId: "81e3751b-21da-4788-9a66-bff7204d619c",
});
widget.create({
selector: "quiz-3",
quizId: "8d955f65-728a-40e4-a8f6-6c17e78d193b",
});
widget.create({
selector: "quiz-4",
quizId: "e0f23ed5-a3b5-4c42-9bbb-18df97a68ec8",
});
widget.create({
selector: "quiz-5",
quizId: "46c8705e-8938-49d9-bea3-a6bd0557b9f1",
});
});
</script>
</body>
</html>

52
src/App.tsx
View File

@ -1,36 +1,34 @@
import React from 'react';
import { Navigate, Route, Routes, useLocation, useNavigate } from "react-router-dom";
import LandingTourism from "./pages/landing/LandingTourism";
import { Navigate, Route, Routes, useLocation } from "react-router-dom";
import WidgetShowcase from './pages/WidgetShowcase/WidgetShowcase';
import SignupDialog from "./pages/auth/Signup";
import LandingTourism from "./pages/landing/LandingTourism";
function App() {
const location = useLocation();
const navigate = useNavigate();
if (location.state?.redirectTo)
return (
<Navigate
to={location.state.redirectTo}
replace
state={{ backgroundLocation: location }}
/>
);
return (
<>
{location.state?.backgroundLocation &&
<Routes>
<Route path="/signup" element={<SignupDialog />} />
</Routes>
}
<Routes location={location.state?.backgroundLocation || location}>
<Route path="/" element={<LandingTourism/>} />
<Route path="/signup" element={<Navigate to="/" replace state={{ redirectTo: "/signup" }} />} />
</Routes>
</>
);
if (location.state?.redirectTo) return (
<Navigate
to={location.state.redirectTo}
replace
state={{ backgroundLocation: location }}
/>
);
return (
<>
{location.state?.backgroundLocation &&
<Routes>
<Route path="/signup" element={<SignupDialog />} />
</Routes>
}
<Routes location={location.state?.backgroundLocation || location}>
<Route path="/" element={<LandingTourism />} />
<Route path="/widgetshowcase" element={<WidgetShowcase />} />
<Route path="/signup" element={<Navigate to="/" replace state={{ redirectTo: "/signup" }} />} />
</Routes>
</>
);
}
export default App;

41
src/pages/landing/QuizContainer.tsx Normal file
View File

@ -0,0 +1,41 @@
import { Box } from "@mui/material";
import { useEffect } from "react";
interface Props {
elementId: string;
quizId: string;
}
export default function QuizContainer({ elementId, quizId }: Props) {
useEffect(function appendWidgetScript() {
if (document.querySelector(`#widget-script-${quizId}`)) return;
const script = document.createElement("script");
script.setAttribute("id", `widget-script-${quizId}`);
script.setAttribute("type", "module");
script.innerHTML = createWidgetScript(elementId, quizId);
document.body.appendChild(script);
}, [elementId, quizId]);
return (
<Box
id={elementId}
sx={{
height: "100%",
width: "100%",
}}
/>
);
}
const createWidgetScript = (elementId: string, quizId: string) => `
import widget from "https://s.hbpn.link/export/pub.js";
widget.create({
selector: "${elementId}",
quizId: "${quizId}",
});
`;

24
src/pages/landing/quizInteractive.tsx
View File

@ -1,10 +1,10 @@
import { QuizAnswerer } from "@frontend/squzanswerer";
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import dashRight from "../../images/dashRight.svg";
import dashLeft from "../../images/leftDash.svg";
import dashRightTop from "../../images/rightDash.svg";
import dashRightPlane from "../../images/rightDashPlane.svg";
import Section from "../../kit/section";
import QuizContainer from "./QuizContainer";
export default function QuizInteractive() {
const theme = useTheme();
@ -68,7 +68,7 @@ export default function QuizInteractive() {
width: isMobile ? "70%" : undefined
}}
/>
<QuizContainer id="quiz-1" />
<QuizContainer elementId="quiz-1" quizId="0c17353b-55f9-44b5-91d4-a7ffebc5897f" />
</QuizBox>
<QuizBox zIndex={8}>
<Box
@ -82,7 +82,7 @@ export default function QuizInteractive() {
width: isMobile ? "70%" : undefined
}}
/>
<QuizContainer id="quiz-2" />
<QuizContainer elementId="quiz-2" quizId="81e3751b-21da-4788-9a66-bff7204d619c" />
</QuizBox>
<QuizBox zIndex={7}>
<Box
@ -95,7 +95,7 @@ export default function QuizInteractive() {
width: isMobile ? "70%" : undefined
}}
/>
<QuizContainer id="quiz-3" />
<QuizContainer elementId="quiz-3" quizId="8d955f65-728a-40e4-a8f6-6c17e78d193b" />
</QuizBox>
<QuizBox zIndex={6}>
<Box
@ -108,7 +108,7 @@ export default function QuizInteractive() {
width: isMobile ? "70%" : undefined
}}
/>
<QuizContainer id="quiz-4" />
<QuizContainer elementId="quiz-4" quizId="e0f23ed5-a3b5-4c42-9bbb-18df97a68ec8" />
</QuizBox>
<QuizBox zIndex={5}>
<Box
@ -121,7 +121,7 @@ export default function QuizInteractive() {
width: isMobile ? "70%" : undefined
}}
/>
<QuizContainer id="quiz-5" />
<QuizContainer elementId="quiz-5" quizId="46c8705e-8938-49d9-bea3-a6bd0557b9f1" />
</QuizBox>
{/* <QuizBox zIndex={4}>
<Typography>interactive</Typography>
@ -209,15 +209,3 @@ function QuizBox(props: Props) {
> {props.children}</Box>
);
}
function QuizContainer({ id }: { id?: string; }) {
return (
<Box
id={id}
sx={{
height: "100%",
width: "100%",
}}
/>
);
}