AeThex-Corporation/aethex-forge
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

completionId: cgen-73436182f1f24a2ea006514b70d0f8f8

Browse source 
cgen-73436182f1f24a2ea006514b70d0f8f8
This commit is contained in:
Builder.io 2025-11-06 19:40:08 +00:00
parent 0e2b5c7f56
commit d89067bb67
1 changed files with 17 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
client/components/PageTransition.tsx
View file

@ -1,33 +1,34 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useLocation } from "react-router-dom"; import { useLocation } from "react-router-dom";
import LoadingScreen from "./LoadingScreen";
interface PageTransitionProps { interface PageTransitionProps {
children: React.ReactNode; children: React.ReactNode;
} }
const getArmGlowColor = (pathname: string): string => { const getArmMessage = (pathname: string): string => {
if (pathname.includes("/labs") || pathname.includes("/research")) { if (pathname.includes("/labs") || pathname.includes("/research")) {
return "rgba(251, 191, 36, 0.15)"; return "Initializing Research Module...";
} }
if (pathname.includes("/game-development")) { if (pathname.includes("/game-development")) {
return "rgba(34, 197, 94, 0.15)"; return "Booting GameForge Engine...";
} }
if (pathname.includes("/consulting")) { if (pathname.includes("/consulting")) {
return "rgba(59, 130, 246, 0.15)"; return "Engaging Corp Systems...";
} }
if (pathname.includes("/community")) { if (pathname.includes("/community")) {
return "rgba(239, 68, 68, 0.15)"; return "Connecting Foundation Network...";
} }
if (pathname.includes("/dev-link")) { if (pathname.includes("/dev-link")) {
return "rgba(6, 182, 212, 0.15)"; return "Loading Dev-Link Platform...";
} }
return "rgba(255, 255, 255, 0)"; return "Initializing AeThex OS...";
}; };
export default function PageTransition({ children }: PageTransitionProps) { export default function PageTransition({ children }: PageTransitionProps) {
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
const location = useLocation(); const location = useLocation();
const glowColor = getArmGlowColor(location.pathname); const message = getArmMessage(location.pathname);
useEffect(() => { useEffect(() => {
setVisible(false); setVisible(false);
@ -36,13 +37,13 @@ export default function PageTransition({ children }: PageTransitionProps) {
}, [location.pathname]); }, [location.pathname]);
return ( return (
<div <>
className={`transition-opacity duration-300 ease-out transform-gpu will-change-[opacity] ${visible ? "opacity-100" : "opacity-0"}`} {!visible && <LoadingScreen message={message} variant="overlay" />}
style={{ <div
boxShadow: visible ? `inset 0 0 80px ${glowColor}` : "none", className={`transition-opacity duration-300 ease-out transform-gpu will-change-[opacity] ${visible ? "opacity-100" : "opacity-0"}`}
}} >
> {children}
{children} </div>
</div> </>
); );
} }