feat(tagPillIcon): adding the ability to add icon on tagPill (#38)

Author: Theo-lbg

README.md

@@ -160,7 +160,7 @@ ClickyButton(
 
 #### TagPill
 
-![TagPill Preview](xpeho_ui_android/doc/tagpill.png)
+![TagPill Preview](xpeho_ui_android/doc/tag_pill.png)
 
 Usage:
 
@@ -171,7 +171,8 @@ TagPill(
     label = String,
     size = TextUnit,
     backgroundColor = Color,
-    labelColor = Color
+    labelColor = Color,
+    icon = @Composable() -> Unit? {},
 )
 ```
 

xpeho_ui_android/doc/tag_pill.png

@@ -3,16 +3,19 @@ package com.xpeho.xpeho_ui_android
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
+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.graphics.Color
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
@@ -27,19 +30,21 @@ fun TagPill(
     label: String,
     size: TextUnit = 10.sp,
     backgroundColor: Color = Colors.GREEN_DARK_COLOR,
-    labelColor: Color = Color.White
+    labelColor: Color = Color.White,
+    icon: @Composable () -> Unit? = {},
 ) {
     return Card(
         shape = RoundedCornerShape(6.dp),
         colors = CardDefaults.cardColors(
             containerColor = backgroundColor,
         ),
 
-    ) {
-        Box(
+        ) {
+        Row(
             modifier = Modifier.padding(vertical = 1.dp, horizontal = 4.dp),
-            contentAlignment = Alignment.Center
+            verticalAlignment = Alignment.CenterVertically,
         ) {
+            icon()
             Text(
                 text = label.uppercase(),
                 fontSize = size,
@@ -67,6 +72,20 @@ fun TagPillPreview() {
                     "stress",
                     backgroundColor = Colors.XPEHO_COLOR,
                 )
+                Box(modifier = Modifier.width(4.dp))
+                TagPill(
+                    icon = {
+                        Icon(
+                            painter = painterResource(id = R.drawable.eye),
+                            tint = Color.White,
+                            contentDescription = "Briefcase icon",
+                            modifier = Modifier
+                                .size(12.dp)
+                                .padding(end = 2.dp)
+                        )
+                    },
+                    label= "TAG PILL ICON",
+                )
             }
         }
     }