package com.suno.android.common_ui.components.dialogs import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.width import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.Text import androidx.compose.material3.TextButton import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.draw.paint import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Color import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import com.suno.android.common_ui.R import com.suno.android.common_ui.components.buttons.RoundedPillContainer import com.suno.android.common_ui.theme.AukPink import com.suno.android.common_ui.theme.ExtendedTheme import com.suno.android.common_ui.theme.SunoTheme import com.suno.android.common_res.R as CommonResR @Composable fun AukDialogScaffold( modifier: Modifier = Modifier, leftActionTitle: String, onLeftActionClick: () -> Unit, rightActionTitle: String, onRightActionClick: () -> Unit, topDisplayContent: @Composable () -> Unit, ) { Box( modifier = Modifier .clip(RoundedCornerShape(32.dp)) .paint( painter = painterResource(R.drawable.launch_splash_auk), contentScale = ContentScale.Crop, ) .background( brush = Brush.verticalGradient( colors = listOf( Color(0x00000000), Color(0xAA000000), ), ), ) .width(310.dp) .padding(32.dp), ) { Column( modifier = Modifier, ) { Box( modifier = Modifier.fillMaxWidth(), contentAlignment = Alignment.Center, ) { topDisplayContent.invoke() } Row( modifier = Modifier .padding(top = 24.dp) .height(64.dp) .fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween, verticalAlignment = Alignment.CenterVertically, ) { TextButton( onClick = { onLeftActionClick.invoke() }, ) { Text( text = leftActionTitle, color = Color.White, style = ExtendedTheme.typography.body, ) } RoundedPillContainer( backgroundColorOverride = Color.White, onClick = { onRightActionClick.invoke() }, ) { Text( text = rightActionTitle, style = ExtendedTheme.typography.body, color = Color.Black, ) } } } } } @Preview @Composable private fun AukDialog_Preview() { SunoTheme { AukDialogScaffold( leftActionTitle = "Close", rightActionTitle = "Upgrade Now", onLeftActionClick = {}, onRightActionClick = {}, topDisplayContent = {}, ) } } @Preview @Composable private fun AukDialog_Preview_With_Content() { SunoTheme { AukDialogScaffold( leftActionTitle = "Close", rightActionTitle = "Upgrade Now", onLeftActionClick = {}, onRightActionClick = {}, topDisplayContent = { Column( horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.spacedBy(16.dp), ) { Text( modifier = Modifier .background( color = AukPink, shape = RoundedCornerShape(16.dp), ) .padding(vertical = 4.dp, horizontal = 6.dp), text = stringResource(CommonResR.string.NEW_MODEL), style = ExtendedTheme.typography.smallBody, ) Text( modifier = Modifier.width(300.dp), text = stringResource(CommonResR.string.v45_upsell_dialog_header), style = ExtendedTheme.typography.mediumHeadline, color = Color.White, textAlign = TextAlign.Center, ) Text( modifier = Modifier.width(250.dp), text = stringResource(CommonResR.string.v45_upsell_dialog_body), style = ExtendedTheme.typography.smallBody.copy(fontSize = 12.sp), color = Color.White, textAlign = TextAlign.Center, ) } }, ) } }