27 lines
680 B
TypeScript
27 lines
680 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>
|
|
<motion.div
|
|
key={location.pathname}
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.12 }}
|
|
>
|
|
<Outlet />
|
|
</motion.div>
|
|
</AnimatePresence>
|
|
</main>
|
|
<TabBar />
|
|
</div>
|
|
);
|
|
}
|