app/build.gradle.kts

@@ -145,4 +145,8 @@ dependencies {
 
     // Map Compose library
     implementation("ovh.plrapps:mapcompose:2.7.1")
-}
+
+    // Glide
+    implementation ("com.github.bumptech.glide:glide:4.14.2")
+    implementation("com.github.bumptech.glide:compose:1.0.0-alpha.1")
+    }

app/src/main/java/ru/nm17/narodmon/ui/webCamsScreen/WebCamItem.kt

@@ -0,0 +1,74 @@
+package ru.nm17.narodmon.ui.webCamsScreen
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
+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.layout.ContentScale
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import com.bumptech.glide.integration.compose.ExperimentalGlideComposeApi
+import com.bumptech.glide.integration.compose.GlideImage
+import ru.nm17.narodmon.ui.iosevkaFamily
+
+@OptIn(ExperimentalGlideComposeApi::class)
+@Composable
+fun WebCamItem(webCamEntity: WebCamUiEntity) {
+    Box(
+        modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp),
+        contentAlignment = Alignment.BottomStart
+    ) {
+        GlideImage(
+            model = webCamEntity.imageUrl,
+            contentDescription = webCamEntity.name,
+            contentScale = ContentScale.FillHeight,
+            modifier = Modifier
+                .clip(RoundedCornerShape(8.dp))
+                .height(240.dp)
+                .fillMaxWidth()
+        )
+        Row(
+            modifier = Modifier
+                .clip(
+                    RoundedCornerShape(bottomEnd = 8.dp, bottomStart = 8.dp)
+                )
+                .background(Color(0f, 0f, 0f, 0.55f))
+                .padding(start = 16.dp, end = 16.dp, bottom = 12.dp, top = 8.dp),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            Column {
+                Text(
+                    text = webCamEntity.time,
+                    color = Color.White,
+                    fontFamily = iosevkaFamily
+                )
+                Text(
+                    text = webCamEntity.name,
+                    color = Color.White,
+                    maxLines = 1,
+                    fontFamily = iosevkaFamily
+                )
+
+            }
+            Text(
+                text = "${webCamEntity.distance} км",
+                color = Color.White,
+                fontFamily = iosevkaFamily,
+                modifier = Modifier.fillMaxWidth(),
+                textAlign = TextAlign.End
+            )
+        }
+    }
+}

app/src/main/java/ru/nm17/narodmon/ui/webCamsScreen/WebCamUiEntity.kt

@@ -0,0 +1,13 @@
+package ru.nm17.narodmon.ui.webCamsScreen
+
+import android.graphics.Bitmap
+import androidx.compose.ui.graphics.ImageBitmap
+
+data class WebCamUiEntity(
+    val id: Int,
+    val name: String,
+    val distance: Int,
+    val location: String,
+    val time: String,
+    val imageUrl: String
+)

app/src/main/java/ru/nm17/narodmon/ui/webCamsScreen/WebCamsScreen.kt

@@ -0,0 +1,63 @@
+package ru.nm17.narodmon.ui.webCamsScreen
+
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.viewinterop.AndroidView
+import ru.nm17.narodmon.ui.theme.NarodMonTheme
+
+@Composable
+fun WebCamsScreen() {
+
+    var webCams by remember {
+        mutableStateOf(
+            listOf(
+                WebCamUiEntity(
+                    1,
+                    "Крутая камера",
+                    1,
+                    "Улица Пушкина, дом Калатушкина, кватира под номером 5",
+                    "12:45",
+                    "https://images-webcams.windy.com/51/1559159251/current/preview/1559159251.jpg?1686320054"
+                ),
+                WebCamUiEntity(
+                    2,
+                    "Крутая камера 2",
+                    2,
+                    "Улица Пушкина, дом Калатушкина, кватира под номером 5",
+                    "12:45",
+                    "https://images-webcams.windy.com/51/1559159251/current/preview/1559159251.jpg?1686320054"
+                ),
+                WebCamUiEntity(
+                    3,
+                    "Крутая камера 3",
+                    3,
+                    "Улица Пушкина, дом Калатушкина, кватира под номером 5",
+                    "12:45",
+                    "https://images-webcams.windy.com/51/1559159251/current/preview/1559159251.jpg?1686320054"
+                )
+            )
+        )
+    } // TODO источник камер
+
+    LazyColumn() {
+        items(webCams) {
+            WebCamItem(webCamEntity = it)
+        }
+    }
+}
+
+@Preview
+@Composable
+fun PreviewWebCams() {
+    NarodMonTheme {
+        WebCamsScreen()
+    }
+}