8000 Update and created Dev component · Note45/github-search-js@804d5cd · GitHub
[go: up one dir, main page]
Skip to content

Commit 804d5cd

Browse files
Note45Note45
committed
Update and created Dev component
1 parent be0acb8 commit 804d5cd

File tree

6 files changed

+95
-115
lines changed

6 files changed

+95
-115
lines changed

‎github-search-app/src/components/Dev/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+
3+
import './styles.css';
4+
5+
function Dev({ data }){
6+
return(
7+
<div id='divContainer'>
8+
<div id='containerImage'>
9+
<img id ='imgAvatar' src={data.avatar_url} alt='Avatar'/>
10+
</div>
11+
<div id='containerName'>
12+
<p id='nameElement'>{data.name}</p>
13+
<p id='loginElement'>{data.login}</p>
14+
<p id='bioElement'>{data.bio}</p>
15+
<button id='buttonElement' onClick={()=>{window.open(data.html_url, '_blank')}}>Acessar</button>
16+
</div>
17+
</div>)
18+
};
19+
20+
export default Dev;

‎github-search-app/src/components/Dev/styles.css

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
#divContainer {
2+
display: grid;
3+
grid-gap: 10px;
4+
padding-left: 10px;
5+
padding-top: 10px;
6+
padding-right: 10px;
7+
}
8+
9+
#divContainer div {
10+
background-color: rgba(247, 240, 226, 0.774);
11+
text-align: center;
12+
padding: 20px 0;
13+
font-size: 30px;
14+
}
15+
16+
#containerImage {
17+
width: 210px;
18+
height: 250px;
19+
grid-column: 1;
20+
grid-row: 1 / span 2;
21+
}
22+
23+
#imgAvatar {
24+
width: 200px;
25+
height: 210px;
26+
border-radius: 50%;
27+
}
28+
29+
#containerName {
30+
grid-column: 2;
31+
grid-row: 1 / span 2;
32+
}
33+
34+
#nameElement {
35+
font-size: 30px;
36+
text-align: center;
37+
padding-left: 10px;
38+
}
39+
40+
#loginElement {
41+
font-size: 20px;
42+
text-align: center;
43+
padding-left: 10px;
44+
}
45+
46+
#bioElement {
47+
font-size: 34px;
48+
padding-left: 10px;
49+
padding-top: 10px;
50+
padding-bottom: 10px;
51+
}
52+
53+
#buttonElement {
54+
font-size: 16px;
55+
border:none;
56+
height:36px;
57+
width:300px;
58+
font-weight:bold;
59+
background:rgb(238, 169, 104);
60+
}
61+
62+
#buttonElement:hover {
63+
background:rgb(247, 206, 168);
64+
}

‎github-search-app/src/components/Header/index.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,10 @@ import React from 'react';
22

33
import './styles.css';
44

5-
const Header = () => (
5+
function Header(){
6+
return(
67
<header id='header-app'>GitHub Search</header>
7-
);
8+
);
9+
};
810

911
export default Header;

‎github-search-app/src/pages/main/index.js

Lines changed: 7 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,24 @@
11
import React, { Component } from 'react';
22

33
import api from '../../services/api';
4-
5-
import './styles.css'
4+
import Dev from '../../components/Dev';
5+
import './styles.css';
66

