53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { memo, useMemo } from 'react';
|
|
import { MainNav } from "@/components/main-nav";
|
|
import { Footer } from "@/components/footer";
|
|
import { AuthCheck } from "@/components/auth/auth-check";
|
|
import { Toaster } from "@/components/ui/toaster";
|
|
import { useBackgroundImage } from "@/components/background-switcher";
|
|
|
|
interface LayoutWrapperProps {
|
|
children: React.ReactNode;
|
|
isSignInPage: boolean;
|
|
isAuthenticated: boolean;
|
|
}
|
|
|
|
// Use memo to prevent unnecessary rerenders of the entire layout
|
|
export const LayoutWrapper = memo(function LayoutWrapper({
|
|
children,
|
|
isSignInPage,
|
|
isAuthenticated
|
|
}: LayoutWrapperProps) {
|
|
const { currentBackground, changeBackground } = useBackgroundImage();
|
|
|
|
// Memoize the background style to prevent recalculation on each render
|
|
const backgroundStyle = useMemo(() => {
|
|
if (isSignInPage) return {};
|
|
|
|
return {
|
|
backgroundImage: `url('${currentBackground}')`,
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
backgroundRepeat: 'no-repeat',
|
|
backgroundAttachment: 'fixed',
|
|
cursor: 'pointer',
|
|
transition: 'background-image 0.5s ease-in-out'
|
|
};
|
|
}, [currentBackground, isSignInPage]);
|
|
|
|
return (
|
|
<AuthCheck>
|
|
{!isSignInPage && isAuthenticated && <MainNav />}
|
|
<div
|
|
className={isSignInPage ? "" : "min-h-screen"}
|
|
style={!isSignInPage ? backgroundStyle : {}}
|
|
onClick={!isSignInPage ? changeBackground : undefined}
|
|
>
|
|
<main>{children}</main>
|
|
</div>
|
|
{!isSignInPage && isAuthenticated && <Footer />}
|
|
<Toaster />
|
|
</AuthCheck>
|
|
);
|
|
});
|