mirror of
https://github.com/NebulaServices/Nebula.git
synced 2025-05-17 05:20:01 -04:00
use hook for background
This commit is contained in:
parent
217d3a40db
commit
7117e67e0a
4 changed files with 54 additions and 45 deletions
|
@ -6,11 +6,10 @@ import Particles, { initParticlesEngine } from "@tsparticles/react";
|
|||
import { loadSlim } from "@tsparticles/slim";
|
||||
|
||||
import { useEffect, useState } from "preact/compat";
|
||||
import { ThemeProvider } from "./components/ThemeProvider";
|
||||
import { ThemeProvider, useTheme } from "./components/ThemeProvider";
|
||||
|
||||
const Routes = lazy(() => import("./routes"));
|
||||
|
||||
const theme = localStorage.getItem("theme") || "main";
|
||||
const particlesUrl = localStorage.getItem("particles") || "none";
|
||||
|
||||
export default function App() {
|
||||
|
@ -30,42 +29,44 @@ export default function App() {
|
|||
setInit(true);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const { background } = useTheme();
|
||||
const particlesLoaded = (container) => {
|
||||
console.log(container);
|
||||
};
|
||||
const bgImage: string | undefined = localStorage.getItem("background");
|
||||
return (
|
||||
<ThemeProvider>
|
||||
<div class="h-screen w-screen">
|
||||
{window.location.origin === "https://nebulaproxy.io" && <Meta />}
|
||||
{/* {window.location.origin === "http://localhost:8080" && <Meta />} */}
|
||||
<Suspense fallback={<LoadSuspense />}>
|
||||
<div className="absolute z-20 h-full w-full">
|
||||
<Routes />
|
||||
</div>
|
||||
<div
|
||||
className="z-10 h-full w-full bg-primary"
|
||||
style={{
|
||||
backgroundImage: bgImage ? `url(${bgImage})` : "none",
|
||||
backgroundSize: "contain",
|
||||
backgroundRepeat: "repeat",
|
||||
backgroundPosition: "center"
|
||||
}}
|
||||
>
|
||||
{init && particlesUrl !== "none" && (
|
||||
<Particles
|
||||
id="tsparticles"
|
||||
url={particlesUrl}
|
||||
particlesLoaded={particlesLoaded}
|
||||
class="bg-primary"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</Suspense>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
<div class="h-screen w-screen">
|
||||
{window.location.origin === "https://nebulaproxy.io" && <Meta />}
|
||||
{/* {window.location.origin === "http://localhost:8080" && <Meta />} */}
|
||||
<Suspense fallback={<LoadSuspense />}>
|
||||
<div className="absolute z-20 h-full w-full">
|
||||
<Routes />
|
||||
</div>
|
||||
<div
|
||||
className="z-10 h-full w-full bg-primary"
|
||||
style={{
|
||||
backgroundImage: `url(${background})`,
|
||||
backgroundSize: "contain",
|
||||
backgroundRepeat: "repeat",
|
||||
backgroundPosition: "center"
|
||||
}}
|
||||
>
|
||||
{init && particlesUrl !== "none" && (
|
||||
<Particles
|
||||
id="tsparticles"
|
||||
url={particlesUrl}
|
||||
particlesLoaded={particlesLoaded}
|
||||
class="bg-primary"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</Suspense>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
render(<App />, document.getElementById("app"));
|
||||
render(
|
||||
<ThemeProvider>
|
||||
<App />
|
||||
</ThemeProvider>,
|
||||
document.getElementById("app")
|
||||
);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue