Glowy Button

import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.style.animate
import androidx.compose.foundation.style.pressed
import androidx.compose.foundation.style.rememberUpdatedStyleState
import androidx.compose.foundation.style.styleable
import androidx.compose.foundation.text.BasicText
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawWithCache
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.BlurEffect
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.graphics.Shadow
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.graphics.TileMode
import androidx.compose.ui.graphics.layer.drawLayer
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.graphics.vector.path
import androidx.compose.ui.semantics.clearAndSetSemantics
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.composeunstyled.UnstyledButton
import com.composeunstyled.UnstyledIcon

private val GlowTextStyle = TextStyle(
    color = Color.White,
    fontSize = 24.sp,
    fontWeight = FontWeight.Medium,
    letterSpacing = 1.sp,
    shadow = Shadow(
        color = Color.White,
        offset = Offset.Zero,
        blurRadius = 9f,
    ),
)

private fun Modifier.glow(
    color: Color,
    radius: androidx.compose.ui.unit.Dp,
): Modifier = drawWithCache {
    val glowLayer = obtainGraphicsLayer()

    onDrawWithContent drawGlow@{
        glowLayer.colorFilter = ColorFilter.tint(color)
        glowLayer.renderEffect = BlurEffect(radius.toPx(), radius.toPx(), TileMode.Decal)
        glowLayer.record { [email protected]() }
        drawLayer(glowLayer)
        drawContent()
    }
}

@Composable
private fun Sparks(modifier: Modifier = Modifier) {
    Box(modifier) {
        UnstyledIcon(
            imageVector = Star,
            tint = Color.White,
            modifier = Modifier
                .size(24.dp)
                .glow(color = Color.White, radius = 6.dp)
        )
        UnstyledIcon(
            imageVector = Star,
            tint = Color.White,
            modifier = Modifier
                .size(12.8.dp)
                .offset(x = 20.dp, y = (-4).dp)
                .glow(color = Color.White, radius = 6.dp)
        )
    }
}

@Composable
private fun GlowyText(text: String) {
    Box(modifier = Modifier.clearAndSetSemantics { }) {
        BasicText(
            text = text,
            style = GlowTextStyle,
            modifier = Modifier.clearAndSetSemantics { },
        )
        BasicText(
            text = text,
            style = GlowTextStyle.copy(
                shadow = Shadow(
                    color = Color.Black,
                    offset = Offset(1f, 1f),
                    blurRadius = 0f,
                ),
            ),
        )
    }
}

@Preview
@Composable
fun GlowyButton() {
    val interactionSource = remember { MutableInteractionSource() }
    val styleState = rememberUpdatedStyleState(interactionSource)
    UnstyledButton(
        onClick = { /* TODO */ },
        interactionSource = interactionSource,
        contentPadding = PaddingValues(
            start = 4.dp,
            end = 4.dp,
            bottom = 4.dp,
        ),
        modifier = Modifier
            .styleable(styleState) {
                shape(RoundedCornerShape(20.dp))
                background(Color(0xFF161616))

                dropShadow(
                    androidx.compose.ui.graphics.shadow.Shadow(
                        12.dp,
                        Color.Black,
                        alpha = 0.33f
                    )
                )
                animate {
                    pressed {
                        dropShadow(
                            androidx.compose.ui.graphics.shadow.Shadow(0.dp)
                        )
                    }
                }
            },
    ) {
        Box(
            modifier = Modifier
                .styleable {
                    shape(RoundedCornerShape(16.dp))
                    background(Color(0xFF374E72))
                }
                .padding(bottom = 3.dp),
        ) {
            Row(
                modifier = Modifier
                    .styleable {
                        shape(RoundedCornerShape(16.dp))
                        background(
                            Brush.verticalGradient(
                                colors = listOf(
                                    Color(0xFF5771A5),
                                    Color(0xFF000000),
                                ),
                            ),
                        )
                    }
                    .padding(horizontal = 30.dp, vertical = 12.dp),
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.spacedBy(12.dp),
            ) {
                Sparks()
                GlowyText("Generate")
            }
        }
    }
}

val Star: ImageVector
    get() {
        if (_Star != null) return _Star!!

        _Star = ImageVector.Builder(
            name = "star",
            defaultWidth = 24.dp,
            defaultHeight = 24.dp,
            viewportWidth = 256f,
            viewportHeight = 256f,
        ).apply {
            path(fill = SolidColor(Color.White)) {
                moveTo(240f, 128f)
                arcToRelative(15.79f, 15.79f, 0f, false, true, -10.5f, 15f)
                lineToRelative(-63.44f, 23.07f)
                lineTo(143f, 229.5f)
                arcToRelative(16f, 16f, 0f, false, true, -30f, 0f)
                lineToRelative(-23.06f, -63.44f)
                lineTo(26.5f, 143f)
                arcToRelative(16f, 16f, 0f, false, true, 0f, -30f)
                lineToRelative(63.44f, -23.06f)
                lineTo(113f, 26.5f)
                arcToRelative(16f, 16f, 0f, false, true, 30f, 0f)
                lineToRelative(23.07f, 63.44f)
                lineTo(229.5f, 113f)
                arcToRelative(15.79f, 15.79f, 0f, false, true, 10.5f, 15f)
                close()
            }
        }.build()
        return _Star!!
    }
private var _Star: ImageVector? = null