Procházet zdrojové kódy

App: вёрстка страниц 'о компании' и 'о облаке'

Blueris před 6 dny
rodič
revize
059fed81d7

+ 40 - 0
OscellaMobile/app/src/main/java/com/example/oscellamobile/Link.kt

@@ -0,0 +1,40 @@
+package com.example.oscellamobile
+
+import androidx.compose.foundation.text.ClickableText
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalUriHandler
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextDecoration
+import androidx.compose.ui.unit.sp
+import androidx.lifecycle.ViewModel
+import com.example.oscellamobile.screens.ibmplexmono
+
+class Link() : ViewModel() {
+    @Composable
+    fun LinkText(gameLink: String) {
+        val uriHandler = LocalUriHandler.current
+
+        val annotatedString = buildAnnotatedString {
+            pushStyle(SpanStyle(color = Color.Black, textDecoration = TextDecoration.None))
+            append(gameLink)
+            pop()
+        }
+
+        ClickableText(
+            text = annotatedString,
+            onClick = { offset ->
+                uriHandler.openUri(gameLink)
+            },
+            style = TextStyle(
+                fontFamily = ibmplexmono,
+                fontSize = 15.sp,
+                color = Color.Black,
+                textAlign = TextAlign.Left
+            )
+        )
+    }
+}

+ 2 - 0
OscellaMobile/app/src/main/java/com/example/oscellamobile/models/Сloud_gaming.kt

@@ -9,4 +9,6 @@ var cloud_name: String,
 var link: String,
 var picture: String,
 var description: String,
+var desc: String?,
+var Features: String?
 )

+ 242 - 12
OscellaMobile/app/src/main/java/com/example/oscellamobile/screens/AboutCloud.kt

@@ -21,6 +21,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Button
@@ -40,6 +41,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.geometry.CornerRadius
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
@@ -48,6 +50,7 @@ import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.ui.graphics.Shadow
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.graphics.drawscope.DrawScope
+import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.font.Font
@@ -55,6 +58,7 @@ import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import androidx.navigation.NavHost
 import androidx.navigation.NavHostController
 import coil.compose.rememberAsyncImagePainter
 import com.example.oscellamobile.domain.utlis.Constant
@@ -72,21 +76,28 @@ import coil.compose.AsyncImagePainter
 import coil.compose.rememberAsyncImagePainter
 import coil.request.ImageRequest
 import coil.size.Size
+import com.example.oscellamobile.Link
 import com.example.oscellamobile.models.Age_rating
 import com.example.oscellamobile.models.Basic_labels
+import com.example.oscellamobile.models.Game_Cloud
 import com.example.oscellamobile.models.Genre
 import com.example.oscellamobile.models.Label
 import com.example.oscellamobile.models.Сloud_gaming
+import io.github.jan.supabase.realtime.Column
 import org.intellij.lang.annotations.JdkConstants
+import java.time.Month
 
 @Composable
