Merge pull request #113 from wethmiranasinghe/main

Repository Tabs Added
cepdnaclk · Sep 22, 2024 · 7bee52d · 7bee52d
2 parents d581326 + 0f70993
commit 7bee52d
Show file tree

Hide file tree

Showing 2 changed files with 128 additions and 60 deletions.
diff --git a/front-end/src/Pages/Repository.jsx b/front-end/src/Pages/Repository.jsx
@@ -1,46 +1,83 @@
 import style from "../components/Repository.module.css";
+import React, { useState } from 'react';
 
 // Repository component to display various sections with embedded Google Drive folders
 function Repository() {
-    return(
-      <>
+
+  // State to manage the active tab
+  const [activeTab, setActiveTab] = useState('uop');
+
+  // Function to handle tab changes
+  const handleTabChange = (tab) => {
+    setActiveTab(tab);
+  };
+
+  return (
+    <>
       {/* Title of the Repository section */}
       <div className={style["RepositoryTitle"]}>
-          <h3>Repository</h3>
-      </div>
-
-      {/* Subtitle for the UOP Working Folder section */}
-      <div className={style["RepositorySubTitle"]}>
-        <h3>UOP Working Folder</h3>
+        <h3>Repository</h3>
       </div>
 
-      {/* Subsection for Proposal */}
-      <div className={style["RepositorySuperSubTitle"]}>
-        <h4>Proposal</h4>
-      </div>
+      {/* Tabs for different repositories */}
+      <div className={style["RepoTabs"]}>
+        <button 
+          className={activeTab === 'uop' ? 'active' : ''}
+          onClick={() => handleTabChange('uop')}>
+            <div className={style["RepositorySubTitle"]}>
+              <h3>UOP Working Folder</h3>
+            </div>
+        </button>
 
-      {/* Embedded Google Drive folder for Proposal */}
-      <iframe src="https://drive.google.com/embeddedfolderview?id=1EEitAz95vn4SFYBjCs3EhQocrWTqdeRi" style={{border: "0", width:"98%", height:"390px", margin:"0% 0% 0% 10%",frameborder:"", scrolling:"no"}}></iframe>
-
-      {/* Subsection for Templates */}
-      <div className={style["RepositorySuperSubTitle"]}>
-        <h4>Templates</h4>
-      </div>
-      <iframe src="https://drive.google.com/embeddedfolderview?id=1AGXqE6b97AOldcHFNmodrevUzPTGpXPG" style={{border: "0", width:"98%", height:"260px", margin:"0% 0% 0% 10%",frameborder:"0", scrolling:"no"}}></iframe>
-
-       {/* Subsection for WP5 */}
-      <div className={style["RepositorySuperSubTitle"]}>
-        <h4>WP5</h4>
+        <button 
+          className={activeTab === 'cycle' ? 'active' : ''}
+          onClick={() => handleTabChange('cycle')}>
+            <div className={style["RepositorySubTitle"]}>
+              <h3>CYCLE Data</h3>
+            </div>
+        </button>
       </div>
-      <iframe src="https://drive.google.com/embeddedfolderview?id=1d85hXNPGQw6p3unb5nZp7O9DV-tnV0TM" style={{border: "0", width:"98%", height:"300px", margin:"0% 0% 0% 10%",frameborder:"0", scrolling:"no"}}></iframe>
 
-      {/* Subtitle for CYCLE Data section */}
-      <div className={style["RepositorySubTitle"]}>
-        <h3>CYCLE Data</h3>
-      </div>
-      <iframe src="https://drive.google.com/embeddedfolderview?id=1RzGm4lVDQRY-rmHXJhyUAzy_I2BYx4ve" style={{border: "0", width:"98%", height:"600px", margin:"0% 0% 0% 3%",frameborder:"0", scrolling:"no"}}></iframe>
-        </>
-    );
-  }
-
-  export default Repository;
+      {/* UOP Tab Content */}
+      {activeTab === 'uop' && (
+        <div>
+          <div className={style["RepositorySuperSubTitle"]}>
+            <h4>Proposal</h4>
+          </div>
+          <iframe 
+            src="https://drive.google.com/embeddedfolderview?id=1EEitAz95vn4SFYBjCs3EhQocrWTqdeRi" 
+            style={{border: "0", width: "98%", height: "390px", margin: "0% 0% 0% 10%", scrolling: "no"}}>
+          </iframe>
+
+          <div className={style["RepositorySuperSubTitle"]}>
+            <h4>Templates</h4>
+          </div>
+          <iframe 
+            src="https://drive.google.com/embeddedfolderview?id=1AGXqE6b97AOldcHFNmodrevUzPTGpXPG" 
+            style={{border: "0", width: "98%", height: "260px", margin: "0% 0% 0% 10%", scrolling: "no"}}>
+          </iframe>
+
+          <div className={style["RepositorySuperSubTitle"]}>
+            <h4>WP5</h4>
+          </div>
+          <iframe 
+            src="https://drive.google.com/embeddedfolderview?id=1d85hXNPGQw6p3unb5nZp7O9DV-tnV0TM" 
+            style={{border: "0", width: "98%", height: "300px", margin: "0% 0% 0% 10%", scrolling: "no"}}>
+          </iframe>
+        </div>
+      )}
+
+      {/* Cycle Tab Content */}
+      {activeTab === 'cycle' && (
+        <div>
+          <iframe 
+            src="https://drive.google.com/embeddedfolderview?id=1RzGm4lVDQRY-rmHXJhyUAzy_I2BYx4ve" 
+            style={{border: "0", width: "98%", height: "600px", margin: "0% 0% 0% 3%", scrolling: "no"}}>
+          </iframe>
+        </div>
+      )}
+    </>
+  );
+}
+
+export default Repository;
diff --git a/front-end/src/components/Repository.module.css b/front-end/src/components/Repository.module.css
@@ -1,32 +1,63 @@
-/* Styling for the main repository title */
-.RepositoryTitle{
-    margin-top: 2%;
+/* General repository title styling */
+.RepositoryTitle {
+  margin-top: 1%;
     margin-left: 5%;
     text-align: left;
-    margin-bottom: 1%;
     font-size: 20px;
     font-family: 'Caudex';
-  }
+    color: #000000;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-right: 5%;
+}
 
