stream.place
Live video on the AT Protocol
1import { TouchableOpacity } from "react-native";
2import { ScrollView, Text, View } from "tamagui";
3
4export interface EmojiSuggestion {
5 emoji: string;
6 shortcode: string;
7 name: string;
8}
9
10interface EmojiSuggestionsProps {
11 suggestions: EmojiSuggestion[];
12 onSelect: (suggestion: EmojiSuggestion) => void;
13 highlightedIndex: number;
14 setHighlightedIndex: (i: number) => void;
15}
16
17export default function EmojiSuggestions({
18 suggestions,
19 onSelect,
20 highlightedIndex,
21 setHighlightedIndex,
22}: EmojiSuggestionsProps) {
23 if (suggestions.length === 0) return null;
24
25 return (
26 <View
27 position="absolute"
28 left={0}
29 right={0}
30 bottom="100%"
31 marginBottom={44}
32 backgroundColor="$background"
33 borderRadius={4}
34 zIndex={100000}
35 shadowColor="$shadowColor"
36 shadowOffset={{ width: 0, height: 2 }}
37 shadowOpacity={0.25}
38 shadowRadius={4}
39 style={{ pointerEvents: "auto" }}
40 >
41 <Text
42 fontSize={12}
43 color="$color"
44 padding="$2"
45 opacity={0.7}
46 style={{ borderBottomWidth: 1, borderBottomColor: "$borderColor" }}
47 >
48 ↑/↓ to navigate, Tab/Enter to select, Esc to close
49 </Text>
50 <ScrollView style={{ maxHeight: 240 }}>
51 {suggestions.slice(0, 5).map((suggestion, i) => (
52 <View
53 key={suggestion.shortcode}
54 onMouseEnter={() => setHighlightedIndex(i)}
55 >
56 <TouchableOpacity onPress={() => onSelect(suggestion)}>
57 <View
58 padding="$2"
59 backgroundColor={
60 i === highlightedIndex ? "$accentBackground" : "transparent"
61 }
62 style={{
63 borderBottomWidth: 1,
64 borderBottomColor: "$borderColor",
65 flexDirection: "row",
66 alignItems: "center",
67 gap: 8,
68 }}
69 >
70 <Text fontSize={18} style={{ width: 28 }}>
71 {suggestion.emoji}
72 </Text>
73 <Text
74 fontSize={14}
75 color="$accentColor"
76 style={{ minWidth: 70 }}
77 >
78 {suggestion.shortcode}
79 </Text>
80 <Text fontSize={13} color="$color" opacity={0.7}>
81 {suggestion.name}
82 </Text>
83 </View>
84 </TouchableOpacity>
85 </View>
86 ))}
87 </ScrollView>
88 </View>
89 );
90}