NewNotifications.js
5.1 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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
import React from 'react';
import {
ListGroup,
ListGroupItem,
Button,
} from 'reactstrap';
import s from './ListGroup.module.scss';
import a3 from '../../../images/people/a3.jpg';
import a5 from '../../../images/people/a5.jpg';
import a6 from '../../../images/people/a6.jpg';
class NewNotificationsDemo extends React.Component {
render() {
return (
<ListGroup className={[s.listGroup, 'thin-scroll'].join(' ')}>
<ListGroupItem className={`${s.listGroupItem} bg-attention`}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<i className="fa fa-check text-success fa-lg" />
</span>
<p className="m-0 overflow-hidden">
2 issues require your approval.
{/* eslint-disable */}
<a href="#">The Search Project</a> completed on time!
{/* eslint-enable */}
<time className="help-block m-0">
just now
</time>
</p>
</ListGroupItem>
<ListGroupItem className={`${s.listGroupItem} bg-attention`}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<img className="rounded-circle" src={a6} alt="..." />
</span>
<p className="m-0 overflow-hidden">
<button className="btn-link">Jeniffer Willington</button>has just endorsed you with 50 points!
<time className="help-block m-0">
30 sec ago
</time>
</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<img className="rounded-circle" src={a3} alt="..." />
</span>
<p className="m-0 overflow-hidden">
1 new user just signed up! Check out
{/* eslint-disable */}
<a href="#">Monica Smith</a>'s account.
{/* eslint-enable */}
<time className="help-block m-0">
2 mins ago
</time>
</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<i className="glyphicon glyphicon-upload fa-lg" />
</span>
<p className="text-ellipsis m-0">
2.1.0-pre-alpha just released.
<time className="help-block m-0">
5h ago
</time>
</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<i className="fa fa-bolt fa-lg" />
</span>
<p className="text-ellipsis m-0 overflow-hidden">
Server load limited.
<time className="help-block m-0">
7h ago
</time>
</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<img className="rounded-circle" src={a5} alt="..." />
</span>
<p className="m-0 overflow-hidden">
{/* eslint-disable */}
User <a href="#">Jeff</a> registered
{/* eslint-enable */}
<Button size="xs" color="success" className="mr-1">Allow</Button>
<Button size="xs" color="danger">Deny</Button>
<time className="help-block m-0">
12:18 AM
</time>
</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<i className="fa fa-shield fa-lg" />
</span>
<p className="m-0 overflow-hidden">
{/* eslint-disable */}
Instructions for changing your Envato Account password. Please
check your account <a href="#">security page</a>.
{/* eslint-enable */}
<time className="help-block m-0">
12:18 AM
</time>
</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<span className="rounded bg-primary rounded-lg">
<i className="fa fa-facebook text-white" />
</span>
</span>
<p className="text-ellipsis m-0">
New <strong>76</strong> facebook likes received.
<time className="help-block m-0">
15 Apr 2014
</time>
</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<span className="circle circle-lg bg-gray-dark">
<i className="fa fa-circle-o text-white" />
</span>
</span>
<p className="text-ellipsis m-0">
Dark matter detected.
<time className="help-block m-0">
15 Apr 2014
</time>
</p>
</ListGroupItem>
</ListGroup>
);
}
}
export default NewNotificationsDemo;