ProductDetailsScreen

OK

app/src/main/java/com/juceliodev/fooddeliverymyapplication/data/OrderData.kt

@@ -0,0 +1,11 @@
+package com.juceliodev.fooddeliverymyapplication.data
+
+data class OrderState(
+    val amount: Int,
+    val totalPrice: String
+)
+
+val OrderData = OrderState(
+    amount = 5,
+    totalPrice = "$27.45"
+)

app/src/main/java/com/juceliodev/fooddeliverymyapplication/data/ProductNutritionData.kt

@@ -0,0 +1,44 @@
+package com.juceliodev.fooddeliverymyapplication.data
+
+data class ProductNutritionState(
+    val calories: Calories,
+    val nutrition: List<NutritionState>
+)
+
+data class Calories(
+    val value: String,
+    val unit: String
+)
+
+data class NutritionState(
+    val amount: String,
+    val unit: String,
+    val title: String
+)
+
+val ProductNutritionData = ProductNutritionState(
+    calories = Calories(
+        value = "650",
+        unit = "Cal"
+    ),
+    nutrition = listOf(
+        NutritionState(
+            amount = "35",
+            unit = "g",
+            title = "Total Fat (45% DV)"
+        ),
+        NutritionState(
+            amount = "43",
+            unit = "g",
+            title = "Total Carbs (16% DV)"
+        ),
+        NutritionState(
+            amount = "36",
+            unit = "g",
+            title = "Protein"
+        )
+    )
+)
+
+
+

app/src/main/java/com/juceliodev/fooddeliverymyapplication/data/ProductPreviewData.kt

@@ -0,0 +1,28 @@
+package com.juceliodev.fooddeliverymyapplication.data
+
+import androidx.annotation.DrawableRes
+import com.juceliodev.fooddeliverymyapplication.R
+
+data class ProductHighlightState(
+    val text: String,
+    val type: ProductHighlightType
+)
+
+enum class ProductHighlightType {
+    PRIMARY, SECONDARY
+}
+
+data class ProductPreviewState(
+    val headline: String = "Mr. Cheezy",
+    @DrawableRes val productImg: Int = R.drawable.img_burger,
+    val highlights: List<ProductHighlightState> = listOf(
+        ProductHighlightState(
+            text = "Classic Taste",
+            type = ProductHighlightType.SECONDARY
+        ),
+        ProductHighlightState(
+            text = "Bestseller",
+            type = ProductHighlightType.PRIMARY
+        )
+    )
+)

app/src/main/java/com/juceliodev/fooddeliverymyapplication/ui/screen/components/ProductHighlights.kt

@@ -0,0 +1,92 @@
+package com.juceliodev.fooddeliverymyapplication.ui.screen.components
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Immutable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import com.juceliodev.fooddeliverymyapplication.data.ProductHighlightState
+import com.juceliodev.fooddeliverymyapplication.data.ProductHighlightType
+import com.juceliodev.fooddeliverymyapplication.ui.theme.AppTheme
+
+
+@Composable
+fun ProductHighlights(
+    modifier: Modifier = Modifier,
+    highlights: List<ProductHighlightState>
+) {
+    Column(
+        modifier = modifier,
+        horizontalAlignment = Alignment.Start,
+        verticalArrangement = Arrangement.spacedBy(4.dp)
+    ) {
+        highlights.onEach { item ->
+            Highlight(
+                text = item.text,
+                colors = HighlightDefaults.colors(item.type)
+            )
+        }
+    }
+}
+
+@Composable
+private fun Highlight(
+    modifier: Modifier = Modifier,
+    text: String,
+    colors: HighlightColors = HighlightDefaults.defaultColors
+) {
+    Surface(
+        modifier = modifier,
+        shape = RoundedCornerShape(percent = 50),
+        color = colors.containerColor,
+        contentColor = colors.contentColor
+    ) {
+        Box(
+            modifier = Modifier.padding(
+                vertical = 10.dp,
+                horizontal = 12.dp
+            )
+        ) {
+            Text(
+                text = text,
+                style = AppTheme.typography.titleSmall.copy(fontWeight = FontWeight.Bold)
+            )
+        }
+    }
+}
+
+private object HighlightDefaults {
+
+    val defaultColors = HighlightColors(
+        containerColor = Color.Unspecified,
+        contentColor = Color.Unspecified
+    )
+
+    @Composable
+    fun colors(type: ProductHighlightType): HighlightColors = when (type) {
+        ProductHighlightType.SECONDARY -> HighlightColors(
+            containerColor = AppTheme.colors.actionSurface,
+            contentColor = AppTheme.colors.onActionSurface
+        )
+
+        ProductHighlightType.PRIMARY -> HighlightColors(
+            containerColor = AppTheme.colors.highlightSurface,
+            contentColor = AppTheme.colors.onHighlightSurface
+        )
+    }
+}
+
+@Immutable
+private data class HighlightColors(
+    val containerColor: Color,
+    val contentColor: Color
+)

app/src/main/java/com/juceliodev/fooddeliverymyapplication/ui/screen/components/ProductNutritionSection.kt

