Skip to content

Commit da0442e

Browse files
acmesquitaacmesquita
committed
Adicioando navbar
1 parent 0f046cc commit da0442e

File tree

6 files changed

+79
-11
lines changed

6 files changed

+79
-11
lines changed

‎public/index.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="utf-8" />
56
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
67
<meta name="viewport" content="width=device-width, initial-scale=1" />
78
<meta name="theme-color" content="#000000" />
8-
<meta
9-
name="description"
10-
content="Web site created using create-react-app"
11-
/>
9+
<meta name="description" content="Web site created using create-react-app" />
1210
<link rel="apple-touch-icon" href="logo192.png" />
1311
<!--
1412
manifest.json provides metadata used when your web app is installed on a
@@ -24,8 +22,9 @@
2422
work correctly both with client-side routing and a non-root public URL.
2523
Learn how to configure a non-root public URL by running `npm run build`.
2624
-->
27-
<title>React App</title>
25+
<title>Notes App</title>
2826
</head>
27+
2928
<body>
3029
<noscript>You need to enable JavaScript to run this app.</noscript>
3130
<div id="root"></div>
@@ -40,4 +39,5 @@
4039
To create a production bundle, use `npm run build` or `yarn build`.
4140
-->
4241
</body>
43-
</html>
42+
43+
</html>

‎src/App.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import React from 'react';
22
import { Provider } from 'react-redux';
33

4-
import './styles/global.css'
4+
import './styles/global.css';
55

6-
import store from './store'
7-
import ComponentList from './components/ComponentList';
6+
import store from './store';
7+
import Main from './pages/Main';
88

99
function App() {
1010
return (
1111
<Provider store={store}>
12-
<ComponentList />
12+
<Main />
1313
</Provider>
1414
);
1515
}

‎src/components/ComponentList/styles.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
padding: 10px;
1111
font-size: 18px;
1212
border-radius: 3px;
13-
border: 1px solid #ccc;
13+
border: 1px solid #20336be6;
1414
resize: vertical;
1515
overflow: auto;
1616
}

‎src/components/Header/index.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react';
2+
import { GiBookmark } from 'react-icons/gi';
3+
import { GoMarkGithub } from 'react-icons/go';
4+
5+
import './styles.css';
6+
7+
export default function Header() {
8+
return (
9+
<div className="nav-bar">
10+
<div className="title-with-logo">
11+
< GiBookmark size={32} />
12+
<div className="title">
13+
<h2>Notes App</h2>
14+
<small>Desevolvido por Catharina Mesquita</small>
15+
</div>
16+
</div>
17+
<a href="https://github.com/acmesquita/notes-app"><GoMarkGithub size={18} /> Acesso ao repositório</a>
18+
</div>
19+
);
20+
}

‎src/components/Header/styles.css‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
.nav-bar {
2+
display: flex;
3+
justify-content: space-between;
4+
align-items: center;
5+
padding: 10px 20px;
6+
7+
border-bottom: 1px solid #e3e3e3;
8+
background-color: #20336be6;
9+
10+
font-family: sans-serif;
11+
color: #f3f3f3;
12+
}
13+
14+
.title-with-logo {
15+
display: flex;
16+
justify-content: center;
17+
align-items: center;
18+
}
19+
20+
.title {
21+
padding-left: 10px;
22+
}
23+
24+
a {
25+
color: #f3f3f3;
26+
text-decoration: none;
27+
vertical-align: middle;
28+
display: flex;
29+
align-items: center;
30+
}
31+
32+
a svg{
33+
margin-right: 5px;
34+
}

‎src/pages/Main/index.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react';
2+
import ComponentList from '../../components/ComponentList';
3+
import Header from '../../components/Header';
4+
5+
// import { Container } from './styles';
6+
7+
export default function Main() {
8+
return (
9+
<>
10+
<Header />
11+
<ComponentList />
12+
</>
13+
);
14+
}

0 commit comments

Comments
 (0)