77
export default class Main extends Component {
88
state = {
9-
dev: [],
9+
dev: {},
1010
}
1111

1212
searchDevs = async () => {
1313
let inputElement = document.getElementById('txtBusca');
1414

1515
let response = await api.get(`/${inputElement.value}`);
16-
1716
this.setState({ dev: response.data });
17+
1818
}
1919

2020
renderDevs = async () => {
2121
await this.searchDevs();
22-
const { login, avatar_url, bio, name, html_url } = this.state.dev;
23-
24-
let divContainer = document.getElementById('divContainer');
25-
26-
let containerImage = document.createElement('div');
27-
containerImage.setAttribute('id', 'containerImage');
28-
29-
let containerName = document.createElement('div');
30-
containerName.setAttribute('id', 'containerName');
31-
32-
let buttonElement = document.createElement('button');
33-
buttonElement.setAttribute("id", "buttonElement");
34-
buttonElement.setAttribute('onclick', `${window.open(html_url, '_blank')}`);
35-
let textElement = document.createTextNode('Acessar');
36-
buttonElement.appendChild(textElement);
37-
38-
let imgAvatar = document.createElement('img');
39-
imgAvatar.setAttribute('src', avatar_url);
40-
imgAvatar.setAttribute('alt', 'Avatar');
41-
imgAvatar.setAttribute('id', 'imgAvatar');
42-
containerImage.appendChild(imgAvatar);
43-
44-
let nameElement = document.createElement('p');
45-
nameElement.setAttribute('id', 'nameElement');
46-
textElement = document.createTextNode(name);
47-
nameElement.appendChild(textElement);
48-
containerName.appendChild(nameElement);
49-
50-
let loginElement = document.createElement('p');
51-
loginElement.setAttribute('id', 'loginElement');
52-
textElement = document.createTextNode(login);
53-
loginElement.appendChild(textElement);
54-
containerName.appendChild(loginElement);
55-
56-
let bioElement = document.createElement('p');
57-
bioElement.setAttribute('id', 'bioElement');
58-
textElement = document.createTextNode(bio);
59-
bioElement.appendChild(textElement);
60-
containerName.appendChild(bioElement);
61-
62-
containerName.appendChild(buttonElement);
63-
divContainer.appendChild(containerImage);
64-
divContainer.appendChild(containerName);
6522
}
6623

6724
render() {
@@ -70,9 +27,10 @@ export default class Main extends Component {
7027
<div id="divBusca">
7128
<input type="text" id="txtBusca" placeholder="Buscar..."/>
7229
<button id="btnBusca" onClick={this.renderDevs}>Buscar</button>
30+
{console.log(this.state.dev)}
7331
</div>
74-
<div id='divContainer'>
75-
</div>
32+
{this.state.dev.login ?
33+
<Dev data={this.state.dev} /> : null}
7634
</div>
7735

7836
);

‎github-search-app/src/pages/main/search-icon.png

-56.2 KB
Binary file not shown.

‎github-search-app/src/pages/main/styles.css

Lines changed: 0 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -29,68 +29,4 @@
2929

3030
#btnBusca:hover {
3131
background:rgb(247, 206, 168);
32-
}
33-
34-
#divContainer {
35-
display: grid;
36-
grid-gap: 10px;
37-
padding-left: 10px;
38-
padding-top: 10px;
39-
padding-right: 10px;
40-
}
41-
42-
#divContainer div {
43-
background-color: rgba(247, 240, 226, 0.774);
44-
text-align: center;
45-
padding: 20px 0;
46-
font-size: 30px;
47-
}
48-
49-
#containerImage {
50-
width: 210px;
51-
height: 250px;
52-
grid-column: 1;
53-
grid-row: 1 / span 2;
54-
}
55-
56-
#imgAvatar {
57-
width: 200px;
58-
height: 210px;
59-
}
60-
61-
#containerName {
62-
grid-column: 2;
63-
grid-row: 1 / span 2;
64-
}
65-
66-
#nameElement {
67-
font-size: 30px;
68-
text-align: center;
69-
padding-left: 10px;
70-
}
71-
72-
#loginElement {
73-
font-size: 20px;
74-
text-align: center;
75-
padding-left: 10px;
76-
}
77-
78-
#bioElement {
79-
font-size: 34px;
80-
padding-left: 10px;
81-
padding-top: 10px;
82-
padding-bottom: 10px;
83-
}
84-
85-
#buttonElement {
86-
font-size: 16px;
87-
border:none;
88-
height:36px;
89-
width:300px;
90-
font-weight:bold;
91-
background:rgb(238, 169, 104);
92-
}
93-
94-
#buttonElement:hover {
95-
background:rgb(247, 206, 168);
9632
}

0 commit comments

Comments
 (0)
0