Skip to content

Commit 5fbeb8d

Browse files
alexloberaalexlobera
committed
updates Header component
1 parent d4e876d commit 5fbeb8d

2 files changed

Lines changed: 163 additions & 163 deletions

File tree

‎src/components/App.js‎

Lines changed: 151 additions & 151 deletions
Original file line numberDiff line numberDiff line change
@@ -5,172 +5,172 @@ import Header from './Header'
55
import books from '../mocks/books'
66

77
class App extends React.Component {
8-
constructor() {
9-
super()
10-
this.state = {
11-
books: books,
12-
selectedFilter: 'All',
13-
menu: { open: false }
14-
}
8+
constructor() {
9+
super()
10+
this.state = {
11+
books: books,
12+
selectedFilter: 'All',
13+
menu: { open: false }
1514
}
15+
}
1616

17-
toggleMenu = () => {
18-
this.setState({ menu: { open: !this.state.menu.open } })
19-
}
17+
toggleMenu = () => {
18+
this.setState({ menu: { open: !this.state.menu.open } })
19+
}
2020

21-
selectFilter = (filter) => {
22-
this.setState({
23-
selectedFilter: filter,
24-
books: filter === 'All' ? books : books.filter(book => (book.category === filter))
25-
})
26-
}
21+
selectFilter = (filter) => {
22+
this.setState({
23+
selectedFilter: filter,
24+
books: filter === 'All' ? books : books.filter(book => (book.category === filter))
25+
})
26+
}
2727

28-
render() {
29-
const filters = [
30-
'All',
31-
'Web',
32-
'Mobile',
33-
'DevOps',
34-
'Essentials',
35-
]
28+
render() {
29+
const filters = [
30+
'All',
31+
'Web',
32+
'Mobile',
33+
'DevOps',
34+
'Essentials',
35+
]
3636

37-
const tabItems = filters.map(filter => (
38-
<li className={filter === this.state.selectedFilter ? 'active' : ''} key={filter} onClick={() => this.selectFilter(filter)}>
39-
<a href="#0">{filter}</a>
40-
</li>
41-
))
37+
const tabItems = filters.map(filter => (
38+
<li className={filter === this.state.selectedFilter ? 'active' : ''} key={filter} onClick={() => this.selectFilter(filter)}>
39+
<a href="#0">{filter}</a>
40+
</li>
41+
))
4242

43-
return (
44-
<div id="page-wrap">
43+
return (
44+
<div id="page-wrap">
4545

46-
<Menu
47-
pageWrapId="page-wrap"
48-
isOpen={this.state.menu.open}
49-
toggleMenu={this.toggleMenu}
50-
/>
46+
<Menu
47+
pageWrapId="page-wrap"
48+
isOpen={this.state.menu.open}
49+
toggleMenu={this.toggleMenu}
50+
/>
5151

52-
<nav className="navbar navbar-default navbar-fixed-top navbar-custom">
53-
<div className="container">
54-
<div className="navbar-header">
55-
<a className="navbar-brand">ReactJS Academy</a>
56-
</div>
57-
<ul className="nav navbar-nav pull-right">
58-
<li className="hidden-xs">
59-
<a href="#about">About us</a>
60-
</li>
61-
<li>
62-
<button onClick={this.toggleMenu} className="btn btn-lg btn-outline">
63-
<i className="fa fa-graduation-cap"></i> <span>Training</span>
64-
</button>
65-
</li>
66-
</ul>
67-
</div>
68-
</nav>
52+
<nav className="navbar navbar-default navbar-fixed-top navbar-custom">
53+
<div className="container">
54+
<div className="navbar-header">
55+
<a className="navbar-brand">ReactJS Academy</a>
56+
</div>
57+
<ul className="nav navbar-nav pull-right">
58+
<li className="hidden-xs">
59+
<a href="#about">About us</a>
60+
</li>
61+
<li>
62+
<button onClick={this.toggleMenu} className="btn btn-lg btn-outline">
63+
<i className="fa fa-graduation-cap"></i> <span>Training</span>
64+
</button>
65+
</li>
66+
</ul>
67+
</div>
68+
</nav>
6969

70-
<Header title="Library" />
70+
<Header title="ReactJS Academy" />
7171

72-
<section id="books">
73-
<div className="container">
74-
<div className="row">
75-
<div className="col-lg-12 text-center">
76-
<h2>Books</h2>
77-
<hr className="star-primary" />
78-
</div>
79-
</div>
80-
<div className="row">
81-
<div className="col-lg-12">
82-
<ul className="nav nav-pills text-center">
83-
{tabItems}
84-
</ul>
85-
</div>
86-
</div>
87-
<div className="row book-list">
88-
{this.state.books.map(book => (
89-
<div className="col-xs-6 col-sm-3" key={book.id}>
90-
<div className="thumbnail">
91-
<img alt="" className="img-responsive" src={book.cover} />
92-
</div>
93-
</div>
94-
))}
95-
</div>
96-
</div>
97-
</section>
72+
<section id="books">
73+
<div className="container">
74+
<div className="row">
75+
<div className="col-lg-12 text-center">
76+
<h2>Books</h2>
77+
<hr className="star-primary" />
78+
</div>
79+
</div>
80+
<div className="row">
81+
<div className="col-lg-12">
82+
<ul className="nav nav-pills text-center">
83+
{tabItems}
84+
</ul>
85+
</div>
86+
</div>
87+
<div className="row book-list">
88+
{this.state.books.map(book => (
89+
<div className="col-xs-6 col-sm-3" key={book.id}>
90+
<div className="thumbnail">
91+
<img alt="" className="img-responsive" src={book.cover} />
92+
</div>
93+
</div>
94+
))}
95+
</div>
96+
</div>
97+
</section>
9898

99-
<section id="about" className="success">
100-
<div className="container">
101-
<div className="row">
102-
<div className="col-lg-12 text-center">
103-
<h2>About The Library</h2>
104-
<hr className="star-light" />
105-
</div>
106-
</div>
107-
<div className="row">
108-
<div className="col-lg-4 col-lg-offset-2">
109-
<p>This library is an exercise for building UI in a <strong style={{ textDecoration: 'underline' }}>declarative way</strong>. This web site will help you understand the fundamental piece of ReactJS, components. You'll learn how to break an app in components (AKA componentization) and flow data accross them.</p>
110-
</div>
111-
<div className="col-lg-4">
112-
<p>This ReactJS web site works, but it's not well implemented. The problem, the developer didn't think in React and there aren't many components. We challenge you to fork the repo an componentizise the app to unleash the power of ReactJS.</p>
113-
</div>
114-
<div className="col-lg-8 col-lg-offset-2 text-center">
115-
<a target="_blank" rel="noopener noreferrer" href="https://github.com/leanjscom/thinking-in-react" className="btn btn-lg btn-outline">
116-
<i className="fa fa-code-fork"></i> Fork me on Github
99+
<section id="about" className="success">
100+
<div className="container">
101+
<div className="row">
102+
<div className="col-lg-12 text-center">
103+
<h2>About The Library</h2>
104+
<hr className="star-light" />
105+
</div>
106+
</div>
107+
<div className="row">
108+
<div className="col-lg-4 col-lg-offset-2">
109+
<p>This library is an exercise for building UI in a <strong style={{ textDecoration: 'underline' }}>declarative way</strong>. This web site will help you understand the fundamental piece of ReactJS, components. You'll learn how to break an app in components (AKA componentization) and flow data accross them.</p>
110+
</div>
111+
<div className="col-lg-4">
112+
<p>This ReactJS web site works, but it's not well implemented. The problem, the developer didn't think in React and there aren't many components. We challenge you to fork the repo an componentizise the app to unleash the power of ReactJS.</p>
113+
</div>
114+
<div className="col-lg-8 col-lg-offset-2 text-center">
115+
<a target="_blank" rel="noopener noreferrer" href="https://github.com/leanjscom/thinking-in-react" className="btn btn-lg btn-outline">
116+
<i className="fa fa-code-fork"></i> Fork me on Github
117117
</a>
118-
</div>
119-
</div>
120-
</div>
121-
</section>
118+
</div>
119+
</div>
120+
</div>
121+
</section>
122122

123-
<footer className="text-center">
124-
<div className="footer-above">
125-
<div className="container">
126-
<div className="row">
127-
<div className="footer-col col-md-4">
128-
<h3>Main Location</h3>
129-
<p>
130-
<span>1 St. Katharine's Way</span>
131-
<br />
132-
<span>London, E1W 1UN</span>
133-
</p>
134-
</div>
135-
<div className="footer-col col-md-4">
136-
<h3>Around the Web</h3>
137-
<ul className="list-inline">
138-
<li>
139-
<a target="_blank" rel="noopener noreferrer" href="https://github.com/leanjscom" className="btn-social btn-outline"><i className="fa fa-fw fa-github"></i></a>
140-
</li>
141-
<li>
142-
<a target="_blank" rel="noopener noreferrer" href="https://twitter.com/leanjscom" className="btn-social btn-outline"><i className="fa fa-fw fa-twitter"></i></a>
143-
</li>
144-
<li>
145-
<a target="_blank" rel="noopener noreferrer" href="https://www.instagram.com/leanjscom/" className="btn-social btn-outline"><i className="fa fa-fw fa-instagram"></i></a>
146-
</li>
147-
</ul>
148-
</div>
149-
<div className="footer-col col-md-4">
150-
<h3>About ReactJS Academy</h3>
151-
<p>
152-
<a href="https://reactjs.academy/">ReactJS Academy</a>
153-
<span>
154-
ReactJS Academy is Europes longest running dedicated React, Redux, and GraphQL training.
123+
<footer className="text-center">
124+
<div className="footer-above">
125+
<div className="container">
126+
<div className="row">
127+
<div className="footer-col col-md-4">
128+
<h3>Main Location</h3>
129+
<p>
130+
<span>1 St. Katharine's Way</span>
131+
<br />
132+
<span>London, E1W 1UN</span>
133+
</p>
134+
</div>
135+
<div className="footer-col col-md-4">
136+
<h3>Around the Web</h3>
137+
<ul className="list-inline">
138+
<li>
139+
<a target="_blank" rel="noopener noreferrer" href="https://github.com/leanjscom" className="btn-social btn-outline"><i className="fa fa-fw fa-github"></i></a>
140+
</li>
141+
<li>
142+
<a target="_blank" rel="noopener noreferrer" href="https://twitter.com/leanjscom" className="btn-social btn-outline"><i className="fa fa-fw fa-twitter"></i></a>
143+
</li>
144+
<li>
145+
<a target="_blank" rel="noopener noreferrer" href="https://www.instagram.com/leanjscom/" className="btn-social btn-outline"><i className="fa fa-fw fa-instagram"></i></a>
146+
</li>
147+
</ul>
148+
</div>
149+
<div className="footer-col col-md-4">
150+
<h3>About ReactJS Academy</h3>
151+
<p>
152+
<a href="https://reactjs.academy/">ReactJS Academy</a>
153+
<span>
154+
ReactJS Academy is Europes longest running dedicated React, Redux, and GraphQL training.
155155
</span>
156-
</p>
157-
</div>
158-
</div>
159-
</div>
160-
</div>
161-
<div className="footer-below">
162-
<div className="container">
163-
<div className="row">
164-
<div className="col-lg-12">
165-
<span>Copyright &copy;</span> <a href="https://leanjs.com/" target="_blank" rel="noopener noreferrer">LeanJS</a>
166-
</div>
167-
</div>
168-
</div>
169-
</div>
170-
</footer>
156+
</p>
157+
</div>
158+
</div>
171159
</div>
172-
)
173-
}
160+
</div>
161+
<div className="footer-below">
162+
<div className="container">
163+
<div className="row">
164+
<div className="col-lg-12">
165+
<span>Copyright &copy;</span> <a href="https://leanjs.com/" target="_blank" rel="noopener noreferrer">LeanJS</a>
166+
</div>
167+
</div>
168+
</div>
169+
</div>
170+
</footer>
171+
</div>
172+
)
173+
}
174174
}
175175

176176
export default App

‎src/components/Header.js‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
import React from 'react'
22

33
const Header = (props) => (
4-
<header>
5-
<div className="container">
6-
<div className="row">
7-
<div className="col-lg-12">
8-
<img alt="" className="img-responsive logo-academy" src="/img/logo.png" />
9-
<div className="intro-text">
10-
<span className="skills">ReactJS Academy</span>
11-
</div>
12-
</div>
13-
</div>
14-
</div>
15-
</header>
4+
<header>
5+
<div className="container">
6+
<div className="row">
7+
<div className="col-lg-12">
8+
<img alt="" className="img-responsive logo-academy" src="/img/logo.png" />
9+
<div className="intro-text">
10+
<span className="skills">{props.title}</span>
11+
</div>
12+
</div>
13+
</div>
14+
</div>
15+
</header>
1616
)
1717

1818
export default Header

0 commit comments

Comments
 (0)