dynamic semester and subject

package.json

@@ -15,7 +15,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
-    "react-icons": "^4.8.0"
+    "react-icons": "^4.8.0",
+    "react-router-dom": "^6.11.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",

src/App.jsx

@@ -1,10 +1,15 @@
-import React from "react";
+import { Route, Routes } from "react-router-dom";
 import HomePage from "./pages/HomePage";
+import RespectivePage from "./pages/respectivePage";
 
 function App() {
   return (
     <>
-      <HomePage />
+    <Routes>
+    <Route path="/" element={ <HomePage />} />
+    <Route path="/subject" element={ <RespectivePage />} />
+
+    </Routes>
     </>
   );
 }

src/components/Footer.jsx

@@ -11,7 +11,7 @@ const Footer = () => {
         <span className="heart">
           <AiFillHeart />{" "}
         </span>{" "}
-        by EmpSwarup
+        by Nishant
       </h3>
     </div>
   );

src/components/Header.jsx

@@ -17,9 +17,9 @@ const Header = () => {
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              class="ccustom"
-              fill-rule="evenodd"
-              clip-rule="evenodd"
+              className="ccustom"
+              fillRule="evenodd"
+              clipRule="evenodd"
               d="M10 0C15.5228 0 20 4.47715 20 10V0H30C35.5228 0 40 4.47715 40 10C40 15.5228 35.5228 20 30 20C35.5228 20 40 24.4772 40 30C40 32.7423 38.8961 35.2268 37.1085 37.0334L37.0711 37.0711L37.0379 37.1041C35.2309 38.8943 32.7446 40 30 40C27.2741 40 24.8029 38.9093 22.999 37.1405C22.9756 37.1175 22.9522 37.0943 22.9289 37.0711C22.907 37.0492 22.8852 37.0272 22.8635 37.0051C21.0924 35.2009 20 32.728 20 30C20 35.5228 15.5228 40 10 40C4.47715 40 0 35.5228 0 30V20H10C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0ZM18 10C18 14.4183 14.4183 18 10 18V2C14.4183 2 18 5.58172 18 10ZM38 30C38 25.5817 34.4183 22 30 22C25.5817 22 22 25.5817 22 30H38ZM2 22V30C2 34.4183 5.58172 38 10 38C14.4183 38 18 34.4183 18 30V22H2ZM22 18V2L30 2C34.4183 2 38 5.58172 38 10C38 14.4183 34.4183 18 30 18H22Z"
               fill="#5417D7"
             ></path>

src/components/HomeContainer.css

@@ -13,7 +13,7 @@
 }
 
 .ag-format-container {
-  width: 1142px;
+  width: 90%;
   margin: 0 auto;
   font-family: "Poppins", sans-serif;
 }
