add routing

Author: filipKovachev

examples/ecommerce-jewellery-store/package-lock.json

@@ -26,7 +26,8 @@
     "@progress/kendo-theme-default": "^9.1.0",
     "@progress/kendo-theme-utils": "^9.1.0",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.27.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.11.1",

examples/ecommerce-jewellery-store/package.json

@@ -1,21 +1,32 @@
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import Header from "@/components/Header";
 import Footer from "@/components/Footer";
+import Contacts from "@/pages/Contacts";
+import ThankYou from "@/pages/ThankYou";
+import ShoppingCart from "@/pages/ShoppingCart";
+import PaymentDetails from "@/pages/PaymentDetails";
 import { AllProductsListView } from "./pages/AllProductsListView";
+import Home from "@/pages/Home"; 
 import "@progress/kendo-theme-default/dist/all.css";
 import "@progress/kendo-theme-utils/dist/all.scss";
 import { SizedParent } from "./components/SizedParent";
 
 function App() {
-
-
   return (
-    <>
-      <Header />
+    <Router>
       <SizedParent>
-        <AllProductsListView></AllProductsListView>
+        <Header />
+        <Routes>
+        <Route path="/home" element={<Home />} />
+          <Route path="/paymentdetails" element={<PaymentDetails />} />
+          <Route path="/shoppingcart" element={<ShoppingCart />} />
+          <Route path="/thankyou" element={<ThankYou />} />
+          <Route path="/contacts" element={<Contacts />} />
+          <Route path="/products" element={<AllProductsListView />} />
+        </Routes>
+        <Footer />
       </SizedParent>
-      <Footer />
-    </>
+    </Router>
   );
 }
 

examples/ecommerce-jewellery-store/src/App.tsx

@@ -1,10 +1,10 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import App from './App.tsx'
-import './styles.css'
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+import './styles.css';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <App />
-  </StrictMode>,
-)
+  </StrictMode>
+);

examples/ecommerce-jewellery-store/src/main.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Contacts: React.FC = () => {
+  return (
+    <>
+     Contacts
+    </>
+  );
+};
+
+export default Contacts;

examples/ecommerce-jewellery-store/src/pages/Contacts.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Home: React.FC = () => {
+  return (
+    <>
+     Home Page
+    </>
+  );
+};
+
+export default Home;

examples/ecommerce-jewellery-store/src/pages/Home.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const PaymentDetails: React.FC = () => {
+  return (
+    <>
+     Payment Details
+    </>
+  );
+};
+
+export default PaymentDetails;

examples/ecommerce-jewellery-store/src/pages/PaymentDetails.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const ShoppingCart: React.FC = () => {
+  return (
+    <>
+     Shopping Cart
+    </>
+  );
+};
+
+export default ShoppingCart;

examples/ecommerce-jewellery-store/src/pages/ShoppingCart.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const ThankYou: React.FC = () => {
+  return (
+    <>
+     Thank you page
+    </>
+  );
+};
+
+export default ThankYou;