Add filter chip component

Co-Authored-By: Boban Sijuk <49131853+boki91@users.noreply.github.com>

1 files changed, 65 insertions, 0 deletions

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/FilterChip.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/FilterChip.kt
new file mode 100644
index 0000000000..0443a7267e
--- /dev/null
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/FilterChip.kt
@@ -0,0 +1,65 @@
+package net.mullvad.mullvadvpn.compose.component
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.FilterChip
+import androidx.compose.material3.FilterChipDefaults
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+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 net.mullvad.mullvadvpn.R
+import net.mullvad.mullvadvpn.lib.theme.AppTheme
+import net.mullvad.mullvadvpn.lib.theme.Dimens
+import net.mullvad.mullvadvpn.lib.theme.color.MullvadBlue
+import net.mullvad.mullvadvpn.lib.theme.shape.chipShape
+
+@Preview
+@Composable
+private fun PreviewMullvadFilterChip() {
+    AppTheme {
+        MullvadFilterChip(
+            text = stringResource(id = R.string.number_of_providers),
+            onRemoveClick = {}
+        )
+    }
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun MullvadFilterChip(text: String, onRemoveClick: () -> Unit) {
+    FilterChip(
+        modifier = Modifier.padding(vertical = Dimens.chipVerticalPadding),
+        shape = MaterialTheme.shapes.chipShape,
+        colors = FilterChipDefaults.filterChipColors(containerColor = MullvadBlue),
+        border =
+            FilterChipDefaults.filterChipBorder(
+                borderColor = Color.Transparent,
+                disabledBorderColor = Color.Transparent
+            ),
+        selected = false,
+        onClick = {},
+        label = {
+            Text(
+                text = text,
+                color = MaterialTheme.colorScheme.onPrimary,
+                style = MaterialTheme.typography.labelMedium
+            )
+            Spacer(modifier = Modifier.size(ButtonDefaults.IconSpacing))
+            Image(
+                painter = painterResource(id = R.drawable.icon_close),
+                contentDescription = null,
+                modifier = Modifier.size(Dimens.smallIconSize).clickable { onRemoveClick() }
+            )
+        }
+    )
+}