byGalax
46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
import { Pressable, StyleSheet, Text, View } from 'react-native';
|
|
|
|
import { colors } from '../theme/colors';
|
|
|
|
// Hardcoded 6-emoji quick reactor shown at the top of the long-press
|
|
// sheet. A full emoji picker is post-Phase-4; this is the Discord-style
|
|
// fast path the vast majority of reactions go through.
|
|
export const QUICK_REACTIONS = ['👍', '❤️', '😂', '😮', '😢', '🎉'] as const;
|
|
|
|
export function ReactionStrip({ onReact }: { onReact: (emoji: string) => void }) {
|
|
return (
|
|
<View style={styles.row}>
|
|
{QUICK_REACTIONS.map((e) => (
|
|
<Pressable
|
|
key={e}
|
|
onPress={() => onReact(e)}
|
|
style={({ pressed }) => [styles.button, pressed && styles.buttonPressed]}
|
|
hitSlop={6}
|
|
>
|
|
<Text style={styles.emoji}>{e}</Text>
|
|
</Pressable>
|
|
))}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
row: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-around',
|
|
paddingVertical: 12,
|
|
paddingHorizontal: 8,
|
|
borderBottomColor: colors.border,
|
|
borderBottomWidth: 1,
|
|
},
|
|
button: {
|
|
width: 44,
|
|
height: 44,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
borderRadius: 22,
|
|
},
|
|
buttonPressed: { backgroundColor: colors.accentMuted },
|
|
emoji: { fontSize: 26 },
|
|
});
|