@@ -0,0 +1,108 @@
+package com.juceliodev.fooddeliverymyapplication.ui.screen.components
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import com.juceliodev.fooddeliverymyapplication.data.Calories
+import com.juceliodev.fooddeliverymyapplication.data.NutritionState
+import com.juceliodev.fooddeliverymyapplication.data.ProductNutritionState
+import com.juceliodev.fooddeliverymyapplication.ui.theme.AppTheme
+
+
+@Composable
+fun ProductNutritionSection(
+    modifier: Modifier = Modifier,
+    state: ProductNutritionState
+) {
+    Column(
+        modifier = modifier.fillMaxWidth(),
+        verticalArrangement = Arrangement.spacedBy(16.dp)
+    ) {
+        SectionHeader(
+            title = "Nutrition facts",
+            calories = state.calories
+        )
+        Row(
+            horizontalArrangement = Arrangement.SpaceBetween,
+            modifier = Modifier.fillMaxWidth()
+        ) {
+            state.nutrition.onEach { item -> NutritionItem(state = item) }
+        }
+    }
+}
+
+@Composable
+private fun SectionHeader(
+    modifier: Modifier = Modifier,
+    title: String,
+    calories: Calories
+) {
+    Row(
+        modifier = modifier.fillMaxWidth(),
+        horizontalArrangement = Arrangement.SpaceBetween,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Text(
+            text = title,
+            style = AppTheme.typography.titleLarge,
+            color = AppTheme.colors.onBackground
+        )
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(4.dp)
+        ) {
+            Text(
+                text = calories.value,
+                style = AppTheme.typography.titleMedium,
+                color = AppTheme.colors.onBackground
+            )
+            Text(
+                text = calories.unit,
+                style = AppTheme.typography.titleMedium,
+                color = AppTheme.colors.onBackground
+            )
+        }
+    }
+}
+
+@Composable
+private fun NutritionItem(
+    modifier: Modifier = Modifier,
+    state: NutritionState
+) {
+    Column(
+        modifier = modifier,
+        verticalArrangement = Arrangement.spacedBy(2.dp),
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        Row(
+            horizontalArrangement = Arrangement.spacedBy(4.dp),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            Text(
+                text = state.amount,
+                style = AppTheme.typography.titleMedium,
+                fontWeight = FontWeight.Light,
+                color = AppTheme.colors.onBackground
+            )
+            Text(
+                text = state.unit,
+                style = AppTheme.typography.titleMedium,
+                color = AppTheme.colors.onBackground,
+                fontWeight = FontWeight.Light
+            )
+        }
+        Text(
+            text = state.title,
+            style = AppTheme.typography.label,
+            color = AppTheme.colors.onBackground
+        )
+    }
+}

app/src/main/java/com/juceliodev/fooddeliverymyapplication/ui/screen/components/ProductPreviewSection.kt

@@ -0,0 +1,145 @@
+package com.juceliodev.fooddeliverymyapplication.ui.screen.components
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.IntrinsicSize
+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.size
+import androidx.compose.foundation.layout.statusBarsPadding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.dp
+import androidx.constraintlayout.compose.ConstraintLayout
+import com.juceliodev.fooddeliverymyapplication.R
+import com.juceliodev.fooddeliverymyapplication.data.ProductPreviewState
+import com.juceliodev.fooddeliverymyapplication.ui.theme.AppTheme
+
+@Composable
+fun ProductPreviewSection(
+    modifier: Modifier = Modifier,
+    state: ProductPreviewState
+) {
+    Box(
+        modifier = modifier.height(IntrinsicSize.Max)
+    ) {
+        ProductBackground(
+            Modifier.padding(bottom = 24.dp)
+        )
+        Content(
+            state = state,
+            modifier = Modifier
+                .statusBarsPadding()
+                .padding(top = 24.dp)
+        )
+    }
+}
+
+@Composable
+private fun ProductBackground(
+    modifier: Modifier = Modifier
+) {
+    Box(
+        modifier = modifier
+            .fillMaxSize()
+            .background(
+                color = AppTheme.colors.secondarySurface,
+                shape = RoundedCornerShape(bottomStart = 32.dp, bottomEnd = 32.dp)
+            )
+    )
+}
+
+@Composable
+private fun Content(
+    modifier: Modifier = Modifier,
+    state: ProductPreviewState
+) {
+    ConstraintLayout(
+        modifier = modifier.fillMaxWidth()
+    ) {
+        val (actionBar, highlights, productImg) = createRefs()
+
+        ActionBar(
+            headline = state.headline,
+            modifier = Modifier
+                .padding(horizontal = 19.dp)
+                .constrainAs(actionBar) {
+                    top.linkTo(parent.top)
+                }
+        )
+
+        Image(
+            painter = painterResource(id = state.productImg),
+            contentDescription = null,
+            contentScale = ContentScale.FillHeight,
+            modifier = Modifier
+                .height(256.dp)
+                .constrainAs(productImg) {
+                    end.linkTo(parent.end)
+                    top.linkTo(anchor = actionBar.bottom, margin = 20.dp)
+                }
+        )
+
+        ProductHighlights(
+            highlights = state.highlights,
+            modifier = Modifier.constrainAs(highlights) {
+                start.linkTo(anchor = parent.start, margin = 19.dp)
+                top.linkTo(productImg.top)
+            }
+        )
+    }
+}
+
+@Composable
+private fun ActionBar(
+    modifier: Modifier = Modifier,
+    headline: String
+) {
+    Row(
+        modifier = modifier.fillMaxWidth(),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.SpaceBetween
+    ) {
+        Text(
+            text = headline,
+            style = AppTheme.typography.headline,
+            color = AppTheme.colors.onSecondarySurface
+        )
+        CloseButton()
+    }
+}
+
+@Composable
+private fun CloseButton(
+    modifier: Modifier = Modifier
+) {
+    Surface(
+        modifier = modifier.size(44.dp),
+        shape = RoundedCornerShape(16.dp),
+        color = AppTheme.colors.actionSurface,
+        contentColor = AppTheme.colors.secondarySurface
+    ) {
+        Box(
+            modifier = modifier.fillMaxSize(),
+            contentAlignment = Alignment.Center
+        ) {
+            Icon(
+                painter = painterResource(id = R.drawable.ic_close),
+                contentDescription = null,
+                modifier = Modifier.size(24.dp)
+            )
+        }
+    }
+}