Commit With Frontend and Backend in MERN

frontend/src/Page2.js

@@ -0,0 +1,77 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import './Page2.css'; // CSS File import
+
+// Import images from the src/components folder
+import image from './components/image.png';
+import somaiyatrust from './components/somaiyatrust.png';
+import redlines from './components/redlines.png';
+
+const Page2 = () => {
+  const [selectedStream, setSelectedStream] = useState(null);
+
+  // Handle stream click to display content
+  const handleStreamClick = (stream) => {
+    setSelectedStream(stream);
+  };
+
+  return (
+    <div className="page-container">
+      {/* Header Bar */}
+      <header className="header-bar">
+        <img src={image} alt="Left Logo" className="leftlogo" />
+        <h1 className="college-name">Somaiya Scheduler</h1>
+        <img src={somaiyatrust} alt="Right Logo" className="rightlogo" />
+      </header>
+
+      {/* Navigation Bar */}
+      <nav className="navbar">
+        <ul>
+          <li><Link to="/page2">Home</Link></li>
+          <li><Link to="/page3">Schedule</Link></li>
+          <li><a href="#">About</a></li>
+          <li><a href="#">Contact</a></li>
+          <li><Link to="/">Login/Signup</Link></li>
+        </ul>
+      </nav>
+
+      {/* Main Content Container */}
+      <div className="main-container">
+        {/* Stream Bar (Right Side) */}
+        <div className="stream-bar" id="streamBar">
+          <h3>Streams</h3>
+          <ul>
+            <li onClick={() => handleStreamClick("Engineering & Technology")}><Link to="/page4">Engineering & Technology</Link></li>
+            <li onClick={() => handleStreamClick("Management")}>Management Studies</li>
+            <li onClick={() => handleStreamClick("Education")}>Education</li>
+            <li onClick={() => handleStreamClick("Dharama")}>Dharama Studies</li>
+            <li onClick={() => handleStreamClick("Commerce")}>Commerce & Business Studies</li>
+            <li onClick={() => handleStreamClick("Science")}>Science</li>
+            <li onClick={() => handleStreamClick("Humanities")}>Humanities & Social Science</li>
+            <li onClick={() => handleStreamClick("Music")}>Music Performance & Art</li>
+            <li onClick={() => handleStreamClick("Language")}>Language & Literature</li>
+          </ul>
+        </div>
+
+        {/* Content Area (Left Side) */}
+        <div className="content-area" id="contentArea">
+          {selectedStream ? (
+            <p>You selected <strong>{selectedStream}</strong>. Here are the programs and faculty details.</p>
+          ) : (
+            <p>Select a stream to view its programs and faculty.</p>
+          )}
+        </div>
+      </div>
+
+      {/* Footer */}
+      <footer>
+        <div className="terms">
+          <a href="#">Terms and Policies</a>
+          <img src={redlines} alt="Footer Logo" className="footer-image" />
+        </div>
+      </footer>
+    </div>
+  );
+};
+
+export default Page2;