-  /* Styling for the subtitle of the repository */
-  .RepositorySubTitle{
-    margin-top: 2%;
-    margin-left: 5%;
-    text-align: left;
-    margin-bottom: 1%;
-    font-size: 15px;
-    font-family: 'Caudex';
-    color: rgb(10, 48, 128);
-  }
+/* Flex container for the buttons */
+.RepoTabs {
+  display: flex;
+  justify-content: center;  /* Centers the buttons container */
+  align-items: center;
+  width: 90%;  /* Ensure the container takes the full width */
+  margin-left: 5%;
+  margin-right: 5%;
+}
 
-  /* Styling for sub-subtitle under the repository section */
-  .RepositorySuperSubTitle{
-    margin-top: 2%;
-    margin-left: 8%;
-    text-align: left;
-    margin-bottom: 1%;
-    font-size: 15px;
-    font-family: 'Caudex';
-    color: rgb(10, 48, 128);
-  }
+/* Individual button styling */
+.RepoTabs button {
+  width: 50%;  /* Each button will take 50% of the available width */
+  height: 60px;
+  padding: 0 0 17px 0;
+  background-color: rgba(228, 246, 250, 0.9);
+  margin: 0;  /* No space between the buttons */
+  border: 2px solid #e5e8f6e6;
+  font-size: 16px;
+  cursor: pointer;
+  text-align: center;
+  transition: background-color 0.3s ease;
+}
+
+/* Active button styling */
+.RepoTabs button:active {
+  border-bottom: 2px solid #254ad281; /* Underline for the active tab */
+}
+
+/* Hover effect */
+.RepoTabs button:hover {
+  background-color: rgb(222, 241, 252);
+}
+
+/* Repository subtitle styling */
+.RepositorySubTitle {
+  text-align: center;
+  margin: 10px 0;
+  color: #203a90;;
+  font-family: 'Caudex';
+}
 
+/* Repository super subtitle styling */
+.RepositorySuperSubTitle {
+  margin-left: 10%;
+  margin-top: 20px;
+  font-weight: bold;
+  font-family: 'Caudex';
+}