Adding UserHeaderView

2021-09-06 22:58:30 +02:00
parent ad71866d2d
commit 720af0427a
5 changed files with 204 additions and 0 deletions
@@ -0,0 +1,77 @@
+package com.ericampire.android.androidstudycase.presentation.screen.home.ui
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.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.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.PreviewParameter
+import androidx.compose.ui.unit.dp
+import com.ericampire.android.androidstudycase.domain.entity.User
+import com.ericampire.android.androidstudycase.presentation.custom.CustomImageView
+import com.ericampire.android.androidstudycase.presentation.theme.AndroidStudyCaseTheme
+import com.ericampire.android.androidstudycase.presentation.theme.AppColor
+import com.ericampire.android.androidstudycase.util.UserProvider
+
+@Composable
+fun LoggedUserHeaderView(
+  modifier: Modifier = Modifier,
+  user: User
+) {
+  Row(
+    modifier = modifier
+      .background(color = AppColor.Black001)
+      .padding(16.dp)
+      .fillMaxWidth(),
+    horizontalArrangement = Arrangement.spacedBy(16.dp),
+    content = {
+      CustomImageView(
+        modifier = Modifier
+          .size(57.dp)
+          .clip(CircleShape),
+        data = user.imageUrl,
+      )
+      Column(
+        verticalArrangement = Arrangement.spacedBy(8.dp),
+        content = {
+          Text(
+            maxLines = 1,
+            text = "Monday September 4",
+            style = MaterialTheme.typography.button.copy(
+              color = Color.Gray
+            ),
+          )
+          Text(
+            maxLines = 1,
+            text = user.displayName,
+            style = MaterialTheme.typography.h3.copy(
+              color = AppColor.PaleBlue
+            ),
+          )
+        }
+      )
+    }
+  )
+}
+
+@Preview
+@Composable
+private fun LoggedUserHeaderViewPreview(@PreviewParameter(UserProvider::class) data: User) {
+  AndroidStudyCaseTheme(darkTheme = true) {
+    Box(
+      modifier = Modifier.fillMaxSize(),
+      contentAlignment = Alignment.Center,
+      content = {
+        LoggedUserHeaderView(
+          user = data,
+        )
+      }
+    )
+  }
+}
@@ -0,0 +1,87 @@
+package com.ericampire.android.androidstudycase.presentation.screen.home.ui
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.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.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.ericampire.android.androidstudycase.R
+import com.ericampire.android.androidstudycase.presentation.theme.AndroidStudyCaseTheme
+import com.ericampire.android.androidstudycase.presentation.theme.AppColor
+
+@Composable
+fun UnLoggedUserHeaderView(
+  modifier: Modifier = Modifier,
+  onLoginClick: () -> Unit
+) {
+  Row(
+    modifier = modifier
+      .background(color = AppColor.Black001)
+      .padding(16.dp)
+      .fillMaxWidth(),
+    horizontalArrangement = Arrangement.spacedBy(16.dp),
+    content = {
+      Image(
+        modifier = Modifier
+          .size(57.dp)
+          .clip(CircleShape),
+        painter = painterResource(id = R.drawable.lottiefiles_circle_logo),
+        contentDescription = stringResource(id = R.string.txt_lottie_logo)
+      )
+      Column(
+        verticalArrangement = Arrangement.spacedBy(8.dp),
+        content = {
+          Text(
+            maxLines = 1,
+            text = "Monday September 4",
+            style = MaterialTheme.typography.button.copy(
+              color = Color.Gray
+            ),
+          )
+          Text(
+            maxLines = 1,
+            text = stringResource(R.string.txt_hello_stranger),
+            style = MaterialTheme.typography.h3.copy(
+              color = AppColor.PaleBlue
+            ),
+          )
+          Text(
+            modifier = Modifier.clickable(onClick = onLoginClick),
+            maxLines = 1,
+            text = stringResource(R.string.txt_login),
+            style = MaterialTheme.typography.body1.copy(
+              color = AppColor.Teal
+            ),
+          )
+        }
+      )
+    }
+  )
+}
+
+@Preview
+@Composable
+private fun UnLoggedUserHeaderViewPreview() {
+  AndroidStudyCaseTheme(darkTheme = true) {
+    Box(
+      modifier = Modifier.fillMaxSize(),
+      contentAlignment = Alignment.Center,
+      content = {
+        UnLoggedUserHeaderView() {
+
+        }
+      }
+    )
+  }
+}
@@ -3,8 +3,15 @@ package com.ericampire.android.androidstudycase.util
 import com.ericampire.android.androidstudycase.domain.entity.Animator
 import com.ericampire.android.androidstudycase.domain.entity.Blog
 import com.ericampire.android.androidstudycase.domain.entity.Lottiefile
+import com.ericampire.android.androidstudycase.domain.entity.User

 object PreviewData {
+  object User {
+    val data = listOf(
+      User(1, "Eric Ampire", "https://avatars.githubusercontent.com/u/32017617?v=4")
+    )
+  }
+
  object Blog {
    val data = listOf(
      Blog(
@@ -4,6 +4,7 @@ import androidx.compose.ui.tooling.preview.PreviewParameterProvider
 import com.ericampire.android.androidstudycase.domain.entity.Animator
 import com.ericampire.android.androidstudycase.domain.entity.Blog
 import com.ericampire.android.androidstudycase.domain.entity.Lottiefile
+import com.ericampire.android.androidstudycase.domain.entity.User


 class BlogProvider : PreviewParameterProvider<Blog> {
@@ -22,3 +23,8 @@ class LottieFileProvider : PreviewParameterProvider<Lottiefile> {
  override val values: Sequence<Lottiefile>
    get() = PreviewData.Lottiefile.data.asSequence()
 }
+
+class UserProvider : PreviewParameterProvider<User> {
+  override val values: Sequence<User>
+    get() = PreviewData.User.data.asSequence()
+}
@@ -0,0 +1,27 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt"
+    android:width="182dp"
+    android:height="183dp"
+    android:viewportWidth="182"
+    android:viewportHeight="183">
+    <path android:pathData="M90.996,91.459m-90.957,0a90.957,90.957 0,1 1,181.914 0a90.957,90.957 0,1 1,-181.914 0">
+        <aapt:attr name="android:fillColor">
+            <gradient
+                android:startY="42.7324"
+                android:startX="47.0462"
+                android:endY="117.323"
+                android:endX="143.671"
+                android:type="linear">
+                <item
+                    android:offset="0"
+                    android:color="#FF2AEAEC" />
+                <item
+                    android:offset="1"
+                    android:color="#FF0FCECF" />
+            </gradient>
+        </aapt:attr>
+    </path>
+    <path
+        android:pathData="M124.233,52.425C127.924,52.972 130.471,56.413 129.927,60.108C129.382,63.805 125.949,66.362 122.256,65.814C116.19,64.915 106.901,74.575 96.481,94.477C83.053,120.124 70.526,132.371 57.257,131.388C53.535,131.112 50.744,127.866 51.019,124.141C51.293,120.414 54.531,117.614 58.253,117.89C64.557,118.357 74.001,108.278 84.518,88.19C98.035,62.374 110.739,50.425 124.233,52.425Z"
+        android:fillColor="#ffffff" />
+</vector>