Created the UI of Home Screen

uncrack-vault · Mar 15, 2024 · c6a48d8 · c6a48d8
1 parent fd3c952
commit c6a48d8
Show file tree

Hide file tree

Showing 5 changed files with 201 additions and 2 deletions.
diff --git a/.idea/deploymentTargetDropDown.xml b/.idea/deploymentTargetDropDown.xml
diff --git a/app/src/main/java/com/geekymusketeers/uncrack/presentation/home/HomeScreen.kt b/app/src/main/java/com/geekymusketeers/uncrack/presentation/home/HomeScreen.kt
@@ -1,8 +1,165 @@
 package com.geekymusketeers.uncrack.presentation.home
 
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.heightIn
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Search
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.SearchBar
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+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.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.geekymusketeers.uncrack.R
+import com.geekymusketeers.uncrack.components.CategoryCard
+import com.geekymusketeers.uncrack.ui.theme.BackgroundLight
+import com.geekymusketeers.uncrack.ui.theme.bold20
+import com.geekymusketeers.uncrack.ui.theme.normal14
+import com.geekymusketeers.uncrack.ui.theme.normal16
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
-fun HomeScreen() {
+fun HomeScreen(
+    modifier: Modifier = Modifier
+) {
 
+    var searchQuery by rememberSaveable { mutableStateOf("") }
+
+    Scaffold(
+        modifier = modifier.fillMaxWidth()
+    ) { paddingValues ->
+
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(paddingValues)
+                .padding(16.dp)
+                .background(BackgroundLight)
+        ) {
+
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+                horizontalArrangement = Arrangement.SpaceBetween
+            ) {
+
+                Text(
+                    modifier = Modifier.padding(top = 16.dp),
+                    text = "Hello, Aritra",
+                    style = bold20.copy(Color.Black)
+                )
+
+                Image(
+                    painter = painterResource(id = R.drawable.no_user_profile_picture),
+                    contentDescription = null,
+                    contentScale = ContentScale.Crop,
+                    modifier = Modifier
+                        .size(56.dp)
+                        .clip(CircleShape)
+                )
+            }
+
+            Spacer(modifier = Modifier.height(20.dp))
+
+            SearchBar(
+                modifier = Modifier.fillMaxWidth(),
+                query = searchQuery,
+                onQueryChange = {
+                    searchQuery = it
+                },
+                onSearch = {},
+                active = false,
+                onActiveChange = {},
+                placeholder = { Text(text = "Search here", style = normal16)},
+                leadingIcon = { Icon(Icons.Default.Search, contentDescription = null) }
+            ) { }
+
+            Spacer(modifier = Modifier.height(30.dp))
+
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+                horizontalArrangement = Arrangement.SpaceBetween
+            ) {
+                Text(
+                    text = "Manager Passwords",
+                    style = bold20.copy(Color.Black)
+                )
+
+                Text(
+                    modifier = Modifier
+                        .padding(top = 4.dp)
+                        .clickable { },
+                    text = "See all",
+                    style = normal14.copy(Color.Gray)
+                )
+            }
+
+            Spacer(modifier = Modifier.height(20.dp))
+
+            Row(
+                horizontalArrangement = Arrangement.spacedBy(40.dp),
+            ) {
+                CategoryCard(
+                    icon = R.drawable.category_social,
+                    text = "Social",
+                    onClick = {
+
+                    }
+                )
+
+                CategoryCard(
+                    icon = R.drawable.category_brower,
+                    text = "Browser",
+                    onClick = {
+
+                    }
+                )
+
+                CategoryCard(
+                    icon = R.drawable.category_card,
+                    text = "Card",
+                    onClick = {
+
+                    }
+                )
+            }
+
+            Spacer(modifier = Modifier.height(30.dp))
+
+            Text(
+                text = "Favourites",
+                style = bold20.copy(Color.Black)
+            )
+
+
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun HomeScreenPrev() {
+    HomeScreen(modifier = Modifier)
 }
diff --git a/app/src/main/res/drawable/category_brower.xml b/app/src/main/res/drawable/category_brower.xml
@@ -0,0 +1,20 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="30dp"
+    android:height="30dp"
+    android:viewportWidth="30"
+    android:viewportHeight="30">
+  <path
+      android:pathData="M10,20L12.5,12.5L20,10L17.5,17.5L10,20Z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="#000000"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M3.75,15C3.75,16.477 4.041,17.94 4.606,19.305C5.172,20.67 6,21.91 7.045,22.955C8.09,24 9.33,24.828 10.695,25.394C12.06,25.959 13.523,26.25 15,26.25C16.477,26.25 17.94,25.959 19.305,25.394C20.67,24.828 21.91,24 22.955,22.955C24,21.91 24.828,20.67 25.394,19.305C25.959,17.94 26.25,16.477 26.25,15C26.25,13.523 25.959,12.06 25.394,10.695C24.828,9.33 24,8.09 22.955,7.045C21.91,6 20.67,5.172 19.305,4.606C17.94,4.041 16.477,3.75 15,3.75C13.523,3.75 12.06,4.041 10.695,4.606C9.33,5.172 8.09,6 7.045,7.045C6,8.09 5.172,9.33 4.606,10.695C4.041,12.06 3.75,13.523 3.75,15Z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="#000000"
+      android:strokeLineCap="round"/>
+</vector>
diff --git a/app/src/main/res/drawable/category_card.xml b/app/src/main/res/drawable/category_card.xml
@@ -0,0 +1,13 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="30dp"
+    android:height="30dp"
+    android:viewportWidth="30"
+    android:viewportHeight="30">
+  <path
+      android:pathData="M3.75,12.5H26.25M8.75,18.75H8.762M13.75,18.75H16.25M3.75,10C3.75,9.005 4.145,8.052 4.848,7.348C5.552,6.645 6.505,6.25 7.5,6.25H22.5C23.495,6.25 24.448,6.645 25.152,7.348C25.855,8.052 26.25,9.005 26.25,10V20C26.25,20.995 25.855,21.948 25.152,22.652C24.448,23.355 23.495,23.75 22.5,23.75H7.5C6.505,23.75 5.552,23.355 4.848,22.652C4.145,21.948 3.75,20.995 3.75,20V10Z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="#000000"
+      android:strokeLineCap="round"/>
+</vector>
diff --git a/app/src/main/res/drawable/category_social.xml b/app/src/main/res/drawable/category_social.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="30dp"
+    android:height="30dp"
+    android:viewportWidth="30"
+    android:viewportHeight="30">
+  <path
+      android:pathData="M23.75,2.5H6.25C5.587,2.5 4.951,2.763 4.482,3.232C4.013,3.701 3.75,4.337 3.75,5V22.5C3.75,23.163 4.013,23.799 4.482,24.268C4.951,24.737 5.587,25 6.25,25H11.25L15,28.75L18.75,25H23.75C25.125,25 26.25,23.875 26.25,22.5V5C26.25,3.625 25.125,2.5 23.75,2.5ZM23.75,22.5H17.712L16.975,23.237L15,25.212L13.012,23.225L12.288,22.5H6.25V5H23.75V22.5ZM15,13.75C17.063,13.75 18.75,12.063 18.75,10C18.75,7.938 17.063,6.25 15,6.25C12.938,6.25 11.25,7.938 11.25,10C11.25,12.063 12.938,13.75 15,13.75ZM15,8.75C15.688,8.75 16.25,9.313 16.25,10C16.25,10.688 15.688,11.25 15,11.25C14.313,11.25 13.75,10.688 13.75,10C13.75,9.313 14.313,8.75 15,8.75ZM22.5,19.475C22.5,16.35 17.538,15 15,15C12.462,15 7.5,16.35 7.5,19.475V21.25H22.5V19.475ZM10.6,18.75C11.525,18.112 13.387,17.5 15,17.5C16.612,17.5 18.475,18.112 19.4,18.75H10.6Z"
+      android:fillColor="#000000"/>
+</vector>