Created pages for home, about, scan and customsheet

bubblescan-client/package.json

@@ -12,7 +12,8 @@
     "bootstrap": "^5.3.2",
     "cors": "^2.8.5",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.28.0"
   },
   "devDependencies": {
     "@types/node": "^22.7.5",

bubblescan-client/src/App.tsx

@@ -1,20 +1,26 @@
 import React, { useEffect, useState, useRef } from "react";
-import FileUploadComponent from "./components/FileUploadComponent";
-import CustomExamSheetComponent from "./components/CustomExamSheetComponent";
 import config from "./utils/config";
 
-import "./App.css";
+import "./styles/App.css";
+
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import Header from "./components/Header";
+import Footer from "./components/Footer";
+import Home from "./pages/Home";
+import Customsheets from "./pages/Customsheets";
+import Scan from "./pages/Scan";
+import Aboutus from "./pages/AboutUs";
 
 
 function App() {
   const [data, setData] = useState<string>("");
   const [message, setMessage] = useState<string>("");
   const [response, setResponse] = useState<string>("");
   const [isFormVisible, setFormVisible] = useState(false);
-  const [numQuestions, setNumQuestions] = useState<number>(5);  
-  const [numOptions, setNumOptions] = useState<number>(4); 
+  const [numQuestions, setNumQuestions] = useState<number>(5);
+  const [numOptions, setNumOptions] = useState<number>(4);
   const [examTitle, setExamTitle] = useState('');
-  
+
 
   // Fetch initial data from Flask
   useEffect(() => {
@@ -24,7 +30,7 @@ function App() {
       .catch((error) => console.error("Error fetching data:", error));
   }, []);
 
-  
+
   // Function to send message to Flask
   const sendMessage = async () => {
     console.log("Sending message to Flask...");
@@ -45,17 +51,27 @@ function App() {
     }
   };
 
-
   return (
-    <div className="welcome">
-      <h1>Welcome to Bubble Scan</h1>
-      <h4>You can upload your files below</h4>
-      <FileUploadComponent />
-
-
-      <CustomExamSheetComponent />
-    </div>
+    <Router>
+      <div className="main-container">
+        <Header />
+        <div className="main-content">
+          <div className="appContent">
+            <div>
+              <Routes>
+                <Route path="/" element={<Home />} />
+                <Route path="/Scan" element={<Scan />} />
+                <Route path="/customsheets" element={<Customsheets />} />
+                <Route path="/AboutUs" element={<Aboutus />} />
+              </Routes>
+            </div>
+          </div>
+        </div>
+        <Footer />
+      </div>
+    </Router>
   );
+
 };
 
 export default App;

bubblescan-client/src/components/Button.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import '../styles/Button.css';
+import { useNavigate } from 'react-router-dom';
+
+interface ButtonProps {
+    text: string;
+    dark?: boolean;
+    to?: string;
+}
+
+const Button: React.FC<ButtonProps> = ({ text, dark = false, to }) => {
+
+    const navigate = useNavigate();
+
+    const handleClick = () => {
+        if (to) {
+            navigate(to);
+        }
+    };
+
+    return (
+        <button className={`button ${dark ? 'button-dark' : 'button-light'}`}
+            onClick={handleClick}
+        >
+            {text}
+        </button>
+    );
+};
+
+export default Button;