forked from zainhuda/tags-founders-project
-
Notifications
You must be signed in to change notification settings - Fork 1
/
profileModal.js
69 lines (60 loc) · 1.86 KB
/
profileModal.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
import React, {Component} from 'react';
import {Modal, Button} from "react-bootstrap";
import './profileModal.css';
class ProfileModal extends Component {
render() {
const skills = (this.props.skills).map(skill => {
return(
<div>
{skill}
</div>
)
})
const interests = (this.props.interests).map(interest => {
return(
<div>
{interest}
</div>
)
})
return (
<Modal className="modal"
{...this.props}
aria-labelledby="contained-modal-title-vcenter"
centered
dialogClassName="size"
>
<Modal.Body>
<div className="modal-grid">
<div>
<img src={this.props.url} className="modal-pic"/>
</div>
<div>
<div>
<h1 className="modal-name">
{this.props.firstName + " " + this.props.lastName}
</h1>
<h4 className="modal-title">{this.props.title}</h4>
<p className="info">Phone: {this.props.phone}</p>
<p className="info">Email: {this.props.email}</p>
</div>
<div>
<p className="info">Skills</p>
<div className="tags-list">
{skills}
</div>
</div>
<div>
<p className="info">Interests</p>
<div className="tags-list">
{interests}
</div>
</div>
</div>
</div>
</Modal.Body>
</Modal>
);
}
}
export default ProfileModal;