Messages.js
3.72 KB
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
70
71
72
73
74
75
76
77
78
import React from 'react';
import {
ListGroup,
ListGroupItem,
} from 'reactstrap';
import a1 from '../../../images/people/a1.jpg';
import a2 from '../../../images/people/a2.jpg';
import a4 from '../../../images/people/a4.jpg';
import a6 from '../../../images/people/a6.jpg';
import avatar from '../../../images/avatar.png';
import s from './ListGroup.module.scss'; // eslint-disable-line
class MessagesDemo extends React.Component {
render() {
return (
<ListGroup className={[s.listGroup, 'thin-scroll'].join(' ')}>
<ListGroupItem className={[s.listGroupItem, 'bg-warning-light'].join(' ')}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<img className="rounded-circle" src={a2} alt="..." />
<i className="status status-bottom bg-success" />
</span>
<time className="text-link help float-right">10 sec ago</time>
<h6 className="m-0 fw-bold mb-1">Chris Gray</h6>
<p className="deemphasize text-ellipsis m-0">Hey! What's up? So many times since we</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<img className="rounded-circle" src={avatar} alt="..." />
<i className="status status-bottom bg-success" />
</span>
<time className="text-link help float-right">2 min ago</time>
<h6 className="m-0 mb-1">Jamey Brownlow</h6>
<p className="deemphasize text-ellipsis m-0">Good news coming tonight. Seems they agreed to proceed</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<img className="rounded-circle" src={a1} alt="..." />
<i className="status status-bottom bg-warning" />
</span>
<time className="text-link help float-right">9 min ago</time>
<h6 className="m-0 mb-1">Livia Walsh</h6>
<p className="deemphasize text-ellipsis m-0">Check out my latest email plz!</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<img className="rounded-circle" src={avatar} alt="..." />
<i className="status status-bottom bg-danger" />
</span>
<time className="text-link help float-right">12:56 AM</time>
<h6 className="m-0 mb-1">Jaron Fitzroy</h6>
<p className="deemphasize text-ellipsis m-0">What about summer break?</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<img className="rounded-circle" src={a4} alt="..." />
<i className="status status-bottom bg-gray-light" />
</span>
<time className="text-link help float-right">Yesterday</time>
<h6 className="m-0 mb-1">Mike Lewis</h6>
<p className="deemphasize text-ellipsis m-0">Just ain't sure about the weekend now. 90% I'll make it.</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<img className="rounded-circle" src={a6} alt="..." />
<i className="status status-bottom bg-success" />
</span>
<time className="text-link help float-right">Apr 23</time>
<h6 className="m-0 mb-1">Freda Edison</h6>
<p className="deemphasize text-ellipsis m-0">Hey what's up? Me and Monica going for a lunch somewhere. Wanna join?</p>
</ListGroupItem>
</ListGroup>
);
}
}
export default MessagesDemo;