components
1 week ago
hooks
1 week ago
lib
1 month ago
pages
1 week ago
router
1 month ago
utils
1 month ago
App.js
1 month ago
Routes.js
1 month ago
common.scss
1 month ago
index.js
1 month ago
main.scss
1 month ago
App.js
52 lines
| 1 | import { useState, useEffect } from "react"; |
| 2 | import { RouterProvider } from "./router/router"; |
| 3 | import { Toaster } from "@bsf/force-ui"; |
| 4 | import Routes from "./Routes"; |
| 5 | import Onboarding from "./pages/Onboarding"; |
| 6 | |
| 7 | // Single Toaster config for every tab. Pin to the extreme top-right just |
| 8 | // under the WP admin bar so the toast lands on the navbar corner, and keep |
| 9 | // the z-index above every Dialog overlay (999999) so it's never hidden |
| 10 | // behind a backdrop. The admin-bar CSS var automatically shifts to 46px on |
| 11 | // screens ≤782px, so the offset stays correct on small screens too. |
| 12 | const AppToaster = () => ( |
| 13 | <Toaster |
| 14 | position="top-right" |
| 15 | dismissAfter={3000} |
| 16 | className="!top-[var(--presto-admin-bar-h)] !p-4 !z-[1000050]" |
| 17 | /> |
| 18 | ); |
| 19 | |
| 20 | export default () => { |
| 21 | const prestoData = window.prestoPlayer || {}; |
| 22 | const shouldShowOnboarding = |
| 23 | !prestoData.onboarding_completed || prestoData.onboarding_redirect; |
| 24 | |
| 25 | const [showOnboarding, setShowOnboarding] = useState(shouldShowOnboarding); |
| 26 | |
| 27 | useEffect(() => { |
| 28 | if (showOnboarding) { |
| 29 | document.body.classList.add("presto-player-onboarding-page"); |
| 30 | } |
| 31 | return () => { |
| 32 | document.body.classList.remove("presto-player-onboarding-page"); |
| 33 | }; |
| 34 | }, [showOnboarding]); |
| 35 | |
| 36 | if (showOnboarding) { |
| 37 | return ( |
| 38 | <RouterProvider> |
| 39 | <AppToaster /> |
| 40 | <Onboarding /> |
| 41 | </RouterProvider> |
| 42 | ); |
| 43 | } |
| 44 | |
| 45 | return ( |
| 46 | <RouterProvider> |
| 47 | <AppToaster /> |
| 48 | <Routes /> |
| 49 | </RouterProvider> |
| 50 | ); |
| 51 | }; |
| 52 |