Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | 2x 55x 55x 47x 47x 47x 10x 37x 55x 49x 49x 55x 55x | import React, { useState, useEffect } from 'react';
import { Outlet } from 'react-router-dom';
import Navbar from '../components/marketing/Navbar';
import Footer from '../components/marketing/Footer';
import { useScrollToTop } from '../hooks/useScrollToTop';
import { User } from '../api/auth';
interface MarketingLayoutProps {
user?: User | null;
}
const MarketingLayout: React.FC<MarketingLayoutProps> = ({ user }) => {
useScrollToTop();
const [darkMode, setDarkMode] = useState(() => {
// Check for saved preference or system preference
Eif (typeof window !== 'undefined') {
const saved = localStorage.getItem('darkMode');
if (saved !== null) {
return JSON.parse(saved);
}
return window.matchMedia('(prefers-color-scheme: dark)').matches;
}
return false;
});
useEffect(() => {
document.documentElement.classList.toggle('dark', darkMode);
localStorage.setItem('darkMode', JSON.stringify(darkMode));
}, [darkMode]);
const toggleTheme = () => setDarkMode((prev: boolean) => !prev);
return (
<div className="min-h-screen flex flex-col bg-white dark:bg-gray-900 transition-colors duration-200">
<Navbar darkMode={darkMode} toggleTheme={toggleTheme} user={user} />
{/* Main Content - with padding for fixed navbar */}
<main className="flex-1 pt-16 lg:pt-20">
<Outlet />
</main>
<Footer />
</div>
);
};
export default MarketingLayout;
|