Merge pull request #35 from UoaWDCC/feat/karmveer/web-structure

Made the structure for web folder

web/src/App.tsx

@@ -1,20 +1,19 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { createBrowserRouter, RouterProvider } from 'react-router-dom';
-import { useState } from 'react';
-import Home from '@pages/Home';
+import { Outlet } from 'react-router-dom';
+import Header from './components/Header';
+import Footer from './components/Footer';
 
-const router = createBrowserRouter([
-  {
-    path: '/:name',
-    element: <Home />,
-  },
-]);
-
-export default function App() {
-  const [queryClient] = useState(() => new QueryClient());
+const App = () => {
   return (
-    <QueryClientProvider client={queryClient}>
-      <RouterProvider router={router} />
-    </QueryClientProvider>
+      <>
+        <Header />
+        <main className="py-3">
+          <div className="max-w-6xl mx-auto px-4">
+            <Outlet />
+          </div>
+        </main>
+        <Footer />
+      </>
   );
 }
+
+export default App;

web/src/components/Footer.tsx

@@ -0,0 +1,10 @@
+function Footer() {
+    const currentTime = new Date().getFullYear();
+    return (
+        <footer>
+            <h1>Footer | {currentTime}</h1>
+        </footer>
+    )
+}
+
+export default Footer

web/src/components/Header.tsx

@@ -0,0 +1,11 @@
+
+function Header() {
+
+    return (
+        <header>
+            <h1>Header</h1>
+        </header>
+    )
+}
+
+export default Header

web/src/main.tsx

@@ -1,10 +1,32 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { createBrowserRouter, createRoutesFromElements, Route } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { RouterProvider } from 'react-router-dom';
+
 import App from './App.tsx';
 import './index.css';
 
+import HomeScreen from "./screens/Home.tsx"
+import TestScreen from "./screens/Test.tsx"
+
+
+//Add any routes for screens below
+const router = createBrowserRouter(
+    createRoutesFromElements(
+        <Route path="/"  element={<App />}>
+            <Route index={true} element={<HomeScreen />} />
+            <Route path="/test" element={<TestScreen />} />
+        </Route>
+    )
+);
+
+const queryClient = new QueryClient();
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+    <React.StrictMode>
+        <QueryClientProvider client={queryClient}>
+            <RouterProvider router={router} />
+        </QueryClientProvider>
+    </React.StrictMode>
 );

web/src/screens/Test.tsx

@@ -0,0 +1,9 @@
+function TestScreen() {
+    return (
+        <div>
+            <h2> Test Screen</h2>
+        </div>
+    )
+}
+
+export default TestScreen