Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 11x 11x 11x 1x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 1x | import { Routes, Route } from 'react-router-dom';
import { motion } from 'framer-motion';
import { lazy, Suspense } from 'react';
import PageLoader from '@/shared/components/PageLoader/PageLoader';
import MainLayout from '@/view/components/layouts/MainLayout';
const MainPage = lazy(() => import('@/view/pages/MainPage/MainPage'));
const EpisodesPage = lazy(() => import('@/view/pages/EpisodesPage/EpisodesPage'));
const LocationPage = lazy(() => import('@/view/pages/LocationPage/LocationPage'));
const DetailPage = lazy(() => import('@/view/pages/MainPage/DetailPage/DetailPage'));
const PageWrapper = ({ children }: { children: React.ReactNode }) => (
<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -20 }} transition={{ duration: 0.3 }}>
{children}
</motion.div>
);
const AppRoutes = () => {
return (
<Suspense fallback={<PageLoader />}>
<Routes>
<Route path="/" element={<MainLayout />}>
<Route
path="/"
element={
<PageWrapper>
<MainPage />
</PageWrapper>
}
/>
<Route
path="/character/:id"
element={
<PageWrapper>
<DetailPage />
</PageWrapper>
}
/>
<Route
path="/episodes"
element={
<PageWrapper>
<EpisodesPage />
</PageWrapper>
}
/>
<Route
path="/location"
element={
<PageWrapper>
<LocationPage />
</PageWrapper>
}
/>
</Route>
</Routes>
</Suspense>
);
};
export default AppRoutes;
|