diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/showcase/Showcase.kt b/core/ui/src/main/java/com/tangem/core/ui/components/showcase/Showcase.kt new file mode 100644 index 0000000000..8112024b54 --- /dev/null +++ b/core/ui/src/main/java/com/tangem/core/ui/components/showcase/Showcase.kt @@ -0,0 +1,143 @@ +package com.tangem.core.ui.components.showcase + +import android.content.res.Configuration +import androidx.annotation.DrawableRes +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.tooling.preview.Preview +import com.tangem.core.ui.R +import com.tangem.core.ui.components.PrimaryButton +import com.tangem.core.ui.components.SecondaryButton +import com.tangem.core.ui.components.showcase.model.ShowcaseButtonModel +import com.tangem.core.ui.components.showcase.model.ShowcaseItemModel +import com.tangem.core.ui.extensions.TextReference +import com.tangem.core.ui.extensions.resolveReference +import com.tangem.core.ui.extensions.resourceReference +import com.tangem.core.ui.res.TangemTheme +import com.tangem.core.ui.res.TangemThemePreview +import kotlinx.collections.immutable.ImmutableList +import kotlinx.collections.immutable.persistentListOf + +/** + * @param headerIconRes big header icon + * @param headerText header text + * @param showcaseItems list of bullet points + * @param primaryButton primary button + * @param secondaryButton secondary button + * @param modifier compose modifier + * + * @see Figma component + */ +@Composable +fun Showcase( + @DrawableRes headerIconRes: Int, + headerText: TextReference, + showcaseItems: ImmutableList, + primaryButton: ShowcaseButtonModel, + secondaryButton: ShowcaseButtonModel, + modifier: Modifier = Modifier, +) { + Column( + modifier = modifier.fillMaxSize(), + ) { + ShowcaseContent( + headerIconRes = headerIconRes, + headerText = headerText, + showcaseItems = showcaseItems, + modifier = Modifier + .weight(1f) + .align(Alignment.CenterHorizontally), + ) + ShowcaseButtons( + primaryButtonText = primaryButton.buttonText, + onPrimaryClick = primaryButton.onClick, + secondaryButtonText = secondaryButton.buttonText, + onSecondaryClick = secondaryButton.onClick, + ) + } +} + +@Composable +private fun ShowcaseButtons( + primaryButtonText: TextReference, + secondaryButtonText: TextReference, + onPrimaryClick: () -> Unit, + onSecondaryClick: () -> Unit, + hint: TextReference? = null, +) { + Column( + horizontalAlignment = Alignment.CenterHorizontally, + ) { + PrimaryButton( + text = primaryButtonText.resolveReference(), + onClick = onPrimaryClick, + modifier = Modifier + .fillMaxWidth() + .padding( + start = TangemTheme.dimens.spacing16, + end = TangemTheme.dimens.spacing16, + ), + ) + SecondaryButton( + text = secondaryButtonText.resolveReference(), + onClick = onSecondaryClick, + modifier = Modifier + .fillMaxWidth() + .padding( + start = TangemTheme.dimens.spacing16, + end = TangemTheme.dimens.spacing16, + top = TangemTheme.dimens.spacing12, + bottom = TangemTheme.dimens.spacing16, + ), + ) + hint?.let { + Text( + text = it.resolveReference(), + style = TangemTheme.typography.body2, + color = TangemTheme.colors.text.secondary, + modifier = Modifier + .fillMaxWidth() + .padding( + start = TangemTheme.dimens.spacing16, + end = TangemTheme.dimens.spacing16, + bottom = TangemTheme.dimens.spacing12, + ), + ) + } + } +} + +// region Preview +@Preview(showBackground = true, widthDp = 360, heightDp = 720) +@Preview(showBackground = true, widthDp = 360, heightDp = 720, uiMode = Configuration.UI_MODE_NIGHT_YES) +@Composable +private fun Showcase_Preview() { + TangemThemePreview { + Showcase( + headerIconRes = R.drawable.ic_notifications_unread_24, + headerText = resourceReference(R.string.user_push_notification_agreement_header), + showcaseItems = persistentListOf( + ShowcaseItemModel( + R.drawable.ic_rocket_launch_24, + resourceReference(R.string.user_push_notification_agreement_argument_one), + ), + ShowcaseItemModel( + R.drawable.ic_storefront_24, + resourceReference(R.string.user_push_notification_agreement_argument_two), + ), + ), + primaryButton = ShowcaseButtonModel(resourceReference(R.string.common_allow), {}), + secondaryButton = ShowcaseButtonModel(resourceReference(R.string.common_later), {}), + modifier = Modifier.background(TangemTheme.colors.background.primary), + ) + } +} +// endregion \ No newline at end of file diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/showcase/ShowcaseContent.kt b/core/ui/src/main/java/com/tangem/core/ui/components/showcase/ShowcaseContent.kt new file mode 100644 index 0000000000..336172a208 --- /dev/null +++ b/core/ui/src/main/java/com/tangem/core/ui/components/showcase/ShowcaseContent.kt @@ -0,0 +1,71 @@ +package com.tangem.core.ui.components.showcase + +import androidx.annotation.DrawableRes +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.material3.Icon +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.text.style.TextAlign +import com.tangem.core.ui.components.showcase.model.ShowcaseItemModel +import com.tangem.core.ui.extensions.TextReference +import com.tangem.core.ui.extensions.resolveReference +import com.tangem.core.ui.res.TangemTheme +import kotlinx.collections.immutable.ImmutableList + +@Composable +fun ShowcaseContent( + @DrawableRes headerIconRes: Int, + headerText: TextReference, + showcaseItems: ImmutableList, + modifier: Modifier = Modifier, +) { + Column( + verticalArrangement = Arrangement.Center, + modifier = modifier, + ) { + Icon( + painter = painterResource(id = headerIconRes), + contentDescription = null, + tint = TangemTheme.colors.icon.primary1, + modifier = Modifier + .align(Alignment.CenterHorizontally) + .size(TangemTheme.dimens.size56), + ) + Text( + text = headerText.resolveReference(), + style = TangemTheme.typography.h2, + color = TangemTheme.colors.text.primary1, + textAlign = TextAlign.Center, + modifier = Modifier + .align(Alignment.CenterHorizontally) + .padding( + start = TangemTheme.dimens.spacing34, + end = TangemTheme.dimens.spacing34, + top = TangemTheme.dimens.spacing28, + ), + ) + Column( + modifier = Modifier + .padding( + start = TangemTheme.dimens.spacing34, + end = TangemTheme.dimens.spacing34, + top = TangemTheme.dimens.spacing28, + ), + verticalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing24), + horizontalAlignment = Alignment.CenterHorizontally, + ) { + repeat(showcaseItems.size) { index -> + ShowcaseItem( + iconRes = showcaseItems[index].iconRes, + text = showcaseItems[index].text, + ) + } + } + } +} \ No newline at end of file diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/showcase/ShowcaseItem.kt b/core/ui/src/main/java/com/tangem/core/ui/components/showcase/ShowcaseItem.kt new file mode 100644 index 0000000000..824144dbf5 --- /dev/null +++ b/core/ui/src/main/java/com/tangem/core/ui/components/showcase/ShowcaseItem.kt @@ -0,0 +1,30 @@ +package com.tangem.core.ui.components.showcase + +import androidx.annotation.DrawableRes +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.padding +import androidx.compose.material3.Icon +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.res.painterResource +import com.tangem.core.ui.extensions.TextReference +import com.tangem.core.ui.extensions.resolveReference +import com.tangem.core.ui.res.TangemTheme + +@Composable +internal fun ShowcaseItem(@DrawableRes iconRes: Int, text: TextReference) { + Row { + Icon( + painter = painterResource(id = iconRes), + contentDescription = null, + tint = TangemTheme.colors.icon.primary1, + ) + Text( + text = text.resolveReference(), + style = TangemTheme.typography.body2, + color = TangemTheme.colors.text.secondary, + modifier = Modifier.padding(start = TangemTheme.dimens.spacing20), + ) + } +} \ No newline at end of file diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/showcase/model/ShowcaseButtonModel.kt b/core/ui/src/main/java/com/tangem/core/ui/components/showcase/model/ShowcaseButtonModel.kt new file mode 100644 index 0000000000..602465c864 --- /dev/null +++ b/core/ui/src/main/java/com/tangem/core/ui/components/showcase/model/ShowcaseButtonModel.kt @@ -0,0 +1,8 @@ +package com.tangem.core.ui.components.showcase.model + +import com.tangem.core.ui.extensions.TextReference + +data class ShowcaseButtonModel( + val buttonText: TextReference, + val onClick: () -> Unit, +) \ No newline at end of file diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/showcase/model/ShowcaseItemModel.kt b/core/ui/src/main/java/com/tangem/core/ui/components/showcase/model/ShowcaseItemModel.kt new file mode 100644 index 0000000000..f9865aab9e --- /dev/null +++ b/core/ui/src/main/java/com/tangem/core/ui/components/showcase/model/ShowcaseItemModel.kt @@ -0,0 +1,9 @@ +package com.tangem.core.ui.components.showcase.model + +import androidx.annotation.DrawableRes +import com.tangem.core.ui.extensions.TextReference + +data class ShowcaseItemModel( + @DrawableRes val iconRes: Int, + val text: TextReference, +) \ No newline at end of file diff --git a/core/ui/src/main/res/drawable/ic_notifications_unread_24.xml b/core/ui/src/main/res/drawable/ic_notifications_unread_24.xml new file mode 100644 index 0000000000..c50e451c69 --- /dev/null +++ b/core/ui/src/main/res/drawable/ic_notifications_unread_24.xml @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/core/ui/src/main/res/drawable/ic_rocket_launch_24.xml b/core/ui/src/main/res/drawable/ic_rocket_launch_24.xml new file mode 100644 index 0000000000..a7b572f5f0 --- /dev/null +++ b/core/ui/src/main/res/drawable/ic_rocket_launch_24.xml @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/core/ui/src/main/res/drawable/ic_storefront_24.xml b/core/ui/src/main/res/drawable/ic_storefront_24.xml new file mode 100644 index 0000000000..7f17e6c496 --- /dev/null +++ b/core/ui/src/main/res/drawable/ic_storefront_24.xml @@ -0,0 +1,11 @@ + + + + + + + + + + +