Add UI component OrganizationHeader

Ref: https://www.figma.com/design/G1xy0HDZKJf5TCRFmKb5d5/Compound-Android-Components?node-id=3643-2048&m=dev
2025-08-20 15:40:50 +02:00
parent aadaeb78d8
commit e26ef969fd
1 changed files with 89 additions and 0 deletions
--- a/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/OrganizationHeader.kt
+++ b/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/OrganizationHeader.kt
@@ -0,0 +1,89 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+package io.element.android.libraries.matrix.ui.components
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.pluralStringResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import io.element.android.compound.theme.ElementTheme
+import io.element.android.libraries.designsystem.components.avatar.Avatar
+import io.element.android.libraries.designsystem.components.avatar.AvatarData
+import io.element.android.libraries.designsystem.components.avatar.AvatarSize
+import io.element.android.libraries.designsystem.components.avatar.AvatarType
+import io.element.android.libraries.designsystem.components.avatar.anAvatarData
+import io.element.android.libraries.designsystem.preview.ElementPreview
+import io.element.android.libraries.designsystem.preview.PreviewsDayNight
+import io.element.android.libraries.ui.strings.CommonPlurals
+import io.element.android.libraries.ui.strings.CommonStrings
+
+/**
+ * Ref: https://www.figma.com/design/G1xy0HDZKJf5TCRFmKb5d5/Compound-Android-Components?node-id=3643-2048&m=dev
+ */
+@Composable
+fun OrganizationHeader(
+    avatarData: AvatarData,
+    name: String,
+    numberOfSpaces: Int,
+    numberOfRooms: Int,
+    modifier: Modifier = Modifier,
+) {
+    Column(
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(top = 16.dp, bottom = 24.dp, start = 16.dp, end = 16.dp),
+        horizontalAlignment = Alignment.CenterHorizontally,
+    ) {
+        Avatar(
+            avatarData = avatarData,
+            avatarType = AvatarType.Space(false),
+        )
+        Spacer(modifier = Modifier.height(16.dp))
+        Text(
+            text = name,
+            style = ElementTheme.typography.fontHeadingLgBold,
+            color = ElementTheme.colors.textPrimary,
+            textAlign = TextAlign.Center,
+        )
+        Spacer(modifier = Modifier.height(12.dp))
+        val subtitle = stringResource(
+            id = CommonStrings.screen_space_list_details,
+            pluralStringResource(CommonPlurals.common_spaces, numberOfSpaces, numberOfSpaces),
+            pluralStringResource(CommonPlurals.common_rooms, numberOfRooms, numberOfRooms),
+        )
+        Text(
+            text = subtitle,
+            style = ElementTheme.typography.fontBodyLgRegular,
+            color = ElementTheme.colors.textSecondary,
+            textAlign = TextAlign.Center,
+        )
+    }
+}
+
+@PreviewsDayNight
+@Composable
+internal fun OrganizationHeaderPreview() = ElementPreview {
+    OrganizationHeader(
+        avatarData = anAvatarData(
+            url = "anUrl",
+            size = AvatarSize.OrganizationHeader,
+        ),
+        name = "Space name",
+        numberOfSpaces = 9,
+        numberOfRooms = 88,
+    )
+}