use hook for background

This commit is contained in:
incognitotgt 2024-04-15 16:22:16 -04:00
parent 217d3a40db
commit 7117e67e0a
No known key found for this signature in database
GPG key ID: D229D19A500C60B0
4 changed files with 54 additions and 45 deletions

View file

@ -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")
);