@@ -7,127 +7,7 @@ import { Clock } from "~/assets/svg/Clock";
7
7
import { Globe } from "~/assets/svg/Globe" ;
8
8
import { PrivateEye } from "~/assets/svg/Private" ;
9
9
import { LabelCircle } from "~/components" ;
10
-
11
- function GenericItem ( props : {
12
- primaryAvatarUrl : string ;
13
- secondaryAvatarUrl ?: string ;
14
- primaryName : string ;
15
- secondaryName ?: string ;
16
- verb : string ;
17
- amount : bigint ;
18
- date : string ;
19
- due ?: string ;
20
- message ?: string ;
21
- accent ?: "green" ;
22
- public ?: boolean ;
23
- showFiat ?: boolean ;
24
- } ) {
25
- return (
26
- < div
27
- class = "grid py-3"
28
- classList = { {
29
- "grid-cols-[auto_1fr_auto]" : true
30
- } }
31
- >
32
- < div class = "self-center" >
33
- < LabelCircle
34
- label = { false }
35
- name = { props . primaryName }
36
- contact
37
- image_url = { props . primaryAvatarUrl }
38
- />
39
- </ div >
40
- < div class = "flex flex-col items-start gap-1 px-2" >
41
- { /* TITLE TEXT */ }
42
- < h2 class = "text-sm" >
43
- < strong > { props . primaryName } </ strong >
44
- < span class = "font-light" > { ` ${ props . verb } ` } </ span >
45
- < Show when = { props . secondaryName } >
46
- < strong > { props . secondaryName } </ strong >
47
- </ Show >
48
- </ h2 >
49
- < div class = "flex flex-wrap gap-1" >
50
- { /* AMOUNT */ }
51
- < div
52
- class = "flex items-center gap-1 rounded-full px-2 py-1 text-xs font-semibold text-white"
53
- classList = { {
54
- "bg-m-grey-800" : ! props . accent ,
55
- "bg-m-green/40 " : props . accent === "green"
56
- } }
57
- >
58
- < img src = { bolt } width = { 8 } height = { 8 } />
59
- { `${ props . amount . toLocaleString ( ) } sats` }
60
- </ div >
61
- { /* FIAT AMOUNT */ }
62
- < Show when = { props . showFiat } >
63
- < div class = "flex items-center gap-1 rounded-full py-1 text-xs font-semibold text-m-grey-400" >
64
- { `~$42.00 USD` }
65
- </ div >
66
- </ Show >
67
- { /* OPTIONAL MESSAGE */ }
68
- < Show when = { props . message } >
69
- < div class = "font-regular line-clamp-1 min-w-0 flex-1 break-all rounded-full bg-m-grey-800 px-2 text-xs leading-6" >
70
- { props . message }
71
- </ div >
72
- </ Show >
73
- </ div >
74
- { /* DATE WITH SECOND AVATAR */ }
75
- < Show when = { props . secondaryAvatarUrl } >
76
- < div class = "flex items-center gap-1 text-m-grey-400" >
77
- < Show when = { props . public } >
78
- { /* <img src={globe} width={12} height={12} /> */ }
79
- < Globe />
80
- </ Show >
81
- < Show when = { ! props . public } >
82
- < PrivateEye />
83
- { /* <img src={privateEye} width={12} height={12} /> */ }
84
- </ Show >
85
- < span class = "text-xs text-m-grey-400" >
86
- { props . date }
87
- </ span >
88
- </ div >
89
- </ Show >
90
- </ div >
91
- < Show when = { props . secondaryAvatarUrl } >
92
- < div class = "self-center" >
93
- < LabelCircle
94
- label = { false }
95
- name = { props . secondaryName }
96
- contact
97
- image_url = { props . secondaryAvatarUrl }
98
- />
99
- </ div >
100
- </ Show >
101
- < Show when = { ! props . secondaryAvatarUrl } >
102
- < div class = "self-center" >
103
- { /* DATE */ }
104
- < div class = "flex items-center gap-1 text-m-grey-400" >
105
- < Show when = { props . public } >
106
- { /* <img src={globe} width={12} height={12} /> */ }
107
- < Globe />
108
- </ Show >
109
- < Show when = { ! props . public } >
110
- < PrivateEye />
111
- { /* <img src={privateEye} width={12} height={12} /> */ }
112
- </ Show >
113
- < span class = "text-xs text-m-grey-400" >
114
- { props . date }
115
- </ span >
116
- </ div >
117
- { /* DUE */ }
118
- < Show when = { props . due } >
119
- < div class = "flex items-center gap-1 text-m-grey-400" >
120
- < Clock />
121
- < span class = "text-xs text-m-grey-400" >
122
- { props . due }
123
- </ span >
124
- </ div >
125
- </ Show >
126
- </ div >
127
- </ Show >
128
- </ div >
129
- ) ;
130
- }
10
+ import { GenericItem } from "~/components/GenericItem" ;
131
11
132
12
const PAUL =
133
13
"https://cdn.satellite.earth/75fc2f4692566ddf090748e8d53cb1863ec93fa784ccedd533dcdd9ecbad159d.gif" ;
0 commit comments