generated from autoblog/Seo
43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
import { ReactNode, useEffect, useState } from 'react';
|
|
import Header from './Header';
|
|
import Footer from './Footer';
|
|
import LeadMagnet from './LeadMagnet';
|
|
import SearchOverlay from './SearchOverlay';
|
|
import { useLocation } from 'react-router-dom';
|
|
import { motion, AnimatePresence } from 'motion/react';
|
|
|
|
interface LayoutProps {
|
|
children: ReactNode;
|
|
}
|
|
|
|
export default function Layout({ children }: LayoutProps) {
|
|
const { pathname } = useLocation();
|
|
const [isSearchOpen, setIsSearchOpen] = useState(false);
|
|
|
|
// Scroll to top on route change
|
|
useEffect(() => {
|
|
window.scrollTo(0, 0);
|
|
}, [pathname]);
|
|
|
|
return (
|
|
<div className="min-h-screen flex flex-col bg-[#020203] selection:bg-brand/10 selection:text-brand text-slate-300">
|
|
<Header onSearchOpen={() => setIsSearchOpen(true)} />
|
|
<SearchOverlay isOpen={isSearchOpen} onClose={() => setIsSearchOpen(false)} />
|
|
<main className="flex-grow">
|
|
<AnimatePresence mode="wait">
|
|
<motion.div
|
|
key={pathname}
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: -10 }}
|
|
transition={{ duration: 0.3, ease: "easeOut" }}
|
|
>
|
|
{children}
|
|
</motion.div>
|
|
</AnimatePresence>
|
|
</main>
|
|
<LeadMagnet />
|
|
<Footer />
|
|
</div>
|
|
);
|
|
}
|