11package to.bitkit.ui.components
22
3- import androidx.compose.animation.AnimatedContent
43import androidx.compose.foundation.Image
54import androidx.compose.foundation.background
65import androidx.compose.foundation.layout.Arrangement
@@ -11,63 +10,77 @@ import androidx.compose.foundation.layout.fillMaxSize
1110import androidx.compose.foundation.layout.fillMaxWidth
1211import androidx.compose.foundation.layout.padding
1312import androidx.compose.foundation.layout.size
13+ import androidx.compose.material3.Icon
1414import androidx.compose.runtime.Composable
15+ import androidx.compose.ui.Alignment
1516import androidx.compose.ui.Modifier
1617import androidx.compose.ui.draw.clip
18+ import androidx.compose.ui.draw.rotate
1719import androidx.compose.ui.res.painterResource
18- import androidx.compose.ui.res.stringResource
1920import androidx.compose.ui.tooling.preview.Preview
2021import androidx.compose.ui.unit.dp
2122import to.bitkit.R
2223import to.bitkit.ui.theme.AppThemeSurface
2324import to.bitkit.ui.theme.Colors
2425import to.bitkit.ui.theme.Shapes
2526
27+ /* * Degrees to rotate the right chevron so it points downward (expand-more) in the preview. */
28+ private const val CHEVRON_EXPAND_ROTATION_DEGREES = 90f
29+
2630@Composable
2731fun NotificationPreview (
2832 enabled : Boolean ,
2933 title : String ,
3034 description : String ,
31- showDetails : Boolean ,
3235 modifier : Modifier = Modifier ,
36+ time : String = "5m",
3337) {
3438 Box (modifier = modifier) {
3539 Row (
36- horizontalArrangement = Arrangement .spacedBy(8 .dp),
40+ horizontalArrangement = Arrangement .spacedBy(14 .dp),
41+ verticalAlignment = Alignment .CenterVertically ,
3742 modifier = Modifier
38- .clip(Shapes .medium )
39- .background(Colors .White80 )
40- .padding(9 .dp)
43+ .clip(Shapes .extraSmall )
44+ .background(Colors .White16 )
45+ .padding(16 .dp)
4146 ) {
4247 Image (
4348 painter = painterResource(R .drawable.ic_notification),
4449 contentDescription = null ,
45- modifier = Modifier
46- .size(38 .dp)
50+ modifier = Modifier .size(24 .dp)
4751 )
4852
4953 Column (
50- modifier = Modifier .weight( 1f ),
51- verticalArrangement = Arrangement . SpaceBetween
54+ verticalArrangement = Arrangement .spacedBy( 4 .dp ),
55+ modifier = Modifier .weight( 1f )
5256 ) {
53- BodySSB (text = title, color = Colors . Black )
54- val textDescription = when (showDetails) {
55- true -> description
56- else -> stringResource( R .string.notification__received__body_hidden)
57- }
58- AnimatedContent (targetState = textDescription) { text ->
59- Footnote (text = text , color = Colors .Gray3 )
57+ Row (
58+ horizontalArrangement = Arrangement .spacedBy( 4 .dp),
59+ verticalAlignment = Alignment . CenterVertically ,
60+ ) {
61+ BodySSB (text = title, color = Colors . White )
62+ Caption (text = " • " , color = Colors . White64 )
63+ Caption (text = time , color = Colors .White64 )
6064 }
65+
66+ BodyS (text = description, color = Colors .White80 )
6167 }
6268
63- Caption (" 3m ago" , color = Colors .Gray2 )
69+ Icon (
70+ painter = painterResource(R .drawable.ic_chevron_right),
71+ contentDescription = null ,
72+ tint = Colors .White64 ,
73+ modifier = Modifier
74+ .size(16 .dp)
75+ .rotate(CHEVRON_EXPAND_ROTATION_DEGREES )
76+ )
6477 }
6578
6679 if (! enabled) {
6780 Box (
6881 modifier = Modifier
6982 .matchParentSize()
70- .clip(Shapes .medium )
83+ .clip(Shapes .extraSmall )
7184 .background(Colors .Black70 )
7285 )
7386 }
@@ -79,24 +92,21 @@ fun NotificationPreview(
7992private fun Preview () {
8093 AppThemeSurface {
8194 Column (
95+ verticalArrangement = Arrangement .spacedBy(16 .dp),
8296 modifier = Modifier
8397 .fillMaxSize()
84- .padding(8 .dp),
85- verticalArrangement = Arrangement .Center
98+ .padding(16 .dp)
8699 ) {
87100 NotificationPreview (
88101 enabled = true ,
89102 title = " Payment Received" ,
90- description = " ₿ 21 000" ,
91- showDetails = true ,
103+ description = " ₿ 21 000 ($21.00)" ,
92104 modifier = Modifier .fillMaxWidth()
93105 )
94- VerticalSpacer (16 .dp)
95106 NotificationPreview (
96107 enabled = false ,
97108 title = " Payment Received" ,
98- description = " ₿ 21 000" ,
99- showDetails = false ,
109+ description = " ₿ 21 000 ($21.00)" ,
100110 modifier = Modifier .fillMaxWidth()
101111 )
102112 }
0 commit comments