MyScreen.kt

package com.example.secondtry

import androidx.compose.foundation.Image
import androidx.compose.foundation.Text
import androidx.compose.foundation.layout.*
import androidx.compose.material.Divider
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.vectorResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.secondtry.components.WallpostButton
import kotlin.time.ExperimentalTime

// TODO: image loading

@ExperimentalTime
@Composable
fun WallpostView(wallpost: Wallpost) {
    ConstraintLayout {
        val (rndImage, wpHeader, wpTime, wpContent, wpImage, include, include2, btnLike, btnComment, btnShare, linksText) = createRefs()

        RoundedImage(Modifier.constrainAs(rndImage) {
            start.linkTo(parent.start)
        })

        Text(text = wallpost.username,
                modifier = Modifier.padding(5.dp, 0.dp, 0.dp, 0.dp).constrainAs(wpHeader) {
                    start.linkTo(rndImage.end)
                    top.linkTo(parent.top)
                },
                style = TextStyle(fontWeight = FontWeight.Bold),
                color = Color.Black,
                fontSize = 16.sp)

        Text(text = wallpost.timeEllapsed,
                modifier = Modifier.padding(5.dp, 0.dp, 0.dp, 0.dp).constrainAs(wpTime) {
                    start.linkTo(rndImage.end)
                    top.linkTo(wpHeader.bottom)
                })

        Text(text = wallpost.content,
                modifier = Modifier.padding(5.dp, 5.dp, 0.dp, 5.dp).constrainAs(wpContent) {
                    start.linkTo(parent.start)
                    top.linkTo(wpTime.bottom)
                },
                color = Color.Black,
                fontSize = 16.sp)

        Image(
             asset = vectorResource(id = R.drawable.user),
             modifier = Modifier.padding(0.dp, 10.dp, 0.dp, 10.dp).constrainAs(wpImage) {
                 end.linkTo(parent.end)
                 top.linkTo(wpContent.bottom)
             }
        )

        Divider(color = Color.Gray,
                modifier = Modifier.height(1.dp).constrainAs(include) {
                    start.linkTo(parent.start)
                    top.linkTo(wpImage.bottom)
                })

        WallpostButton(imageId = R.drawable.like,
                modifier = Modifier.constrainAs(btnLike) {
                    start.linkTo(parent.start)
                    end.linkTo(btnComment.start)
                    top.linkTo(include.bottom)
                },
                text = "Like")

        // TODO: make vector image for comment
        WallpostButton(imageId = R.drawable.share,
                modifier = Modifier.constrainAs(btnComment) {
                    end.linkTo(btnShare.start)
                    start.linkTo(btnLike.end)
                    top.linkTo(include.bottom)
                },
                text = "Comment")

        WallpostButton(imageId = R.drawable.share,
                modifier = Modifier.constrainAs(btnShare) {
                    end.linkTo(include.end)
                    start.linkTo(btnComment.end)
                    top.linkTo(include.bottom)
                },
                text = "Share")

        createHorizontalChain(btnLike, btnComment, btnShare, chainStyle = ChainStyle.SpreadInside)

        Divider(color = Color.Gray,
                modifier = Modifier.height(1.dp).constrainAs(include2) {
                    start.linkTo(parent.start)
                    top.linkTo(btnComment.bottom)
                })

        Text(text = wallpost.linksText,
                modifier = Modifier.padding(10.dp, 0.dp, 0.dp, 0.dp).constrainAs(linksText) {
                    start.linkTo(parent.start)
                    top.linkTo(include2.bottom)
                },
                color = Color.Black)
    }
}