-fun AboutCloud(navController: NavHostController, id: Int) {
+fun AboutCloud(navHost: NavHostController, id: Int) {
     var clouds by remember { mutableStateOf<List<Сloud_gaming>>(listOf()) }
-
+    var game by remember { mutableStateOf<List<Game>>(listOf()) }
+    var gamecloud by remember { mutableStateOf<List<Game_Cloud>>(listOf()) }
     LaunchedEffect(Unit) {
         withContext(Dispatchers.IO) {
             try {
                 clouds = Constant.supabase.from("Сloud_gaming").select().decodeList<Сloud_gaming>()
+                game = Constant.supabase.from("Game").select().decodeList<Game>()
+                gamecloud = Constant.supabase.from("Game_Cloud").select().decodeList<Game_Cloud>()
                 clouds.forEach { Cloud ->
                     Log.d("C", Cloud.cloud_name)
                 }
@@ -98,20 +109,239 @@ fun AboutCloud(navController: NavHostController, id: Int) {
 
     val filteredCloud = clouds.filter { it.id == id}
 
-    LazyColumn {
-        items(
-            filteredCloud,
-            key = { cloud -> cloud.id }
-        ) { cloud ->
-            CloudItem(cloud)
+    Canvas(
+        modifier = Modifier
+            .fillMaxWidth()
+            .fillMaxHeight()
+    ) {
+        val gradient = Brush.linearGradient(
+            colors = listOf(
+                Color(0xFFFF9F1C),
+                Color(0xFFE71D36)
+            ),
+            start = Offset(size.width, 1200f),
+            end = Offset(150f, size.height)
+        )
+
+        drawRect(brush = gradient)
+    }
+
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .fillMaxHeight()
+    ) {
+        Spacer(modifier = Modifier.height(10.dp))
+        Row {
+            Spacer(modifier = Modifier.width(13.dp))
+            Text(text = "Osccela", fontSize = 40.sp, fontFamily = kdamFontFamily)
+            Spacer(modifier = Modifier.width(145.dp))
+            Image(
+                painter = painterResource(id = R.drawable.personall),
+                contentDescription = "Описание изображения",
+                modifier = Modifier.size(90.dp)
+            )
+        }
+        LazyColumn {
+            items(
+                filteredCloud,
+                key = { cloud -> cloud.id }
+            ) { cloud ->
+                CloudItem(cloud, game, gamecloud, navHost)
+            }
         }
     }
 }
 
 @Composable
-fun CloudItem(cloud: Сloud_gaming)
-{
-    Text(
-        cloud.cloud_name
+fun CloudItem(
+    cloud: Сloud_gaming,
+    game: List<Game>,
+    gamecloud: List<Game_Cloud>,
+    navHost: NavHostController
+) {
+    val viewModel = Link()
+    val imageState = rememberAsyncImagePainter(
+        model = ImageRequest.Builder(LocalContext.current).data(cloud.picture)
+            .size(Size.ORIGINAL).build()
+    ).state
+
+    Card(
+        Modifier.width(400.dp)
+            .padding(10.dp, 10.dp, 10.dp, 10.dp)
+            .background(color = Color(0xFFFDFFFC), shape = RoundedCornerShape(20.dp)),
     )
+    {
+        Column(
+            modifier = Modifier.fillMaxWidth()
+        ) {
+            Column(
+                modifier = Modifier.fillMaxWidth(),
+                horizontalAlignment = Alignment.CenterHorizontally
+            ) {
+                Text(
+                    cloud.cloud_name,
+                    textAlign = TextAlign.Center,
+                    fontFamily = kdamFontFamily,
+                    fontSize = 30.sp,
+                    color = Color(0xFF7F807E)
+                )
+                Spacer(modifier = Modifier.height(10.dp))
+                if (imageState is AsyncImagePainter.State.Success) {
+                    Image(
+                        painter = imageState.painter,
+                        contentDescription = "Описание изображения",
+                        modifier = Modifier
+                            .width(300.dp)
+                            .clip(RoundedCornerShape(20.dp))
+                    )
+                }
+                Spacer(modifier = Modifier.height(10.dp))
+                Column(
+                    modifier = Modifier.padding(5.dp, 0.dp, 0.dp, 5.dp)
+                ) {
+                    Text(
+                        text = "Ссылка:",
+                        textAlign = TextAlign.Left,
+                        fontFamily = ibmplexmono,
+                        fontSize = 20.sp,
+                        color = Color.Black,
+                    )
+                    Spacer(modifier = Modifier.height(5.dp))
+                    viewModel.LinkText(cloud.link)
+                }
+
+                Spacer(modifier = Modifier.height(10.dp))
+                if (cloud.desc != null) {
+                    Column(
+                        modifier = Modifier.padding(5.dp, 0.dp, 0.dp, 5.dp)
+                    ) {
+                        Text(
+                            text = "Описание облачного гейминга:",
+                            textAlign = TextAlign.Left,
+                            fontFamily = ibmplexmono,
+                            fontSize = 20.sp,
+                            color = Color.Black,
+                        )
+                        Spacer(modifier = Modifier.height(5.dp))
+                        Text(
+                            cloud.desc!!,
+                            textAlign = TextAlign.Center,
+                            fontFamily = ibmplexmono,
+                            fontSize = 12.sp,
+                            color = Color.Black
+                        )
+                    }
+                }
+                Spacer(modifier = Modifier.height(10.dp))
+                if (cloud.Features != null) {
+                    Column(
+                        modifier = Modifier.padding(5.dp, 0.dp, 0.dp, 5.dp)
+                    ) {
+                        Text(
+                            text = "Особенности:",
+                            textAlign = TextAlign.Left,
+                            fontFamily = ibmplexmono,
+                            fontSize = 20.sp,
+                            color = Color.Black,
+                        )
+                        Spacer(modifier = Modifier.height(5.dp))
+                        Text(
+                            cloud.Features!!,
+                            textAlign = TextAlign.Center,
+                            fontFamily = ibmplexmono,
+                            fontSize = 12.sp,
+                            color = Color.Black
+                        )
+                    }
+                }
+                val CloudId = cloud.id
+                val gameincloud = gamecloud.filter { it.cloud == CloudId }
+                var gamee = gameincloud.map { it.game }
+                val games = gamee.mapNotNull { id ->
+                    game.find { it.id == id }
+                }
+                if (!games.isEmpty()) {
+                    Text(
+                        text = "Игры:",
+                        textAlign = TextAlign.Left,
+                        fontFamily = ibmplexmono,
+                        fontSize = 20.sp,
+                        color = Color.Black,
+                    )
+                    Row(
+                        horizontalArrangement = Arrangement.Center,
+                        verticalAlignment = Alignment.CenterVertically
+                    ) {
+
+                        LazyRow(
+                            modifier = Modifier.background(Color.Transparent)
+                        ) {
+                            items(games) { games ->
+                                Card(
+
+                                    modifier = Modifier.background(
+                                        color = Color.White,
+                                        shape = RoundedCornerShape(20.dp)
+                                    )
+                                        .padding(30.dp, 30.dp, 30.dp, 30.dp),
+
+                                    ) {
+                                    Column(
+                                        verticalArrangement = Arrangement.Center,
+                                        modifier = Modifier.background(Color.Transparent)
+                                    ) {
+                                        val imageState1 = rememberAsyncImagePainter(
+                                            model = ImageRequest.Builder(LocalContext.current)
+                                                .data(games.picture)
+                                                .size(Size.ORIGINAL).build()
+                                        ).state
+                                        Spacer(modifier = Modifier.height(5.dp))
+                                        Text(
+                                            games.name_game,
+                                            fontSize = 20.sp,
+                                            fontFamily = kdamFontFamily,
+                                            color = Color(0xFF7F807E),
+                                            modifier = Modifier.background(Color.Transparent),
+                                            textAlign = TextAlign.Center
+                                        )
+                                        if (imageState1 is AsyncImagePainter.State.Success) {
+                                            Image(
+                                                painter = imageState1.painter,
+                                                contentDescription = "Описание изображения",
+                                                modifier = Modifier
+                                                    .width(300.dp)
+                                                    .clip(RoundedCornerShape(20.dp))
+                                                    .background(Color.Transparent)
+                                            )
+                                        }
+                                        Spacer(modifier = Modifier.height(7.dp))
+                                        Button(
+                                            onClick = { navHost.navigate("AboutGame/${games.id}") },
+                                            modifier = Modifier
+                                                .background(
+                                                    color = Color(0xFFE71D36),
+                                                    shape = RoundedCornerShape(20.dp)
+                                                ),
+                                            colors = ButtonDefaults.buttonColors(
+                                                containerColor = Color.Transparent
+                                            )
+                                        ) {
+                                            Text(
+                                                text = "Подробности",
+                                                textAlign = TextAlign.Center,
+                                                fontFamily = playfairdisplay,
+                                                fontSize = 16.sp,
+                                                color = Color(0xFFFDFFFC)
+                                            )
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
 }

+ 190 - 11
OscellaMobile/app/src/main/java/com/example/oscellamobile/screens/AboutCompany.kt

@@ -21,6 +21,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Button
@@ -72,6 +73,7 @@ import coil.compose.AsyncImagePainter
 import coil.compose.rememberAsyncImagePainter
 import coil.request.ImageRequest
 import coil.size.Size
+import com.example.oscellamobile.Link
 import com.example.oscellamobile.models.Age_rating
 import com.example.oscellamobile.models.Basic_labels
 import com.example.oscellamobile.models.Genre
@@ -79,13 +81,15 @@ import com.example.oscellamobile.models.Label
 import org.intellij.lang.annotations.JdkConstants
 
 @Composable
-fun AboutCompany(navController: NavHostController, id: Int) {
+fun AboutCompany(navHost: NavHostController, id: Int) {
     var company by remember { mutableStateOf<List<Company>>(listOf()) }
+    var games by remember { mutableStateOf<List<Game>>(listOf()) }
 
     LaunchedEffect(Unit) {
         withContext(Dispatchers.IO) {
             try {
                 company = Constant.supabase.from("Company").select().decodeList<Company>()
+                games = Constant.supabase.from("Game").select().decodeList<Game>()
                 company.forEach { Company ->
                     Log.d("C", Company.name_company)
                 }
@@ -97,20 +101,195 @@ fun AboutCompany(navController: NavHostController, id: Int) {
 
     val filteredCompany = company.filter { it.id == id}
 
-    LazyColumn {
-        items(
-            filteredCompany,
-            key = { company -> company.id }
-        ) { company ->
-            CompanyItem(company)
+
+    Canvas(
+        modifier = Modifier
+            .fillMaxWidth()
+            .fillMaxHeight()
+    ) {
+        val gradient = Brush.linearGradient(
+            colors = listOf(
+                Color(0xFFFF9F1C),
+                Color(0xFFE71D36)
+            ),
+            start = Offset(size.width, 1200f),
+            end = Offset(150f, size.height)
+        )
+
+        drawRect(brush = gradient)
+    }
+
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .fillMaxHeight()
+    ) {
+        Spacer(modifier = Modifier.height(10.dp))
+        Row {
+            Spacer(modifier = Modifier.width(13.dp))
+            Text(text = "Osccela", fontSize = 40.sp, fontFamily = kdamFontFamily)
+            Spacer(modifier = Modifier.width(145.dp))
+            Image(
+                painter = painterResource(id = R.drawable.personall),
+                contentDescription = "Описание изображения",
+                modifier = Modifier.size(90.dp)
+            )
+        }
+        LazyColumn {
+            items(
+                filteredCompany,
+                key = { company -> company.id }
+            ) { company ->
+                CompanyItem(company, navHost, games)
+            }
         }
     }
 }
 
 @Composable
-fun CompanyItem(Company: Company)
-{
-    Text(
-        Company.name_company
+fun CompanyItem(
+    company: Company,
+    navHost: NavHostController,
+    games: List<Game>
+) {
+    val imageState = rememberAsyncImagePainter(
+        model = ImageRequest.Builder(LocalContext.current).data(company.picture)
+            .size(Size.ORIGINAL).build()
+    ).state
+
+    Card(
+        Modifier.width(400.dp)
+            .padding(10.dp, 10.dp, 10.dp, 10.dp)
+            .background(color = Color(0xFFFDFFFC), shape = RoundedCornerShape(20.dp)),
     )
+    {
+        Column(
+            modifier = Modifier.fillMaxWidth()
+        ) {
+            Column(
+                modifier = Modifier.fillMaxWidth(),
+                horizontalAlignment = Alignment.CenterHorizontally
+            ) {
+                Text(
+                    company.name_company,
+                    textAlign = TextAlign.Center,
+                    fontFamily = kdamFontFamily,
+                    fontSize = 30.sp,
+                    color = Color(0xFF7F807E)
+                )
+                Spacer(modifier = Modifier.height(10.dp))
+                if (imageState is AsyncImagePainter.State.Success) {
+                    Image(
+                        painter = imageState.painter,
+                        contentDescription = "Описание изображения",
+                        modifier = Modifier
+                            .width(300.dp)
+                            .clip(RoundedCornerShape(20.dp))
+                    )
+                }
+                Spacer(modifier = Modifier.height(10.dp))
+                if (company.description != null) {
+                    Column(
+                        modifier = Modifier.padding(5.dp, 0.dp, 0.dp, 5.dp)
+                    ) {
+                        Text(
+                            text = "Описание компании:",
+                            textAlign = TextAlign.Left,
+                            fontFamily = ibmplexmono,
+                            fontSize = 20.sp,
+                            color = Color.Black,
+                        )
+                        Spacer(modifier = Modifier.height(5.dp))
+                        Text(
+                            company.description!!,
+                            textAlign = TextAlign.Center,
+                            fontFamily = ibmplexmono,
+                            fontSize = 12.sp,
+                            color = Color.Black
+                        )
+                    }
+                }
+                val CompanyID = company.id
+                val gamecompany = games.filter { it.company == CompanyID }
+                if (!gamecompany.isEmpty()) {
+                    Text(
+                        text = "Игры:",
+                        textAlign = TextAlign.Left,
+                        fontFamily = ibmplexmono,
+                        fontSize = 20.sp,
+                        color = Color.Black,
+                    )
+                    Row(
+                        horizontalArrangement = Arrangement.Center,
+                        verticalAlignment = Alignment.CenterVertically
+                    ) {
+                        LazyRow(
+                            modifier = Modifier.background(Color.Transparent)
+                        ) {
+                            items(gamecompany) { games ->
+                                Card(
+                                    modifier = Modifier.background(
+                                        color = Color.White,
+                                        shape = RoundedCornerShape(20.dp)
+                                    )
+                                        .padding(30.dp, 30.dp, 30.dp, 30.dp),
+
+                                    ) {
+                                    Column(
+                                        verticalArrangement = Arrangement.Center,
+                                        modifier = Modifier.background(Color.Transparent)
+                                    ) {
+                                        val imageState1 = rememberAsyncImagePainter(
+                                            model = ImageRequest.Builder(LocalContext.current)
+                                                .data(games.picture)
+                                                .size(Size.ORIGINAL).build()
+                                        ).state
+                                        Spacer(modifier = Modifier.height(5.dp))
+                                        Text(
+                                            games.name_game,
+                                            fontSize = 20.sp,
+                                            fontFamily = kdamFontFamily,
+                                            color = Color(0xFF7F807E),
+                                            modifier = Modifier.background(Color.Transparent),
+                                            textAlign = TextAlign.Center
+                                        )
+                                        if (imageState1 is AsyncImagePainter.State.Success) {
+                                            Image(
+                                                painter = imageState1.painter,
+                                                contentDescription = "Описание изображения",
+                                                modifier = Modifier
+                                                    .width(300.dp)
+                                                    .clip(RoundedCornerShape(20.dp))
+                                                    .background(Color.Transparent)
+                                            )
+                                        }
+                                        Spacer(modifier = Modifier.height(7.dp))
+                                        Button(
+                                            onClick = { navHost.navigate("AboutGame/${games.id}") },
+                                            modifier = Modifier
+                                                .background(
+                                                    color = Color(0xFFE71D36),
+                                                    shape = RoundedCornerShape(20.dp)
+                                                ),
+                                            colors = ButtonDefaults.buttonColors(
+                                                containerColor = Color.Transparent
+                                            )
+                                        ) {
+                                            Text(
+                                                text = "Подробности",
+                                                textAlign = TextAlign.Center,
+                                                fontFamily = playfairdisplay,
+                                                fontSize = 16.sp,
+                                                color = Color(0xFFFDFFFC)
+                                            )
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
 }

+ 5 - 26
OscellaMobile/app/src/main/java/com/example/oscellamobile/screens/AboutGame.kt

@@ -60,6 +60,7 @@ import coil.compose.AsyncImagePainter
 import coil.compose.rememberImagePainter
 import coil.request.ImageRequest
 import coil.size.Size
+import com.example.oscellamobile.Link
 import com.example.oscellamobile.models.Game_Cloud
 import com.example.oscellamobile.models.Minimum_system_requirements
 import com.example.oscellamobile.models.Recommended_system_requirements
@@ -165,6 +166,7 @@ fun GameItem(
     cloud: List<Сloud_gaming>,
     screen: List<Screnshot>
 ) {
+    val viewModel = Link()
     val imageState = rememberAsyncImagePainter(
         model = ImageRequest.Builder(LocalContext.current).data(game.picture)
             .size(Size.ORIGINAL).build()
@@ -330,7 +332,7 @@ fun GameItem(
                     color = Color.Black,
                     textAlign = TextAlign.Left
                 )
-                LinkText(game.link_oficial)
+                viewModel.LinkText(game.link_oficial)
                 if(game.link_torrent != null)
                 {
                     Text(
@@ -340,7 +342,7 @@ fun GameItem(
                         color = Color.Black,
                         textAlign = TextAlign.Left
                     )
-                    LinkText(game.link_torrent)
+                    viewModel.LinkText(game.link_torrent)
                 }
             }
             Column(
@@ -356,7 +358,7 @@ fun GameItem(
                 )
                 for(cloud in clouds)
                 {
-                    LinkText(cloud.link)
+                    viewModel.LinkText(cloud.link)
                 }
             }
             Column(
@@ -491,26 +493,3 @@ fun VideoPlayer(videoId: String) {
     )
 }
 
-@Composable
-fun LinkText(gameLink: String) {
-    val uriHandler = LocalUriHandler.current
-
-    val annotatedString = buildAnnotatedString {
-        pushStyle(androidx.compose.ui.text.SpanStyle(color = Color.Black, textDecoration = TextDecoration.None))
-        append(gameLink)
-        pop()
-    }
-
-    ClickableText(
-        text = annotatedString,
-        onClick = { offset ->
-            uriHandler.openUri(gameLink)
-        },
-        style = androidx.compose.ui.text.TextStyle(
-            fontFamily = ibmplexmono,
-            fontSize = 15.sp,
-            color = Color.Black,
-            textAlign = TextAlign.Left
-        )
-    )
-}

+ 3 - 2
OscellaMobile/app/src/main/java/com/example/oscellamobile/screens/MainWindow.kt

@@ -416,11 +416,13 @@ fun MainWindow(navHost: NavHostController) {
                     }
                     val size = 31.dp
 
-                    var isOrange by remember { mutableStateOf(false) }
+
                     val userId = Constant.supabase.auth.currentUserOrNull()?.id
                     val favv = game.favourites
                     val userIdString = userId.toString()
                     val userr = user.find { it.user == userIdString }
+
+                    var isOrange by remember { mutableStateOf(false) }
                     LaunchedEffect(Unit) {
                         if (userr != null) {
                             val result = fav.find { it.id_game == game.id && it.id_user == userr.id }
@@ -438,7 +440,6 @@ fun MainWindow(navHost: NavHostController) {
                     }
                     val buttonColor = if (isOrange) Color(0xFFFF9F1C) else Color.Gray
 
-
                     Canvas(
                         modifier = Modifier
                             .size(30.dp)