54 lines
2.3 KiB
TypeScript
54 lines
2.3 KiB
TypeScript
import React, { Suspense, lazy } from 'react';
|
|
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
|
|
import Header from './components/Header';
|
|
import Footer from './components/Footer';
|
|
import Cart from './components/Cart';
|
|
import ScrollToTop from './components/ScrollToTop';
|
|
import RouteTransition from './components/RouteTransition';
|
|
import { StoreProvider } from './src/context/StoreContext';
|
|
|
|
// Lazy load pages for better performance
|
|
const Home = lazy(() => import('./pages/Home'));
|
|
const Collections = lazy(() => import('./pages/Collections'));
|
|
const Atelier = lazy(() => import('./pages/Atelier'));
|
|
const Editorial = lazy(() => import('./pages/Editorial'));
|
|
const ProductPhotography = lazy(() => import('./pages/Journal/ProductPhotography'));
|
|
const PackagingGuide = lazy(() => import('./pages/Journal/PackagingGuide'));
|
|
const MotivationInClay = lazy(() => import('./pages/Journal/MotivationInClay'));
|
|
const ProductDetail = lazy(() => import('./pages/ProductDetail'));
|
|
const ArticleDetail = lazy(() => import('./pages/ArticleDetail'));
|
|
const Checkout = lazy(() => import('./pages/Checkout'));
|
|
const MockPayment = lazy(() => import('./pages/MockPayment'));
|
|
const Success = lazy(() => import('./pages/Success'));
|
|
const Admin = lazy(() => import('./pages/Admin'));
|
|
|
|
function App() {
|
|
return (
|
|
<Router>
|
|
<StoreProvider>
|
|
<ScrollToTop />
|
|
<Header />
|
|
<Cart />
|
|
<RouteTransition>
|
|
<Suspense fallback={null}>
|
|
<Routes>
|
|
<Route path="/" element={<Home />} />
|
|
<Route path="/collections" element={<Collections />} />
|
|
<Route path="/collections/:slug" element={<ProductDetail />} />
|
|
<Route path="/atelier" element={<Atelier />} />
|
|
<Route path="/editorial" element={<Editorial />} />
|
|
<Route path="/editorial/:slug" element={<ArticleDetail />} />
|
|
<Route path="/checkout" element={<Checkout />} />
|
|
<Route path="/mock-payment" element={<MockPayment />} />
|
|
<Route path="/success" element={<Success />} />
|
|
<Route path="/admin" element={<Admin />} />
|
|
</Routes>
|
|
</Suspense>
|
|
</RouteTransition>
|
|
<Footer />
|
|
</StoreProvider>
|
|
</Router>
|
|
);
|
|
}
|
|
|
|
export default App; |