51 lines
2 KiB
TypeScript
51 lines
2 KiB
TypeScript
import type { ReactElement } from 'react';
|
|
import { lazy, Suspense } from 'react';
|
|
import { BrowserRouter, Routes, Route } from 'react-router-dom';
|
|
import { ThemeProvider } from 'styled-components';
|
|
import { GlobalStyles } from './GlobalStyles';
|
|
import { theme } from './theme';
|
|
import { Layout } from '@/components/Layout';
|
|
import { Spinner } from '@/components/ui';
|
|
|
|
const OverviewPage = lazy(() => import('@/pages/OverviewPage'));
|
|
const TrafficPage = lazy(() => import('@/pages/TrafficPage'));
|
|
const PagesPage = lazy(() => import('@/pages/PagesPage'));
|
|
const AudiencePage = lazy(() => import('@/pages/AudiencePage'));
|
|
const JourneyPage = lazy(() => import('@/pages/JourneyPage'));
|
|
const FlowsPage = lazy(() => import('@/pages/FlowsPage'));
|
|
const LinkValuePage = lazy(() => import('@/pages/LinkValuePage'));
|
|
const EventsPage = lazy(() => import('@/pages/EventsPage'));
|
|
const NetworkPage = lazy(() => import('@/pages/NetworkPage'));
|
|
|
|
function PageFallback(): ReactElement {
|
|
return (
|
|
<div style={{ display: 'flex', justifyContent: 'center', padding: '80px 0' }}>
|
|
<Spinner />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function App(): ReactElement {
|
|
return (
|
|
<ThemeProvider theme={theme}>
|
|
<GlobalStyles />
|
|
<BrowserRouter>
|
|
<Suspense fallback={<PageFallback />}>
|
|
<Routes>
|
|
<Route element={<Layout />}>
|
|
<Route index element={<OverviewPage />} />
|
|
<Route path="traffic" element={<TrafficPage />} />
|
|
<Route path="pages" element={<PagesPage />} />
|
|
<Route path="events" element={<EventsPage />} />
|
|
<Route path="audience" element={<AudiencePage />} />
|
|
<Route path="journey" element={<JourneyPage />} />
|
|
<Route path="flows" element={<FlowsPage />} />
|
|
<Route path="link-value" element={<LinkValuePage />} />
|
|
<Route path="network" element={<NetworkPage />} />
|
|
</Route>
|
|
</Routes>
|
|
</Suspense>
|
|
</BrowserRouter>
|
|
</ThemeProvider>
|
|
);
|
|
}
|