28 lines
762 B
TypeScript
28 lines
762 B
TypeScript
import { Outlet, useLocation } from 'react-router-dom';
|
|
import { AnimatePresence, motion } from 'framer-motion';
|
|
import { TabBar } from './TabBar';
|
|
import styles from './AppLayout.module.css';
|
|
|
|
export function AppLayout() {
|
|
const location = useLocation();
|
|
|
|
return (
|
|
<div className={styles.layout}>
|
|
<main className={styles.main}>
|
|
<AnimatePresence mode="wait">
|
|
<motion.div
|
|
key={location.pathname}
|
|
initial={{ opacity: 0, y: 8 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: -8 }}
|
|
transition={{ duration: 0.15, ease: 'easeOut' }}
|
|
>
|
|
<Outlet />
|
|
</motion.div>
|
|
</AnimatePresence>
|
|
</main>
|
|
<TabBar />
|
|
</div>
|
|
);
|
|
}
|