commonMain.io.github.lyxnx.compose.pine.Badge.kt Maven / Gradle / Ivy

Go to download
package io.github.lyxnx.compose.pine

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.BoxScope
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Icon
import androidx.compose.material3.LocalContentColor
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp

/**
 * A Pine Theme badge component
 *
 * These are used to display a very short piece of information, such as a number of notifications
 *
 * This is the simplest version of a badge that allows custom content to be displayed within the badge itself
 *
 * @param modifier the modifier to apply to the badge
 * @param colors the colors to use for the badge
 * @param contentPadding the padding to apply to the content within the badge
 * @param content the content to display within the badge
 */
@Composable
public fun Badge(
    modifier: Modifier = Modifier,
    colors: BadgeColors = BadgeDefaults.badgeColors(),
    contentPadding: PaddingValues = BadgeDefaults.ContentPadding,
    content: @Composable BoxScope.() -> Unit
) {
    Box(
        modifier = modifier
            .border(width = 1.dp, color = colors.borderColor, shape = PineTheme.shapes.full)
            .clip(PineTheme.shapes.full)
            .background(colors.backgroundColor)
            .padding(contentPadding),
        contentAlignment = Alignment.Center
    ) {
        CompositionLocalProvider(LocalContentColor provides colors.contentColor) {
            content()
        }
    }
}


/**
 * A Pine Theme badge component
 *
 * These are used to display a very short piece of information, such as a number of notifications
 *
 * @param text text to display within the badge
 * @param modifier the modifier to apply to the badge
 * @param colors the colors to use for the badge
 * @param contentPadding the padding to apply to the content within the badge
 * @param textStyle the style to apply to the badge text
 */
@Composable
public fun Badge(
    text: String,
    modifier: Modifier = Modifier,
    colors: BadgeColors = BadgeDefaults.badgeColors(),
    contentPadding: PaddingValues = BadgeDefaults.ContentPadding,
    textStyle: TextStyle = PineTheme.typography.bodyExtraSmall.copy(fontWeight = FontWeight.SemiBold)
) {
    Badge(
        modifier = modifier,
        colors = colors,
        contentPadding = contentPadding
    ) {
        Text(
            text = text,
            style = textStyle,
            color = LocalContentColor.current
        )
    }
}

/**
 * A Pine Theme badge component
 *
 * This overload is used to display an icon
 *
 * The icon will be tinted with [BadgeColors.contentColor], which is provided by [LocalContentColor]
 *
 * @param icon icon to display within the badge
 * @param modifier the modifier to apply to the badge
 * @param colors the colors to use for the badge
 * @param contentPadding the padding to apply to the content within the badge
 */
@Composable
public fun Badge(
    icon: Painter,
    modifier: Modifier = Modifier,
    colors: BadgeColors = BadgeDefaults.badgeColors(),
    contentPadding: PaddingValues = BadgeDefaults.ContentPadding
) {
    Badge(
        modifier = modifier,
        colors = colors,
        contentPadding = contentPadding
    ) {
        Icon(
            painter = icon,
            contentDescription = null,
            tint = LocalContentColor.current
        )
    }
}