Skip to content

Commit 4be786f

Browse files
KHVBuiKHVBui
committed
Corrected Indentation in Resources
-Made sure indentation was 4 spaces instead of 2
1 parent e920ed0 commit 4be786f

File tree

5 files changed

+80
-80
lines changed

5 files changed

+80
-80
lines changed

‎src/resources/Organizations.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import './resources.css';
33

44

55
function Organizations() {
6-
return (
7-
<div>Organizations</div>
8-
)
6+
return (
7+
<div>Organizations</div>
8+
)
99
}
1010

1111
export default Organizations;

‎src/resources/Research.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import './resources.css';
33

44

55
function Research() {
6-
return (
7-
<div>Research</div>
8-
)
6+
return (
7+
<div>Research</div>
8+
)
99
}
1010

1111
export default Research;

‎src/resources/Resources.js‎

Lines changed: 48 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -17,66 +17,66 @@ Click view detail, box will expand
1717
Line break
1818
1919
Container includes:
20-
Shadow: Hover expand
21-
Card: Title, Url, Description
20+
Shadow: Hover expand
21+
Card: Title, Url, Description
2222
*/
2323

2424
const Resources = () => {
25-
return (
26-
<div className="resources-container">
27-
<h1 className="resource-title">Resources</h1>
28-
<Tab className="tab-components"/>
29-
</div>
30-
);
25+
return (
26+
<div className="resources-container">
27+
<h1 className="resource-title">Resources</h1>
28+
<Tab className="tab-components"/>
29+
</div>
30+
);
3131
};
3232

3333
export default Resources;
3434

3535
function Tab() {
36-
const [tabState, setTab] = useState(1)
36+
const [tabState, setTab] = useState(1)
3737

38-
const toggleTab = (index) => {
39-
setTab(index)
40-
}
38+
const toggleTab = (index) => {
39+
setTab(index)
40+
}
4141

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>
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>
5454

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>
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>
6464

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>
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>
7070

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>
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>
7880
</div>
79-
</div>
80-
</div>
81-
)
81+
)
8282
}

‎src/resources/Tutorials.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import './resources.css';
33

44

55
function Tutorials() {
6-
return (
7-
<div>Tutorials</div>
8-
)
6+
return (
7+
<div>Tutorials</div>
8+
)
99
}
1010

1111
export default Tutorials;

‎src/resources/resources.css‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,30 @@
11
.resources-container {
22
width: 100vw;
3-
}
3+
}
44

5-
.tab-components {
5+
.tab-components {
66
display: flex;
77
flex-direction: row;
88
justify-content: center;
99
align-items: center;
10-
}
10+
}
1111
/* TAB BUTTON */
1212

13-
.tab-container {
13+
.tab-container {
1414
padding: 0 3rem;
1515
display: flex;
1616
flex-direction: column;
1717
justify-content: center;
1818
align-items: center;
19-
}
19+
}
2020

21-
.tabs {
21+
.tabs {
2222
width: 90%;
2323
display: flex;
2424
justify-content: center;
25-
}
25+
}
2626

27-
.tab-button {
27+
.tab-button {
2828
min-width: 150px;
2929
height: 3rem;
3030
font-size: 1rem;
@@ -39,43 +39,43 @@
3939
border-radius: 10px;
4040
font-weight: bold;
4141
text-align: center;
42-
}
42+
}
4343

44-
.tab-button.active {
44+
.tab-button.active {
4545
border-bottom: 2px solid white;
4646
opacity: 1;
4747
transform: scale(1.1);
48-
}
48+
}
4949

50-
.tab-button:hover {
50+
.tab-button:hover {
5151
color: #fff;
5252
background-color: #535353;
5353
transform: scale(1.1);
54-
}
54+
}
5555

5656
/* TAB LINE SELECT ANIMATION */
5757

5858
/* TAB CONTENT */
59-
.tab-contents {
59+
.tab-contents {
6060
flex-grow: 1;
61-
}
61+
}
6262

63-
.tab-content {
63+
.tab-content {
6464
background-color: black;
6565
color: white; /* Will change due to switching tab*/
6666
margin: 1rem;
6767
padding: 30px;
6868
border: 2px white outset;
6969
display: none;
70-
}
70+
}
7171

72-
.active-content {
72+
.active-content {
7373
display: block;
74-
}
74+
}
7575

76-
/* Add expand for news */
76+
/* Add expand for news */
7777

78-
/* tab-container */
79-
.resources-title {
78+
/* tab-container */
79+
.resources-title {
8080
color: white;
81-
}
81+
}

0 commit comments

Comments
 (0)