Highlights Screen UI

app/src/main/java/com/cornellappdev/score/components/EmptyState.kt

@@ -1,16 +1,19 @@
 package com.cornellappdev.score.components
 
+import androidx.annotation.DrawableRes
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
@@ -21,58 +24,46 @@ import com.cornellappdev.score.theme.GrayPrimary
 import com.cornellappdev.score.theme.Style.bodyNormal
 import com.cornellappdev.score.theme.Style.heading2
 
-@Composable
-fun EmptyState(
-    modifier: Modifier = Modifier,
-    title: String = "No games yet.",
-    subtitle: String = "Check back here later!"
-) {
-    Column(
-        modifier = modifier,
-        horizontalAlignment = Alignment.CenterHorizontally,
-        verticalArrangement = Arrangement.Center
-    ) {
-        Image(
-            painter = painterResource(R.drawable.ic_speaker_gray),
-            contentDescription = "score speaker icon"
-        )
-        Spacer(modifier = Modifier.height(16.dp))
-        Text(
-            text = title,
-            style = heading2.copy(color = GrayPrimary)
-        )
-        Spacer(modifier = Modifier.height(8.dp))
-        Text(
-            text = subtitle,
-            style = bodyNormal.copy(color = GrayMedium)
-        )
-    }
-}
-
 @Composable
 fun EmptyStateBox(
+    @DrawableRes icon: Int,
+    title: String,
     modifier: Modifier = Modifier,
-    height: Dp = 550.dp,
-    title: String = "No games yet.",
-    subtitle: String = "Check back here later!"
+    subtitle: String = "Check back here later!",
+    height: Dp = 550.dp //(appx height when full-screen error)
 ) {
     Box(
         modifier = modifier
             .height(height)
             .fillMaxWidth(), contentAlignment = Alignment.Center
     ) {
-        EmptyState(title = title, subtitle = subtitle)
+        Column(
+            modifier = Modifier,
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.Center
+        ) {
+            Icon(
+                painter = painterResource(icon),
+                contentDescription = "empty state icon",
+                tint = Color.Unspecified
+            )
+            Spacer(modifier = Modifier.height(16.dp))
+            Text(
+                text = title,
+                style = heading2.copy(color = GrayPrimary)
+            )
+            Spacer(modifier = Modifier.height(8.dp))
+            Text(
+                text = subtitle,
+                style = bodyNormal.copy(color = GrayMedium)
+            )
+        }
     }
 }
 
-@Preview
-@Composable
-private fun EmptyStatePreview() = ScorePreview {
-    EmptyState()
-}
 
 @Preview
 @Composable
 private fun EmptyStateBoxPreview() = ScorePreview {
-    EmptyStateBox()
-}
+    EmptyStateBox(R.drawable.ic_speaker_gray, "No games yet.")
+}

app/src/main/java/com/cornellappdev/score/components/SportSelectorHeader.kt

@@ -78,7 +78,10 @@ fun SportSelectorHeader(
             }
         }
         Spacer(Modifier.height(24.dp))
-        LazyRow(Modifier.fillMaxWidth()) {
+        LazyRow(
+            Modifier.fillMaxWidth(),
+            horizontalArrangement = Arrangement.spacedBy(20.dp)
+        ) {
             items(sports) { selection ->
                 when (selection) {
                     SportSelection.All -> {
@@ -108,11 +111,7 @@ fun SportSelectorHeader(
                         }
                     }
                 }
-
-
-                Spacer(modifier = Modifier.width(20.dp))
             }
-            item { Spacer(modifier = Modifier.width(4.dp)) }
         }
     }
 }

app/src/main/java/com/cornellappdev/score/components/highlights/ArticleHighlightsCard.kt

