Files
pulse/app/sites/[id]/SiteLayoutShell.tsx

35 lines
817 B
TypeScript

'use client'
import { usePathname } from 'next/navigation'
import { AnimatePresence, motion } from 'framer-motion'
import SiteNav from '@/components/dashboard/SiteNav'
export default function SiteLayoutShell({
siteId,
children,
}: {
siteId: string
children: React.ReactNode
}) {
const pathname = usePathname()
return (
<>
<div className="w-full max-w-6xl mx-auto px-4 sm:px-6 pt-8">
<SiteNav siteId={siteId} />
</div>
<AnimatePresence mode="popLayout">
<motion.div
key={pathname}
initial={{ opacity: 0, y: 6 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -6 }}
transition={{ duration: 0.15, ease: 'easeInOut' }}
>
{children}
</motion.div>
</AnimatePresence>
</>
)
}