38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
import classNames from 'classnames'
|
|
import React from 'react'
|
|
|
|
import CreditManager from 'components/CreditManager'
|
|
import Navigation from 'components/Navigation'
|
|
import useCreditManagerStore from 'stores/useCreditManagerStore'
|
|
import useWalletStore from 'stores/useWalletStore'
|
|
|
|
const Layout = ({ children }: { children: React.ReactNode }) => {
|
|
const isOpen = useCreditManagerStore((s) => s.isOpen)
|
|
const address = useWalletStore((s) => s.address)
|
|
|
|
const filter = {
|
|
day: 'brightness-100 hue-rotate-0',
|
|
night: '-hue-rotate-82 brightness-30',
|
|
}
|
|
|
|
const isConnected = !!address
|
|
|
|
const backgroundClasses = classNames(
|
|
isConnected ? filter.day : filter.night,
|
|
'top-0 left-0 absolute block h-full w-full flex-col bg-body bg-mars bg-desktop bg-top bg-no-repeat filter transition-background duration-3000 ease-linear',
|
|
)
|
|
|
|
return (
|
|
<div className='relative min-h-screen w-full'>
|
|
<div className={backgroundClasses} />
|
|
<Navigation />
|
|
<main className='relative flex-1 p-6'>
|
|
{children}
|
|
{isOpen && <CreditManager />}
|
|
</main>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Layout
|