@@ -0,0 +1,133 @@
+package com.cornellappdev.score.components.highlights
+
+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.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.BasicText
+import androidx.compose.material3.Icon
+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.res.painterResource
+import androidx.compose.ui.text.LinkAnnotation
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.TextLinkStyles
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.style.TextDecoration
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.text.withLink
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import coil3.compose.AsyncImage
+import com.cornellappdev.score.R
+import com.cornellappdev.score.model.ArticleHighlightData
+import com.cornellappdev.score.model.Sport
+import com.cornellappdev.score.theme.Style.bodySemibold
+import com.cornellappdev.score.theme.Style.heading2
+import com.cornellappdev.score.theme.Style.labelsNormal
+import com.cornellappdev.score.theme.White
+
+@Composable
+fun ArticleHighlightCard(
+    articleHighlight: ArticleHighlightData,
+    isWideFormat: Boolean
+) {
+    Box(
+        modifier = Modifier
+            .then(if (isWideFormat) Modifier.fillMaxWidth() else Modifier.width(241.dp))
+            .height(192.dp)
+            .clip(shape = RoundedCornerShape(12.dp))
+    ) {
+        //todo: empty state if image doesn't load
+        AsyncImage(
+            model = articleHighlight.imageUrl,
+            contentDescription = "highlight image",
+            contentScale = ContentScale.Crop
+        )
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+                .background(color = Color.Black.copy(alpha = 0.4f))
+        )
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(12.dp),
+            verticalArrangement = Arrangement.SpaceBetween
+        ) {
+            Text(
+                style = heading2,
+                color = Color.White,
+                text = articleHighlight.title,
+                maxLines = 4,
+                overflow = TextOverflow.Ellipsis
+            )
+
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+                horizontalArrangement = Arrangement.SpaceBetween,
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Row(
+                    verticalAlignment = Alignment.CenterVertically
+                ) {
+                    if (isWideFormat) {
+                        Text("Read at ", color = White)
+                    }
+                    ExternalLink(
+                        articleHighlight.articleUrl,
+                        urlLabel = "Cornell Daily Sun",
+                        linkColor = White
+                    )
+                }
+                Text(
+                    color = Color.White,
+                    style = labelsNormal,
+                    text = articleHighlight.date
+                )
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun ArticleHighlightCardPreview() {
+    ArticleHighlightCard(
+        ArticleHighlightData(
+            "Late Goal Lifts No. 6 Men’s Hockey Over Brown",
+            "maxresdefault.jpg",
+            "https://cornellsun.com/article/london-mcdavid-is-making-a-name-for-herself-at-cornell",
+            "11/9",
+            Sport.ICE_HOCKEY
+        ),
+        false
+    )
+}
+
+@Preview
+@Composable
+private fun WideArticleHighlightCardPreview() {
+    ArticleHighlightCard(
+        ArticleHighlightData(
+            "Late Goal Lifts No. 6 Men’s Hockey Over Brown",
+            "maxresdefault.jpg",
+            "https://cornellsun.com/article/london-mcdavid-is-making-a-name-for-herself-at-cornell",
+            "11/9",
+            Sport.ICE_HOCKEY
+        ),
+        true
+    )
+}

app/src/main/java/com/cornellappdev/score/components/highlights/ExternalLink.kt

@@ -0,0 +1,55 @@
+package com.cornellappdev.score.components.highlights
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.text.BasicText
+import androidx.compose.material3.Icon
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.LinkAnnotation
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.TextLinkStyles
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextDecoration
+import androidx.compose.ui.text.withLink
+import com.cornellappdev.score.R
+
+@Composable
+fun ExternalLink(
+    url: String,
+    urlLabel: String,
+    linkColor: Color,
+) {
+    Row(
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        BasicText(
+            text = buildAnnotatedString {
+                withLink(
+                    LinkAnnotation.Url(
+                        url,
+                        TextLinkStyles(
+                            style = SpanStyle(
+                                textDecoration = TextDecoration.Underline,
+                                color = linkColor,
+                                fontWeight = FontWeight.Bold
+                            )
+                        ),
+                    )
+                ) {
+                    append(urlLabel)
+                }
+            }
+        )
+        Icon(
+            painter = painterResource(R.drawable.arrow_outward),
+            contentDescription = "external link arrow",
+            tint = linkColor
+        )
+    }
+}