@Composable
fun CourseItem(
course: Course
) {
BoxWithConstraints(
modifier = Modifier
.padding(
7.5
.dp)
.aspectRatio(1f)
.clip(RoundedCornerShape(
10
.dp))
.background(feature.darkColor)
) {
val width = constraints.maxWidth
val height = constraints.maxHeight
val mediumColoredPoint1 = Offset(0f, height *
0
.3f)
val mediumColoredPoint2 = Offset(width *
0
.1f, height *
0
.35f)
val mediumColoredPoint3 = Offset(width *
0
.4f, height *
0
.05f)
val mediumColoredPoint4 = Offset(width *
0
.75f, height *
0
.7f)
val mediumColoredPoint5 = Offset(width *
1
.4f, -height.toFloat())
val mediumColoredPath = Path().apply {
moveTo(mediumColoredPoint1.x, mediumColoredPoint1.y)
standardQuadFromTo(mediumColoredPoint1, mediumColoredPoint2)
standardQuadFromTo(mediumColoredPoint2, mediumColoredPoint3)
standardQuadFromTo(mediumColoredPoint3, mediumColoredPoint4)
standardQuadFromTo(mediumColoredPoint4, mediumColoredPoint5)
lineTo(width.toFloat() + 100f, height.toFloat() + 100f)
lineTo(-100f, height.toFloat() + 100f)
close()
}
val lightPoint1 = Offset(0f, height *
0
.35f)
val lightPoint2 = Offset(width *
0
.1f, height *
0
.4f)
val lightPoint3 = Offset(width *
0
.3f, height *
0
.35f)
val lightPoint4 = Offset(width *
0
.65f, height.toFloat())
val lightPoint5 = Offset(width *
1
.4f, -height.toFloat() / 3f)
val lightColoredPath = Path().apply {
moveTo(lightPoint1.x, lightPoint1.y)
standardQuadFromTo(lightPoint1, lightPoint2)
standardQuadFromTo(lightPoint2, lightPoint3)
standardQuadFromTo(lightPoint3, lightPoint4)
standardQuadFromTo(lightPoint4, lightPoint5)
lineTo(width.toFloat() + 100f, height.toFloat() + 100f)
lineTo(-100f, height.toFloat() + 100f)
close()
}
Canvas(
modifier = Modifier
.fillMaxSize()
) {
drawPath(
path = mediumColoredPath,
color = course.mediumColor
)
drawPath(
path = lightColoredPath,
color = course.lightColor
)
}
Box(
modifier = Modifier
.fillMaxSize()
.padding(
15
.dp)
) {
Text(
text = course.title,
style = MaterialTheme.typography.h2,
lineHeight =
26
.sp,
modifier = Modifier.align(Alignment.TopStart)
)
Icon(
painter = painterResource(id = course.iconId),
contentDescription = course.title,
tint = Color.White,
modifier = Modifier.align(Alignment.BottomStart)
)
Text(
text =
"Start"
,
color = TextWhite,
fontSize =
14
.sp,
fontWeight = FontWeight.Bold,
modifier = Modifier
.clickable {
}
.align(Alignment.BottomEnd)
.clip(RoundedCornerShape(
10
.dp))
.background(ButtonGreen)
.padding(vertical =
6
.dp, horizontal =
15
.dp)
)
}
}
}