byGalax
59 lines
1.8 KiB
TypeScript
59 lines
1.8 KiB
TypeScript
import type { ConversationSummary } from '@chat-app/shared/chat';
|
|
import { Pressable, StyleSheet, Text, View } from 'react-native';
|
|
|
|
import { formatRelativeTime } from '../lib/timeFormat';
|
|
import { colors } from '../theme/colors';
|
|
import { Avatar } from './Avatar';
|
|
|
|
interface Props {
|
|
conversation: ConversationSummary;
|
|
lastMessagePreview: string;
|
|
onPress: () => void;
|
|
}
|
|
|
|
export function ConversationRow({ conversation, lastMessagePreview, onPress }: Props) {
|
|
const title =
|
|
conversation.type === 'group'
|
|
? (conversation.name ?? 'Gruppe')
|
|
: (conversation.peer?.displayName ?? '—');
|
|
const subtitle =
|
|
conversation.type === 'group'
|
|
? conversation.members.length + ' Mitglieder'
|
|
: '@' + (conversation.peer?.username ?? '');
|
|
|
|
return (
|
|
<Pressable
|
|
style={({ pressed }) => [styles.row, pressed && { backgroundColor: colors.surface }]}
|
|
onPress={onPress}
|
|
>
|
|
<Avatar name={title} />
|
|
<View style={styles.center}>
|
|
<View style={styles.titleLine}>
|
|
<Text style={styles.title} numberOfLines={1}>
|
|
{title}
|
|
</Text>
|
|
<Text style={styles.time}>{formatRelativeTime(conversation.lastMessageAt)}</Text>
|
|
</View>
|
|
<Text style={styles.preview} numberOfLines={1}>
|
|
{lastMessagePreview || subtitle}
|
|
</Text>
|
|
</View>
|
|
</Pressable>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
row: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 12,
|
|
gap: 12,
|
|
},
|
|
center: { flex: 1, minWidth: 0 },
|
|
titleLine: { flexDirection: 'row', alignItems: 'baseline', gap: 8 },
|
|
title: { color: colors.text, fontSize: 15, fontWeight: '600', flex: 1 },
|
|
time: { color: colors.textDim, fontSize: 11 },
|
|
preview: { color: colors.textMuted, fontSize: 13, marginTop: 2 },
|
|
});
|