Basic UI Compose Desktop

Basic UI Compose Desktop

import androidx.compose.desktop.Window
import androidx.compose.foundation.Image
import androidx.compose.foundation.Text
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Button
import androidx.compose.material.Card
import androidx.compose.material.Divider
import androidx.compose.material.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clipToBounds
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.imageFromResource
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

fun main() = Window {
    MaterialTheme {
        val color = Color(0xFF001d3e)
        val bg = Color(0xFFf2fbfe)
        val textStyle1 = TextStyle(color, fontSize = 16.sp, fontWeight = FontWeight.SemiBold)
        val textStyle2 = TextStyle(color, fontSize = 22.sp, fontWeight = FontWeight.SemiBold)
        val textStyle3 = TextStyle(color, fontSize = 44.sp, fontWeight = FontWeight.Bold)

        Column(
            Modifier.fillMaxSize().background(bg)
        ) {
            Header(textStyle1, color)

            Spacer(modifier = Modifier.preferredHeight(100.dp))

            Content(color, textStyle1, textStyle3, textStyle2)

            Spacer(Modifier.preferredHeight(50.dp))

            Footer(CircleShape, textStyle1, textStyle2)
        }
    }
}

@Composable
private fun Footer(
    CircleShape: RoundedCornerShape,
    textStyle1: TextStyle,
    textStyle2: TextStyle
) {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier
            .padding(start = 32.dp)
    ) {


        Card(
            backgroundColor = Color(0xFFfe9a8f),
            shape = CircleShape
        ) {
            Image(
                asset = imageFromResource("expert.png"),
                modifier = Modifier.padding(top = 8.dp).clipToBounds()
            )
        }

        Column {
            Text(
                "Question ?",
                modifier = Modifier.padding(start = 8.dp),
                style = textStyle1.copy(fontWeight = null)
            )
            Text(
                "Talk to our experts",
                modifier = Modifier.padding(start = 8.dp),
                style = textStyle2.copy(fontSize = 16.sp)
            )
        }
    }
}

@Composable
private fun Header(textStyle1: TextStyle, color: Color) {
    Row(
        horizontalArrangement = Arrangement.SpaceBetween,
        modifier = Modifier
            .fillMaxWidth()
            .padding(32.dp)
    ) {
        Row {
            Column(
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(
                    "Home",
                    Modifier
                        .preferredWidth(60.dp)
                        .padding(8.dp),
                    style = textStyle1
                )
                Divider(
                    modifier = Modifier
                        .preferredWidth(60.dp)
                        .preferredHeight(2.dp)
                        .background(color)
                )
            }

            Text(
                "Blog",
                Modifier.padding(8.dp),
                style = textStyle1
            )

            Text(
                "BeInTouch",
                Modifier.padding(8.dp),
                style = textStyle1
            )
        }

        Row(
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text(
                "Login",
                style = textStyle1,
                modifier = Modifier.padding(end = 16.dp)
            )
            Button(
                onClick = { },
                Modifier
                    .padding(8.dp),
                backgroundColor = color,
                shape = RoundedCornerShape(0.dp)
            ) {
                Text(
                    "Register",
                    style = textStyle1.copy(color = Color.White)
                )
            }
        }
    }
}

@Composable
private fun Content(
    color: Color,
    textStyle1: TextStyle,
    textStyle3: TextStyle,
    textStyle2: TextStyle
) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 64.dp),
        horizontalArrangement = Arrangement.Center,
        verticalAlignment = Alignment.CenterVertically
    ) {

        Column(
            horizontalAlignment = Alignment.Start,
            verticalArrangement = Arrangement.Center
        ) {
            Row(
                verticalAlignment = Alignment.CenterVertically
            ) {
                Divider(
                    modifier = Modifier
                        .preferredWidth(48.dp)
                        .padding(end = 8.dp)
                        .background(color)
                )
                Text(
                    "Jetpack Compose on desktop",
                    style = textStyle1
                )
            }
            Text(
                "The New One Code\nMultiple Platforms",
                style = textStyle3
            )
            Text(
                "Productivity, clean, readable, maintenable",
                style = textStyle2
            )
        }

        Image(
            asset = imageFromResource("compose.png"),
            modifier = Modifier.width(300.dp).height(300.dp)
        )
    }
}

In the future, but imageFromResource appears to be dead now.