Skip to content

Commit f53afa7

Browse files
Jake-P-NJake-P-N
authored
Merge pull request #9 from Computer-Science-Club-OCC/kevin-bui-branch
Implement React Tabs for Resources Part of Website
2 parents c537971 + 4be786f commit f53afa7

File tree

6 files changed

+190
-63
lines changed

6 files changed

+190
-63
lines changed

‎src/navbar/NavigationBar.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -103,11 +103,11 @@ const NavigationBar = () => {
103103
<div className="dropdown-content">
104104
<Link className="dropdown-link" to="/activity/events">
105105
{" "}
106-
&gt; Event
106+
&gt; Events
107107
</Link>
108108
<Link className="dropdown-link" to="/activity/projects">
109109
{" "}
110-
&gt; Project
110+
&gt; Projects
111111
</Link>
112112
</div>
113113
</div>
@@ -127,15 +127,15 @@ const NavigationBar = () => {
127127
Resources
128128
</Link>
129129
<div className="dropdown-content">
130-
<Link className="dropdown-link" to="/events">
130+
<Link className="dropdown-link" to="/resources/tutorials">
131131
{" "}
132-
&gt; Tutorial
132+
&gt; Tutorials
133133
</Link>
134-
<Link className="dropdown-link" to="/projects">
134+
<Link className="dropdown-link" to="/resources/research">
135135
{" "}
136136
&gt; Research
137137
</Link>
138-
<Link className="dropdown-link" to="/projects">
138+
<Link className="dropdown-link" to="/resources/organizations">
139139
{" "}
140140
&gt; Organizations
141141
</Link>

‎src/resources/Organizations.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
import './resources.css';
3+
4+
5+
function Organizations() {
6+
return (
7+
<div>Organizations</div>
8+
)
9+
}
10+
11+
export default Organizations;

‎src/resources/Research.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
import './resources.css';
3+
4+
5+
function Research() {
6+
return (
7+
<div>Research</div>
8+
)
9+
}
10+
11+
export default Research;

‎src/resources/Resources.js‎

Lines changed: 77 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,82 @@
1-
import React from "react";
1+
import React, { useState, useRef } from 'react';
22
import "./resources.css";
3+
import Tutorials from './Tutorials.js';
4+
import Research from './Research';
5+
import Organizations from './Organizations';
36

4-
export default function Resources() {
5-
return (
6-
<div className="resources-container">
7-
<div className="resources-wrapper">
8-
<div className="resources-info">
9-
<div className="resources-title">Scholarships & Programs</div>
10-
<div className="resources-desc">
11-
<span>Scholarships:</span>
12-
<ul className="resources-list">
13-
<li>Our scholarship application period is currently closed.</li>
14-
</ul>
15-
<span>Programs:</span>
16-
<ul className="resources-list">
17-
<li>Early Research Scholars Programs.</li>
18-
</ul>
19-
</div>
20-
</div>
21-
<div className="resources-info">
22-
<div className="resources-title">Must Reads</div>
23-
<div className="resources-desc">
24-
<span>Scholarships:</span>
25-
<ul className="resources-list">
26-
<li>Our scholarship application period is currently closed.</li>
27-
</ul>
28-
<span>Programs:</span>
29-
<ul className="resources-list">
30-
<li>Early Research Scholars Programs.</li>
31-
</ul>
32-
</div>
7+
/*
8+
Create card tab Tutorials | Research | Organizations both underline + hover highlight box
9+
v-Link tab to component -> how to link subpage
10+
Use Hook to change card tab
11+
Create Tutorials, Research, and Organizations Container
12+
Container:
13+
14+
Square box: Dat center large font 46px, Time below
15+
Click view detail, box will expand
16+
17+
Line break
18+
19+
Container includes:
20+
Shadow: Hover expand
21+
Card: Title, Url, Description
22+
*/
23+
24+
const Resources = () => {
25+
return (
26+
<div className="resources-container">
27+
<h1 className="resource-title">Resources</h1>
28+
<Tab className="tab-components"/>
3329
</div>
34-
<div className="resources-info">
35-
<div className="resources-title">Similar Orgs</div>
36-
<div className="resources-desc">
37-
<span>Scholarships:</span>
38-
<ul className="resources-list">
39-
<li>Our scholarship application period is currently closed.</li>
40-
</ul>
41-
<span>Programs:</span>
42-
<ul className="resources-list">
43-
<li>Early Research Scholars Programs.</li>
44-
</ul>
45-
</div>
30+
);
31+
};
32+
33+
export default Resources;
34+
35+
function Tab() {
36+
const [tabState, setTab] = useState(1)
37+
38+
const toggleTab = (index) => {
39+
setTab(index)
40+
}
41+
42+
return (
43+
<div className='tab-container'>
44+
{/*
45+
<Link to='/resources/tutorials' className='tab-button'>Tutorials</Link>
46+
<Link to='resources/research' className='tab-button'>Research</Link>
47+
<Link to='resources/organizations' className='tab-button'>Organizations</Link>
48+
*/}
49+
<div className='tabs'>
50+
<button type='button' onClick={() => toggleTab(1)} className={tabState === 1 ? 'tab-button active' : 'tab-button'}>Tutorials</button>
51+
<button type='button' onClick={() => toggleTab(2)} className={tabState === 2 ? 'tab-button active' : 'tab-button'}>Research</button>
52+
<button type='button' onClick={() => toggleTab(3)} className={tabState === 3 ? 'tab-button active' : 'tab-button'}>Organizations</button>
53+
</div>
54+
55+
<div className="tab-contents">
56+
<div className={tabState === 1 ? 'tab-content active-content': 'tab-content'}>
57+
<h2>Tutorials</h2>
58+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
59+
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
60+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
61+
nisi ut aliquip ex ea commodo consequat.
62+
</p>
63+
</div>
64+
65+
<div className={tabState === 2 ? 'tab-content active-content': 'tab-content'}>
66+
<h2>Research</h2>
67+
<p>Something about Early Research Scholars Programs.
68+
</p>
69+
</div>
70+
71+
<div className={tabState === 3 ? 'tab-content active-content': 'tab-content'}>
72+
<h2>Organizations</h2>
73+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
74+
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
75+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
76+
nisi ut aliquip ex ea commodo consequat.
77+
</p>
78+
</div>
79+
</div>
4680
</div>
47-
</div>
48-
</div>
49-
);
81+
)
5082
}

‎src/resources/Tutorials.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
import './resources.css';
3+
4+
5+
function Tutorials() {
6+
return (
7+
<div>Tutorials</div>
8+
)
9+
}
10+
11+
export default Tutorials;

‎src/resources/resources.css‎

Lines changed: 74 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,81 @@
1-
.resources-container{
2-
color: white;
1+
.resources-container {
2+
width: 100vw;
3+
}
4+
5+
.tab-components {
6+
display: flex;
7+
flex-direction: row;
8+
justify-content: center;
9+
align-items: center;
10+
}
11+
/* TAB BUTTON */
12+
13+
.tab-container {
14+
padding: 0 3rem;
315
display: flex;
16+
flex-direction: column;
417
justify-content: center;
18+
align-items: center;
519
}
6-
7-
.resources-wrapper {
8-
width: 80vw;
20+
21+
.tabs {
22+
width: 90%;
923
display: flex;
10-
justify-content: space-between;
24+
justify-content: center;
1125
}
12-
.resources-info {
13-
width: 30%;
14-
background-color: rgb(102, 62, 202);
26+
27+
.tab-button {
28+
min-width: 150px;
29+
height: 3rem;
30+
font-size: 1rem;
31+
cursor: pointer;
32+
margin-right: 10px;
33+
outline: 0;
34+
border: 0;
35+
color: #535353;
36+
background-color: #ff9617;
37+
text-decoration: none;
38+
border-bottom: 5px solid black;
39+
border-radius: 10px;
40+
font-weight: bold;
41+
text-align: center;
1542
}
16-
.resources-list li {
17-
padding: 0;
18-
margin: 0;
43+
44+
.tab-button.active {
45+
border-bottom: 2px solid white;
46+
opacity: 1;
47+
transform: scale(1.1);
48+
}
49+
50+
.tab-button:hover {
51+
color: #fff;
52+
background-color: #535353;
53+
transform: scale(1.1);
54+
}
55+
56+
/* TAB LINE SELECT ANIMATION */
57+
58+
/* TAB CONTENT */
59+
.tab-contents {
60+
flex-grow: 1;
61+
}
62+
63+
.tab-content {
64+
background-color: black;
65+
color: white; /* Will change due to switching tab*/
66+
margin: 1rem;
67+
padding: 30px;
68+
border: 2px white outset;
69+
display: none;
70+
}
71+
72+
.active-content {
73+
display: block;
74+
}
75+
76+
/* Add expand for news */
77+
78+
/* tab-container */
79+
.resources-title {
80+
color: white;
1981
}

0 commit comments

Comments
 (0)