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
import React from 'react'
import { getTimeDifference } from 'utils'
import { Link } from 'react-router-dom'
import { makeStyles } from '@material-ui/core/styles'
import clsx from 'clsx'
import { Divider } from '@material-ui/core'
const useStyles = makeStyles(({ palette, ...theme }) => ({
circle: {
position: 'absolute',
height: 16,
width: 16,
borderRadius: '50%',
boxShadow: theme.shadows[3],
left: 18,
top: 23,
},
verticalLine: {
position: 'absolute',
left: 25,
width: 2,
background: 'rgba(var(--body), 0.1)',
},
upperLine: {
top: 0,
height: 23,
},
lowerLine: {
position: 'absolute',
top: 40,
left: 25,
bottom: 0,
},
lightBG: {
background: 'rgba(var(--body),0.03)',
borderRadius: 4,
},
icon: {},
}))
const NotificationCard = ({ notification, isFirstIndex, isLastIndex }) => {
const classes = useStyles()
// console.log(notification);
return (
<div className="relative">
<div className="pl-12 pr-8 py-6">
{!isFirstIndex && (
<div
className={clsx(
classes.upperLine,
classes.verticalLine
)}
></div>
)}
<div
className={clsx(
'flex items-center justify-center',
classes.circle
)}
>
<div className="p-1 bg-primary rounded"></div>
</div>
{!isLastIndex && (
<div
className={clsx(
classes.lowerLine,
classes.verticalLine
)}
></div>
)}
<div className="flex justify-between">
<div className="text-13">
<h5 className="mt-0 mb-1 text-14">
{notification.title}
</h5>
<span className="text-muted">on</span>
<Link className="ml-1 text-primary font-medium" to="/">
Project Name
</Link>
</div>
<small className="text-muted">
{getTimeDifference(new Date(notification.timestamp))}{' '}
ago
</small>
</div>
<p
className={clsx(
'my-2 py-6px px-3 text-14',
classes.lightBG
)}
>
{notification.subtitle}
</p>
</div>
<Divider />
</div>
)
}
export default NotificationCard