import GlobalFooter from 'components/core/Page/GlobalFooter' ; import GlobalNavbar from 'components/core/Page/GlobalNavbar/GlobalNavbar' ; import Spacer from 'components/core/Spacer/Spacer' ; import { useMemo } from 'react' ; export type LayoutProps = { navbar ? : boolean ; footer ? : boolean ; footerVisibleWithinView ? : boolean ; footerVisibleOutOfView ? : boolean ; freshLayout ? : boolean ; } ; export type GalleryRouteProps = { element : JSX . Element ; } & LayoutProps ; export const Filler = ( ) => < Spacer height = { 80 } />; export default function GalleryRoute ( { element , freshLayout = false , navbar = true , footer = true , footerVisibleWithinView = true , footerVisibleOutOfView = false , } ) { const navbarComponent = useMemo ( ( ) => { if ( navbar ) { return < GlobalNavbar />; } return < Filler />; } , [ navbar ] ) ; const footerComponent = useMemo ( ( ) => { if ( ! footer ) { return < Filler />; } if ( footerVisibleOutOfView ) { return ( < > < Filler /> < GlobalFooter / > < />); } if ( footerVisibleWithinView ) { return < GlobalFooter />; } } , [ footer , footerVisibleOutOfView , footerVisibleWithinView ] ) ; if ( freshLayout ) { return element ; } return ( < > { navbarComponent } { element } { footerComponent } < />); }