1  import { Outlet } from 'react-router-dom'
 2  import { useEffect } from 'react'
 3  import Header from './Header'
 4  import { useThemeStore } from '../../store/theme'
 5  
 6  export default function Layout() {
 7    const { resolvedTheme } = useThemeStore()
 8  
 9    // Apply theme class on mount and when theme changes
10    useEffect(() => {
11      if (resolvedTheme === 'dark') {
12        document.documentElement.classList.add('dark')
13      } else {
14        document.documentElement.classList.remove('dark')
15      }
16    }, [resolvedTheme])
17  
18    return (
19      <div className="min-h-screen flex flex-col bg-bg-primary transition-colors">
20        <Header />
21        <main className="flex-1 container mx-auto px-4 py-6">
22          <Outlet />
23        </main>
24        <footer className="border-t border-border-primary py-4 text-center text-sm text-text-tertiary transition-colors">
25          ACDC Forge - On-chain source code governance
26        </footer>
27      </div>
28    )
29  }