Implement React Tabs for Resources Part of Website

src/navbar/NavigationBar.js

@@ -103,11 +103,11 @@ const NavigationBar = () => {
               <div className="dropdown-content">
                 <Link className="dropdown-link" to="/activity/events">
                   {" "}
-                  &gt; Event
+                  &gt; Events
                 </Link>
                 <Link className="dropdown-link" to="/activity/projects">
                   {" "}
-                  &gt; Project
+                  &gt; Projects
                 </Link>
               </div>
             </div>
@@ -127,15 +127,15 @@ const NavigationBar = () => {
                 Resources
               </Link>
               <div className="dropdown-content">
-                <Link className="dropdown-link" to="/events">
+                <Link className="dropdown-link" to="/resources/tutorials">
                   {" "}
-                  &gt; Tutorial
+                  &gt; Tutorials
                 </Link>
-                <Link className="dropdown-link" to="/projects">
+                <Link className="dropdown-link" to="/resources/research">
                   {" "}
                   &gt; Research
                 </Link>
-                <Link className="dropdown-link" to="/projects">
+                <Link className="dropdown-link" to="/resources/organizations">
                   {" "}
                   &gt; Organizations
                 </Link>

src/resources/Organizations.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import './resources.css';
+
+
+function Organizations() {
+    return (
+        <div>Organizations</div>
+    )
+}
+
+export default Organizations;

src/resources/Research.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import './resources.css';
+
+
+function Research() {
+    return (
+        <div>Research</div>
+    )
+}
+
+export default Research;

src/resources/Resources.js

@@ -1,50 +1,82 @@
-import React from "react";
+import React, { useState, useRef } from 'react';
 import "./resources.css";
+import Tutorials from './Tutorials.js';
+import Research from './Research';
+import Organizations from './Organizations';
 
-export default function Resources() {
-  return (
-    <div className="resources-container">
-      <div className="resources-wrapper">
-        <div className="resources-info">
-          <div className="resources-title">Scholarships & Programs</div>
-          <div className="resources-desc">
-            <span>Scholarships:</span>
-            <ul className="resources-list">
-              <li>Our scholarship application period is currently closed.</li>
-            </ul>
-            <span>Programs:</span>
-            <ul className="resources-list">
-              <li>Early Research Scholars Programs.</li>
-            </ul>
-          </div>
-        </div>
-        <div className="resources-info">
-          <div className="resources-title">Must Reads</div>
-          <div className="resources-desc">
-            <span>Scholarships:</span>
-            <ul className="resources-list">
-              <li>Our scholarship application period is currently closed.</li>
-            </ul>
-            <span>Programs:</span>
-            <ul className="resources-list">
-              <li>Early Research Scholars Programs.</li>
-            </ul>
-          </div>
+/*
+Create card tab Tutorials | Research | Organizations both underline + hover highlight box
+v-Link tab to component -> how to link subpage
+Use Hook to change card tab
+Create Tutorials, Research, and Organizations Container
+Container:
+
+Square box: Dat center large font 46px, Time below
+Click view detail, box will expand
+
+Line break
+
+Container includes:
+    Shadow: Hover expand
+    Card: Title, Url, Description
+*/
+
+const Resources = () => {
+    return (
+        <div className="resources-container">
+            <h1 className="resource-title">Resources</h1>
+            <Tab className="tab-components"/>
         </div>
-        <div className="resources-info">
-          <div className="resources-title">Similar Orgs</div>
-          <div className="resources-desc">
-            <span>Scholarships:</span>
-            <ul className="resources-list">
-              <li>Our scholarship application period is currently closed.</li>
-            </ul>
-            <span>Programs:</span>
-            <ul className="resources-list">
-              <li>Early Research Scholars Programs.</li>
-            </ul>
-          </div>
+    );
+};
+
+export default Resources;
+
+function Tab() {
+    const [tabState, setTab] = useState(1)
+
+    const toggleTab = (index) => {
+        setTab(index)
+    }
+
+    return (
+        <div className='tab-container'>
+            {/*
+            <Link to='/resources/tutorials' className='tab-button'>Tutorials</Link>
+            <Link to='resources/research' className='tab-button'>Research</Link>
+            <Link to='resources/organizations' className='tab-button'>Organizations</Link>
+            */}
+            <div className='tabs'>
+                <button type='button' onClick={() => toggleTab(1)} className={tabState === 1 ? 'tab-button active' : 'tab-button'}>Tutorials</button>
+                <button type='button' onClick={() => toggleTab(2)} className={tabState === 2 ? 'tab-button active' : 'tab-button'}>Research</button>
+                <button type='button' onClick={() => toggleTab(3)} className={tabState === 3 ? 'tab-button active' : 'tab-button'}>Organizations</button>
+            </div>
+
+            <div className="tab-contents">
+                <div className={tabState === 1 ? 'tab-content active-content': 'tab-content'}>
+                    <h2>Tutorials</h2>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+                        nisi ut aliquip ex ea commodo consequat.
+                    </p>
+                </div>
+
+                <div  className={tabState === 2 ? 'tab-content active-content': 'tab-content'}>
+                    <h2>Research</h2>
+                    <p>Something about Early Research Scholars Programs.
+                    </p>
+                </div>
+
+                <div  className={tabState === 3 ? 'tab-content active-content': 'tab-content'}>
+                    <h2>Organizations</h2>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+                        nisi ut aliquip ex ea commodo consequat.
+                    </p>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-  );
+    )
 }

src/resources/Tutorials.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import './resources.css';
+
+
+function Tutorials() {
+    return (
+        <div>Tutorials</div>
+    )
+}
+
+export default Tutorials;

src/resources/resources.css

@@ -1,19 +1,81 @@
-.resources-container{
-    color: white;
+.resources-container {
+    width: 100vw;
+}
+
+.tab-components {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+}
+  /* TAB BUTTON  */
+
+.tab-container {
+    padding: 0 3rem;
     display: flex;
+    flex-direction: column;
     justify-content: center;
+    align-items: center;
 }
-
-.resources-wrapper {
-    width: 80vw;
+  
+.tabs {
+    width: 90%;
     display: flex;
-    justify-content: space-between;
+    justify-content: center;
 }
-.resources-info {
-    width: 30%;
-    background-color: rgb(102, 62, 202);
+
+.tab-button {
+    min-width: 150px;
+    height: 3rem;
+    font-size: 1rem;
+    cursor: pointer;
+    margin-right: 10px;
+    outline: 0;
+    border: 0;
+    color: #535353;
+    background-color: #ff9617;
+    text-decoration: none;
+    border-bottom: 5px solid black;
+    border-radius: 10px;
+    font-weight: bold;
+    text-align: center;
 }
-.resources-list li {
-    padding: 0;
-    margin: 0;
+
+.tab-button.active {
+    border-bottom: 2px solid white;
+    opacity: 1;
+    transform: scale(1.1);
+}
+
+.tab-button:hover {
+    color: #fff;
+    background-color: #535353;
+    transform: scale(1.1);
+}
+
+  /* TAB LINE SELECT ANIMATION */
+
+  /* TAB CONTENT */
+.tab-contents {
+    flex-grow: 1;
+}
+
+.tab-content {
+    background-color: black;
+    color: white; /* Will change due to switching tab*/
+    margin: 1rem;
+    padding: 30px;
+    border: 2px white outset;
+    display: none;
+}
+
+.active-content {
+    display: block;
+}
+
+/* Add expand for news */
+
+/* tab-container */
+.resources-title {
+    color: white;
 }