56 lines
1.7 KiB
TypeScript
56 lines
1.7 KiB
TypeScript
|
/**
|
||
|
|
* @license
|
||
|
|
* SPDX-License-Identifier: Apache-2.0
|
||
|
|
*/
|
||
|
|
|
||
|
|
import React from "react";
|
||
|
|
import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom";
|
||
|
|
import { AnimatePresence, motion } from "motion/react";
|
||
|
|
import Layout from "./components/Layout";
|
||
|
|
import Home from "./pages/Home";
|
||
|
|
import Sobre from "./pages/Sobre";
|
||
|
|
import Blog from "./pages/Blog";
|
||
|
|
import Contato from "./pages/Contato";
|
||
|
|
import BlogPost from "./pages/BlogPost";
|
||
|
|
import NotFound from "./pages/NotFound";
|
||
|
|
|
||
|
|
const PageTransition: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
||
|
|
return (
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: 15 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
exit={{ opacity: 0, y: -15 }}
|
||
|
|
transition={{ duration: 0.3, ease: "easeInOut" }}
|
||
|
|
className="flex flex-col flex-grow w-full"
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</motion.div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
function AnimatedRoutes() {
|
||
|
|
const location = useLocation();
|
||
|
|
return (
|
||
|
|
<AnimatePresence mode="wait">
|
||
|
|
<Routes location={location}>
|
||
|
|
<Route path="/" element={<PageTransition key="home"><Home /></PageTransition>} />
|
||
|
|
<Route path="/sobre" element={<PageTransition key="sobre"><Sobre /></PageTransition>} />
|
||
|
|
<Route path="/blog" element={<PageTransition key="blog"><Blog /></PageTransition>} />
|
||
|
|
<Route path="/blog/:slug" element={<PageTransition key="post"><BlogPost /></PageTransition>} />
|
||
|
|
<Route path="/contato" element={<PageTransition key="contato"><Contato /></PageTransition>} />
|
||
|
|
<Route path="*" element={<PageTransition key="notfound"><NotFound /></PageTransition>} />
|
||
|
|
</Routes>
|
||
|
|
</AnimatePresence>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function App() {
|
||
|
|
return (
|
||
|
|
<BrowserRouter>
|
||
|
|
<Layout>
|
||
|
|
<AnimatedRoutes />
|
||
|
|
</Layout>
|
||
|
|
</BrowserRouter>
|
||
|
|
);
|
||
|
|
}
|