Cardsanimated

Podcast Subscribe

Podcast show card with rating stars and a subscribe button that fills on press.

Tech Talk Daily

Installation

caveui components are copy-paste Jetpack Compose built entirely on Material 3 — there's no caveui dependency to add. Make sure Material 3 is on your classpath (it ships with the Compose BOM), then copy the Usage snippet below into your project.

kotlin

// build.gradle.kts (module)
dependencies {
    implementation(platform("androidx.compose:compose-bom:2025.06.00"))
    implementation("androidx.compose.material3:material3")
}

Usage

kotlin

@Composable
fun PodcastSubscribe(show: String) {
  var subbed by remember { mutableStateOf(false) }
  Card(
    shape = RoundedCornerShape(20.dp),
    modifier = Modifier.fillMaxWidth(),
  ) {
    Column(
      horizontalAlignment = Alignment.CenterHorizontally,
      modifier = Modifier.padding(18.dp),
    ) {
      Box(
        modifier = Modifier
          .size(76.dp)
          .clip(RoundedCornerShape(16.dp))
          .background(
            Brush.linearGradient(
              listOf(Color(0xFFF97316), Color(0xFFEF4444)),
            ),
          ),
        contentAlignment = Alignment.Center,
      ) {
        Icon(
          Icons.Default.Rss,
          contentDescription = null,
          tint = Color.White,
        )
      }
      Spacer(Modifier.height(10.dp))
      Text(show, style = MaterialTheme.typography.titleMedium)
      Row {
        repeat(5) {
          Icon(
            Icons.Default.Star,
            contentDescription = null,
            tint = Color(0xFFF59E0B),
            modifier = Modifier.size(14.dp),
          )
        }
      }
      Spacer(Modifier.height(12.dp))
      Button(
        onClick = { subbed = !subbed },
        colors = if (subbed)
          ButtonDefaults.outlinedButtonColors()
        else ButtonDefaults.buttonColors(),
      ) {
        Icon(Icons.Default.Add, contentDescription = null)
        Spacer(Modifier.width(6.dp))
        Text(if (subbed) "Subscribed" else "Subscribe")
      }
    }
  }
}