@@ -33,7 +33,7 @@
 .ag-courses_item {
   -ms-flex-preferred-size: calc(33.33333% - 30px);
   flex-basis: calc(33.33333% - 30px);
-
+  cursor: pointer;
   margin: 0 15px 30px;
 
   overflow: hidden;

src/components/HomeContainer.jsx

@@ -1,30 +1,39 @@
-import React from "react";
+// import React from "react";
 import "./HomeContainer.css";
 import "animate.css";
 import data from "./data.json";
+import { useNavigate } from "react-router-dom";
 
 const HomeContainer = () => {
+const navigate = useNavigate()
+
+
   return (
     <>
-      <div className="titletext animate__animated animate__fadeIn animate__delay-1s">
+      <div className="titletext animate__animated animate__fadeIn animate__delay-1s" >
         Notes for BE. Computer
       </div>
-      <div className="ag-format-container animate__animated animate__fadeIn animate__delay-1s">
+      <div className="ag-format-container animate__animated animate__fadeIn animate__delay-1s" >
         <div className="ag-courses_box">
-          {data.semesters.map((item) => {
-            return (
-              <div key={item.id} className="ag-courses_item">
-                <a href="#" className="ag-courses-item_link">
-                  <div className="ag-courses-item_bg" />
-                  <div className="ag-courses-item_title">{item.sem}</div>
-                  <div className="ag-courses-item_date-box">
-                    Subjects:<span> </span>
-                    <span className="ag-courses-item_date">{item?.sub}</span>
-                  </div>
-                </a>
-              </div>
-            );
-          })}
+          {
+
+            data.semesters.map((item) => {
+              return (
+                <div key={item.id} className="ag-courses_item ag-courses-item_link" onClick={()=>navigate('/subject',{state: item})}>
+                    <div className="ag-courses-item_bg " />
+                    <div className="ag-courses-item_title">{item.sem}</div>
+                    <div className="ag-courses-item_date-box">
+                      Subjects:<span> </span>
+                      <span className="ag-courses-item_date">
+                        {item?.sub}
+                      </span>
+                    </div>
+                </div>
+              )
+
+            })
+
+          }
         </div>
       </div>
     </>

src/components/Layout.jsx

@@ -1,8 +1,7 @@
-import React, { Children } from "react";
 import Header from "./Header";
 import Footer from "./Footer";
 
-const Layout = ({ children }) => {
+const Layout = ({children}) => {
   return (
     <>
       <Header />

src/components/data.json

@@ -3,42 +3,58 @@
     {
       "id": 1,
       "sem": "First Semester",
-      "sub": "Basic Electrical Engineering, Chemistry, Communication Technique, Engineering Mathematics I, Programming in C,Mechanical Workshop"
+      "sub": "Basic Electrical Engineering, Chemistry, Communication Technique, Engineering Mathematics I, Programming in C,Mechanical Workshop",
+      "subjects": ["Basic Electrical Engineering", "Chemistry", "Communication Technique", "Engineering Mathematics I", "Programming in C","Mechanical Workshop"]
+
     },
     {
       "id": 2,
       "sem": "Second Semester",
-      "sub": "Applied Mechanics I, Engineering Drawing, Engineering Mathematics II, Object Oriented Programming in C ++, Physics, Thermal Science"
+      "sub": "Applied Mechanics I, Engineering Drawing, Engineering Mathematics II, Object Oriented Programming in C ++, Physics, Thermal Science",
+      "subjects": ["Applied Mechanics I", "Engineering Drawing", "Engineering Mathematics II", "Object Oriented Programming in C ++", "Physics, Thermal Science"]
+
     },
     {
       "id": 3,
       "sem": "Third Semester",
-      "sub": "Engineering Mathematics III, Data Structure and Algorithms, Electrical Engineering Materials, Electronics Devices and Circuit, Logic Circuit, Network Theory"
+      "sub": "Engineering Mathematics III, Data Structure and Algorithms, Electrical Engineering Materials, Electronics Devices and Circuit, Logic Circuit, Network Theory",
+      "subjects": ["Engineering Mathematics III", "Data Structure and Algorithms", "Electrical Engineering Materials", "Electronics Devices and Circuit", "Logic Circuit, Network Theory"]
+
     },
     {
       "id": 4,
       "sem": "Fourth Semester",
-      "sub": "Database Management Systems, Engineering Mathematics IV, Instrumentation, Microprocessor, Project I, Programming Technology"
+      "sub": "Database Management Systems, Engineering Mathematics IV, Instrumentation, Microprocessor, Project I, Programming Technology",
+      "subjects": ["Database Management Systems", "Engineering Mathematics IV", "Instrumentation", "Microprocessor", "Project I", "Programming Technology"]
+
     },
     {
       "id": 5,
       "sem": "Fifth Semester",
-      "sub": "Advanced Computer Architecture, Computer Graphics, Distributed Operating System, Numerical Methods, Probability and Statistics, Theory of Computation"
+      "sub": "Advanced Computer Architecture, Computer Graphics, Distributed Operating System, Numerical Methods, Probability and Statistics, Theory of Computation",
+      "subjects":[ "Advanced Computer Architecture", "Computer Graphics", "Distributed Operating System", "Numerical Methods", "Probability and Statistics", "Theory of Computation"]
+
     },
     {
       "id": 6,
       "sem": "Sixth Semester",
-      "sub": "Data Communication, Elective-I, Embedded Systems, Object Oriented Software Engineering, Project II, Simulation and Modelling"
+      "sub": "Data Communication, Elective-I, Embedded Systems, Object Oriented Software Engineering, Project II, Simulation and Modelling",
+      "subjects": ["Data Communication, Elective-I", "Embedded Systems", "Object Oriented Software Engineering", "Project II", "Simulation and Modelling"]
+
     },
     {
       "id": 7,
       "sem": "Seventh Semester",
-      "sub": "Artificial Intelligence, Computer Network, Elective II, Engineering Economics, ICT Project Management, Image Processing and Pattern Recognition"
+      "sub": "Artificial Intelligence, Computer Network, Elective II, Engineering Economics, ICT Project Management, Image Processing and Pattern Recognition",
+      "subjects":[ "Artificial Intelligence", "Computer Network", "Elective II", "Engineering Economics", "ICT Project Management", "Image Processing and Pattern Recognition"]
+
     },
     {
       "id": 8,
       "sem": "Seventh Semester",
-      "sub": "Social & Professional Issues in IT, Project III, Organization and Management, Information Systems, Elective III, Digital Signal Analysis and Processing"
+      "sub": "Social & Professional Issues in IT, Project III, Organization and Management, Information Systems, Elective III, Digital Signal Analysis and Processing",
+      "subjects": ["Social & Professional Issues in IT", "Project III", "Organization and Management", "Information Systems", "Elective III", "Digital Signal Analysis and Processing"]
+
     }
   ]
 }

src/main.jsx

@@ -1,9 +1,12 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.jsx";
+import { BrowserRouter } from "react-router-dom";
 
 ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
-    <App />
+  <BrowserRouter>
+  <App />
+  </BrowserRouter>
   </React.StrictMode>
 );