"use client";
import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";
import "./page-transition.css";
export default function PageTransition({
children
}: {
children: React.ReactNode
}) {
const pathname = usePathname();
const [displayPath, setDisplayPath] = useState(pathname);
const [isTransitioning, setIsTransitioning] = useState(false);
useEffect(() => {
if (pathname !== displayPath) {
// Start exit animation
setIsTransitioning(true);
const exitTimer = setTimeout(() => {
// Update path (triggers content change)
setDisplayPath(pathname);
// Start enter animation
const enterTimer = setTimeout(() => {
setIsTransitioning(false);
}, 800); // Enter animation duration
return () => clearTimeout(enterTimer);
}, 800); // Exit animation duration
return () => clearTimeout(exitTimer);
}
}, [pathname, displayPath]);
return (
<>
{/* Transition overlay */}
{/* Page content */}
{children}
);
}