openuispec 0.1.44 → 0.1.46

package/examples/social-app/generated/android/social-app/app/src/main/java/com/social/app/ui/components/Components.kt

@@ -0,0 +1,234 @@
+package com.social.app.ui.components
+
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.lazy.LazyRow
+import androidx.compose.foundation.lazy.items
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.*
+import androidx.compose.material.icons.outlined.*
+import androidx.compose.material3.*
+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.layout.ContentScale
+import androidx.compose.ui.unit.dp
+import coil3.compose.AsyncImage
+import com.social.app.ui.theme.Shapes
+import com.social.app.ui.theme.Spacing
+
+@Composable
+fun StoryItem(
+    name: String,
+    imageUrl: String?,
+    onClick: () -> Unit
+) {
+    Column(
+        horizontalAlignment = Alignment.CenterHorizontally,
+        modifier = Modifier
+            .padding(end = Spacing.ListItemGap)
+            .clickable { onClick() }
+    ) {
+        Box(
+            modifier = Modifier
+                .size(64.dp)
+                .clip(Shapes.RoundedCapPrimary)
+                .background(MaterialTheme.colorScheme.surfaceVariant)
+        ) {
+            if (imageUrl != null) {
+                AsyncImage(
+                    model = imageUrl,
+                    contentDescription = null,
+                    modifier = Modifier.fillMaxSize(),
+                    contentScale = ContentScale.Crop
+                )
+            } else {
+                Icon(
+                    Icons.Default.Person,
+                    contentDescription = null,
+                    modifier = Modifier.align(Alignment.Center)
+                )
+            }
+        }
+        Spacer(modifier = Modifier.height(Spacing.XS))
+        Text(
+            text = name,
+            style = MaterialTheme.typography.labelSmall,
+            maxLines = 1,
+            color = MaterialTheme.colorScheme.onSurface
+        )
+    }
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun FilterChipRow(
+    selectedFilter: String,
+    onFilterSelected: (String) -> Unit
+) {
+    val filters = listOf("all", "following", "popular")
+    LazyRow(
+        contentPadding = PaddingValues(horizontal = Spacing.MD),
+        horizontalArrangement = Arrangement.spacedBy(Spacing.SM)
+    ) {
+        items(filters) { filter ->
+            FilterChip(
+                selected = selectedFilter == filter,
+                onClick = { onFilterSelected(filter) },
+                label = { Text(filter.replaceFirstChar { it.uppercase() }) },
+                shape = Shapes.RoundedCapPrimary,
+                colors = FilterChipDefaults.filterChipColors(
+                    selectedContainerColor = MaterialTheme.colorScheme.secondary,
+                    selectedLabelColor = MaterialTheme.colorScheme.onSecondary
+                ),
+                border = FilterChipDefaults.filterChipBorder(
+                    enabled = true,
+                    selected = selectedFilter == filter,
+                    borderColor = MaterialTheme.colorScheme.outline,
+                    selectedBorderColor = Color.Transparent
+                )
+            )
+        }
+    }
+}
+
+@Composable
+fun PostItem(
+    authorName: String,
+    authorHandle: String,
+    authorAvatar: String? = null,
+    body: String,
+    likeCount: Int,
+    commentCount: Int,
+    timestamp: String,
+    mediaUrl: String? = null,
+    onAuthorClick: () -> Unit = {},
+    onLikeClick: () -> Unit = {},
+    onCommentClick: () -> Unit = {}
+) {
+    Card(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(horizontal = Spacing.MD, vertical = Spacing.XS),
+        shape = Shapes.CardShape,
+        colors = CardDefaults.cardColors(
+            containerColor = MaterialTheme.colorScheme.surfaceVariant
+        ),
+        border = BorderStroke(1.dp, MaterialTheme.colorScheme.outline)
+    ) {
+        Column(modifier = Modifier.padding(Spacing.MD)) {
+            Row(
+                verticalAlignment = Alignment.CenterVertically,
+                modifier = Modifier.clickable { onAuthorClick() }
+            ) {
+                Box(
+                    modifier = Modifier
+                        .size(40.dp)
+                        .clip(Shapes.RoundedCapPrimary)
+                        .background(MaterialTheme.colorScheme.surface)
+                ) {
+                    if (authorAvatar != null) {
+                        AsyncImage(
+                            model = authorAvatar,
+                            contentDescription = null,
+                            modifier = Modifier.fillMaxSize(),
+                            contentScale = ContentScale.Crop
+                        )
+                    } else {
+                        Icon(
+                            Icons.Default.Person,
+                            contentDescription = null,
+                            modifier = Modifier.align(Alignment.Center)
+                        )
+                    }
+                }
+                Spacer(modifier = Modifier.width(Spacing.SM))
+                Column {
+                    Text(
+                        text = authorName,
+                        style = MaterialTheme.typography.headlineSmall,
+                        color = MaterialTheme.colorScheme.onSurface
+                    )
+                    Text(
+                        text = "@$authorHandle",
+                        style = MaterialTheme.typography.bodyMedium,
+                        color = MaterialTheme.colorScheme.onSurfaceVariant
+                    )
+                }
+                Spacer(modifier = Modifier.weight(1f))
+                Text(
+                    text = timestamp,
+                    style = MaterialTheme.typography.labelSmall,
+                    color = MaterialTheme.colorScheme.onSurfaceVariant
+                )
+            }
+            
+            Spacer(modifier = Modifier.height(Spacing.SM))
+            Text(
+                text = body,
+                style = MaterialTheme.typography.bodyLarge,
+                color = MaterialTheme.colorScheme.onSurface
+            )
+
+            if (mediaUrl != null) {
+                Spacer(modifier = Modifier.height(Spacing.MD))
+                AsyncImage(
+                    model = mediaUrl,
+                    contentDescription = null,
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .heightIn(max = 300.dp)
+                        .clip(Shapes.CardShape)
+                        .clickable { onCommentClick() }, // Open detail on image click too
+                    contentScale = ContentScale.Crop
+                )
+            }
+
+            Spacer(modifier = Modifier.height(Spacing.MD))
+            Row(
+                horizontalArrangement = Arrangement.spacedBy(Spacing.LG),
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Row(
+                    verticalAlignment = Alignment.CenterVertically,
+                    modifier = Modifier.clickable { onLikeClick() }
+                ) {
+                    Icon(
+                        Icons.Outlined.FavoriteBorder,
+                        contentDescription = "Like",
+                        modifier = Modifier.size(20.dp)
+                    )
+                    Spacer(modifier = Modifier.width(Spacing.XS))
+                    Text(text = likeCount.toString(), style = MaterialTheme.typography.bodyMedium)
+                }
+                Row(
+                    verticalAlignment = Alignment.CenterVertically,
+                    modifier = Modifier.clickable { onCommentClick() }
+                ) {
+                    Icon(
+                        Icons.Outlined.ChatBubbleOutline,
+                        contentDescription = "Comment",
+                        modifier = Modifier.size(20.dp)
+                    )
+                    Spacer(modifier = Modifier.width(Spacing.XS))
+                    Text(text = commentCount.toString(), style = MaterialTheme.typography.bodyMedium)
+                }
+                Icon(
+                    Icons.Outlined.Share,
+                    contentDescription = "Share",
+                    modifier = Modifier.size(20.dp).clickable { }
+                )
+                Spacer(modifier = Modifier.weight(1f))
+                Icon(
+                    Icons.Outlined.BookmarkBorder,
+                    contentDescription = "Save",
+                    modifier = Modifier.size(20.dp).clickable { }
+                )
+            }
+        }
+    }
+}