Composables
Docs Login
Pairel

Matches

Jetpack Compose Screen

Chatting & Sending MessagesBrowse & Discover
Download 
package com.composables.pairel

import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.WindowInsetsSides
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.only
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.safeDrawing
import androidx.compose.foundation.layout.windowInsetsPadding
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.composables.pairel.components.AppBar
import com.composables.pairel.components.Conversation
import com.composables.pairel.components.ConversationsList
import com.composables.pairel.components.ScreenScaffold
import com.composables.pairel.components.Text
import com.composables.pairel.components.YourMatchesRow
import com.composables.pairel.theme.Theme

internal val clara =
    Person(
        "Clara",
        29,
        "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=900&h=1350&fit=crop&crop=faces&q=85",
        "A reader who makes a very good breakfast.",
        interests("Bookshops", "Baking", "Brunch"),
    )

internal val matchedPeople =
    listOf(
        Person(
            "Hannah",
            31,
            "https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?w=320&h=320&fit=crop&crop=faces&q=85",
            "Ceramic artist who is always finding a new place for lunch.",
            interests("Crafts", "Brunch", "Museums"),
        ),
        Person(
            "Zoe",
            34,
            "https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?w=320&h=320&fit=crop&crop=faces&q=85",
            "Sound designer, record collector, and fan of long walks.",
            interests("Live music", "Podcasts", "Hiking"),
        ),
        clara,
        Person(
            "Emma",
            32,
            "https://images.unsplash.com/photo-1499952127939-9bbf5af6c51c?w=320&h=320&fit=facearea&facepad=2&q=85",
            "Happiest outdoors or trying a new recipe with friends.",
            interests("Camping", "Cooking", "Running"),
        ),
        Person(
            "Lucy",
            28,
            "https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?w=320&h=320&fit=crop&crop=faces&q=85",
            "Usually planning a weekend trip or looking for good noodles.",
            interests("Cycling", "Photography", "Coffee"),
        ),
    )

private val grace =
    Person(
        "Grace",
        33,
        "https://images.unsplash.com/photo-1580489944761-15a19d654956?w=320&h=320&fit=crop&crop=faces&q=85",
        "A curious cook with a soft spot for old movies.",
        interests("Cooking", "Film", "Wine"),
    )

private val julia =
    Person(
        "Julia",
        30,
        "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=320&h=320&fit=crop&crop=faces&q=85",
        "Always up for live music and a good conversation.",
        interests("Live music", "Theatre", "Coffee"),
    )

private val mia =
    Person(
        "Mia",
        31,
        "https://images.unsplash.com/photo-1546961329-78bef0414d7c?w=320&h=320&fit=crop&crop=faces&q=85",
        "Always looking for a new trail and a good story.",
        interests("Hiking", "Climbing", "Podcasts"),
    )

private val ella =
    Person(
        "Ella",
        29,
        "https://images.unsplash.com/photo-1521146764736-56c929d59c83?w=320&h=320&fit=crop&crop=faces&q=85",
        "Coffee enthusiast and amateur photographer.",
        interests("Coffee", "Photography", "Cycling"),
    )

private val isla =
    Person(
        "Isla",
        35,
        "https://images.unsplash.com/photo-1485893086445-ed75865251e0?w=320&h=320&fit=crop&crop=faces&q=85",
        "A little quiet until the conversation gets good.",
        interests("Board games", "Film", "Tea"),
    )

internal val conversations =
    listOf(
        Conversation(
            people[0],
            "That little bookshop sounds perfect.",
            "Now",
            unread = true,
        ),
        Conversation(people[2], "I found a place for Sunday coffee ☕", "2h"),
        Conversation(people[3], "What was the last show you went to?", "Yesterday"),
        Conversation(people[1], "You had me at homemade pasta.", "Tue"),
        Conversation(people[4], "I tried that recipe you sent me.", "Mon"),
        Conversation(grace, "A film night sounds really good.", "Sun"),
        Conversation(julia, "Let's pick a show for next week.", "Sat"),
        Conversation(mia, "That walk was worth the early start.", "Fri"),
        Conversation(ella, "I saved you the window seat.", "Thu"),
        Conversation(isla, "I have a story for you next time.", "Wed"),
    )

@Composable
fun MatchesScreen(
    navigateToProfile: (Person) -> Unit,
    navigateToConversation: (Person) -> Unit,
    navigateToDiscover: () -> Unit,
    navigateToMyProfile: () -> Unit,
    modifier: Modifier = Modifier,
) {
    MainNavigationLayout(
        navigationBar = {
            MainNavigationBar(
                selected = MainDestination.Matches,
                navigateToDiscover = navigateToDiscover,
                navigateToMatches = {},
                navigateToMyProfile = navigateToMyProfile,
            )
        },
        modifier = modifier,
    ) { contentPadding ->
        MatchesDestination(
            navigateToProfile,
            navigateToConversation,
            contentPadding = contentPadding,
        )
    }
}

@Composable
fun MatchesDestination(
    navigateToProfile: (Person) -> Unit,
    navigateToConversation: (Person) -> Unit,
    contentPadding: PaddingValues,
    modifier: Modifier = Modifier,
) {
    val bottomPadding = contentPadding.calculateBottomPadding() + 24.dp

    ScreenScaffold(
        modifier = modifier,
        topBar = { AppBar(title = { Text("Matches") }) },
    ) {
        ConversationsList(
            conversations = conversations,
            onConversationClick = navigateToConversation,
            modifier =
                Modifier.fillMaxSize()
                    .windowInsetsPadding(
                        WindowInsets.safeDrawing.only(WindowInsetsSides.Horizontal)
                    ),
            contentPadding = PaddingValues(top = 20.dp, bottom = bottomPadding),
        ) {
            Text(
                "Your matches",
                modifier = Modifier.padding(horizontal = 20.dp),
                style = Theme.typography.title.copy(fontSize = 22.sp, lineHeight = 38.sp),
            )
            Spacer(Modifier.height(16.dp))
            YourMatchesRow(people = matchedPeople, onPersonClick = navigateToProfile)
            Text(
                "Conversations",
                modifier =
                    Modifier.padding(
                        start = 20.dp,
                        end = 20.dp,
                        top = 32.dp,
                        bottom = 12.dp,
                    ),
                style = Theme.typography.title.copy(fontSize = 22.sp, lineHeight = 38.sp),
            )
        }
    }
}

More screens from Pairel

by Alex Styl

Search screens and components

Screen flows

Onboarding Creating Account Logging In Logging Out Deleting & Deactivating Account Editing Profile Chatting & Sending Messages Adding & Creating Logging & Tracking Subscribing & Upgrading

Screens

Account Setup Add & Create Browse & Discover Call Charts Chat Bot Chat Detail Delete & Deactivate Account Edit Filter & Sort Goal & Task Home Login My Account & Profile Pricing Progress Settings & Preferences Signup Subscription & Paywall Trash & Archive User / Group Profile Verification Welcome & Get Started

UI Elements

Accordion Audio Visualizer Avatar Bottom Sheet Button Calendar Card Chat Bubble Checkbox Chip Dialog Divider Drawer Dropdown Menu Empty State Icon List Item Navigation Bar Progress Indicator Radio Button Scaffold Scrollbar Segmented Button Slider Switch Tab Bar Text Text Area Text Field Toast Tooltip