Use Jetpack Compose to draw Mac keyboard

mac_keyboard.kt

package info.plateaukao.composekeyboard

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.setContent
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import info.plateaukao.composekeyboard.ui.theme.ComposeKeyboardTheme

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeKeyboardTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background) {
                    MacKeyboard(keyboardType = KeyboardType.Korean)
                }
            }
        }
    }
}

enum class KeyboardType {
    Korean, Japanese
}

data class KeyInfo(
        val topLeft: String = "",
        val topRight: String = "",
        val top: String = "",
        val bottomLeft: String = "",
        val bottomRight: String = "",
        val bottom: String = "",
        val width: Int? = null,
)

val koreanKeyboard: List<List<KeyInfo>> = listOf(
        listOf(
                KeyInfo(bottom = "`", top = "~"),
                KeyInfo(bottom = "1", top = "!"),
                KeyInfo(bottom = "2", top = "@"),
                KeyInfo(bottom = "3", top = "#"),
                KeyInfo(bottom = "4", top = "$"),
                KeyInfo(bottom = "5", top = "%"),
                KeyInfo(bottom = "6", top = "^"),
                KeyInfo(bottom = "7", top = "&"),
                KeyInfo(bottom = "8", top = "*"),
                KeyInfo(bottom = "9", top = "("),
                KeyInfo(bottom = "0", top = ")"),
                KeyInfo(bottom = "-", top = "_"),
                KeyInfo(bottom = "=", top = "+"),
                KeyInfo(bottomRight = "⌫", width = 70)
        ),
        listOf(
                KeyInfo(bottomLeft= "⇥", width = 70),
                KeyInfo(bottomLeft= "Q", topLeft= "ㅃ", topRight= "ㅂ"),
                KeyInfo(bottomLeft= "W", topLeft= "ㅉ", topRight= "ㅈ"),
                KeyInfo(bottomLeft= "E", topLeft= "ㄸ", topRight= "ㄷ"),
                KeyInfo(bottomLeft= "R", topLeft= "ㄲ", topRight= "ㄱ"),
                KeyInfo(bottomLeft= "T", topLeft= "ㅆ", topRight= "ㅅ"),
                KeyInfo(bottomLeft= "Y", topLeft= "", topRight= "ㅛ"),
                KeyInfo(bottomLeft= "U", topLeft= "", topRight= "ㅕ"),
                KeyInfo(bottomLeft= "I", topLeft= "", topRight= "ㅑ"),
                KeyInfo(bottomLeft= "O", topLeft= "ㅒ", topRight= "ㅐ"),
                KeyInfo(bottomLeft= "P", topLeft= "ㅖ", topRight= "ㅔ"),
                KeyInfo(bottom= "[", top= "{"),
                KeyInfo(bottom= "]", top= "}"),
                KeyInfo(bottom= "\\", top= "|"),
        ),
        listOf(
                KeyInfo(bottomLeft= "한/연", topLeft = " •", width = 90),
                KeyInfo(bottomLeft= "A", topLeft= "", topRight= "ㅁ"),
                KeyInfo(bottomLeft= "S", topLeft= "", topRight= "ㄴ"),
                KeyInfo(bottomLeft= "D", topLeft= "", topRight= "ㅇ"),
                KeyInfo(bottomLeft= "F", topLeft= "", topRight= "ㄹ"),
                KeyInfo(bottomLeft= "G", topLeft= "", topRight= "ㅎ"),
                KeyInfo(bottomLeft= "H", topLeft= "", topRight= "ㅗ"),
                KeyInfo(bottomLeft= "J", topLeft= "", topRight= "ㅓ"),
                KeyInfo(bottomLeft= "K", topLeft= "", topRight= "ㅏ"),
                KeyInfo(bottomLeft= "L", topLeft= "", topRight= "ㅣ"),
                KeyInfo(bottom= ";", top= ":"),
                KeyInfo(bottom= "'", top= "\""),
                KeyInfo(bottomRight= "⏎︎", width = 90),
        ),
        listOf(
                KeyInfo(bottomLeft= "⇧", width = 120),
                KeyInfo(bottomLeft= "Z", topLeft= "", topRight= "ㅋ"),
                KeyInfo(bottomLeft= "X", topLeft= "", topRight= "ㅌ"),
                KeyInfo(bottomLeft= "C", topLeft= "", topRight= "ㅊ"),
                KeyInfo(bottomLeft= "V", topLeft= "", topRight= "ㅍ"),
                KeyInfo(bottomLeft= "B", topLeft= "", topRight= "ㅠ"),
                KeyInfo(bottomLeft= "N", topLeft= "", topRight= "ㅜ"),
                KeyInfo(bottomLeft= "M", topLeft= "", topRight= "ㅡ"),
                KeyInfo(bottom= ",", top = "<"),
                KeyInfo(bottom= ".", top = ">"),
                KeyInfo(bottom= "/", top = "?"),
                KeyInfo(bottomRight= "⇧", width = 120),
        ),
)

@Composable
fun KbKey(keyInfo: KeyInfo) {
    val width = (keyInfo.width ?: 50).dp
    Box(Modifier.padding(5.dp).preferredWidth(width).preferredHeight(50.dp).clip(RoundedCornerShape(10.dp)).background(Color.Black)) {
        if (keyInfo.bottomLeft.isNotEmpty()) Text(modifier = Modifier.align(Alignment.BottomStart).padding(5.dp), fontSize = 16.sp, text = keyInfo.bottomLeft, color = Color.White)
        if (keyInfo.bottomRight.isNotEmpty()) Text(modifier = Modifier.align(Alignment.BottomEnd).padding(5.dp), text = keyInfo.bottomRight, color = Color.White)
        if (keyInfo.topLeft.isNotEmpty()) Text(modifier = Modifier.align(Alignment.TopStart).padding(3.dp), text = keyInfo.topLeft, color = Color.White)
        if (keyInfo.topRight.isNotEmpty()) Text(modifier = Modifier.align(Alignment.TopEnd).padding(3.dp), text = keyInfo.topRight, color = Color.White)
        if (keyInfo.bottom.isNotEmpty()) Text(modifier = Modifier.align(Alignment.BottomCenter).padding(3.dp),  text = keyInfo.bottom, color = Color.White)
        if (keyInfo.top.isNotEmpty()) Text(modifier = Modifier.align(Alignment.TopCenter).padding(3.dp),  text = keyInfo.top, color = Color.White)
    }
}

@Composable
fun MacKeyboard(keyboardType: KeyboardType) {
    Column (Modifier.background(Color.Gray).fillMaxWidth()){
        koreanKeyboard.forEach { columnList ->
            Row (horizontalArrangement = Arrangement.SpaceEvenly){
                columnList.forEach { keyInfo ->
                    KbKey(keyInfo = keyInfo)
                }
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeKeyboardTheme {
        MacKeyboard(KeyboardType.Korean)
    }
}