Live video on the AT Protocol
1import { X } from "@tamagui/lucide-icons";
2import { Button, View, ViewProps } from "tamagui";
3
4export default function Popup({
5 onClose,
6 containerProps: viewProps,
7 bubbleProps: bubbleProps,
8 children,
9 onPress,
10}: {
11 onClose: () => void;
12 onPress?: () => void;
13 containerProps: ViewProps;
14 bubbleProps: ViewProps;
15 children: React.ReactNode;
16}) {
17 return (
18 <View
19 position="absolute"
20 bottom="$8"
21 f={1}
22 alignItems="center"
23 width="100%"
24 backgroundColor="blue"
25 height={0}
26 {...viewProps}
27 >
28 <View
29 f={1}
30 alignItems="stretch"
31 padding="$4"
32 borderRadius="$4"
33 onPress={() => {
34 if (onPress) {
35 onPress();
36 }
37 }}
38 position="absolute"
39 bottom={0}
40 boxShadow="0 0 10px 0 rgba(0, 0, 0, 0.1)"
41 {...bubbleProps}
42 >
43 <Button
44 position="absolute"
45 top="$0"
46 right="$0"
47 onPress={(e) => {
48 e.stopPropagation();
49 onClose();
50 }}
51 marginRight={-15}
52 marginTop={-5}
53 backgroundColor="transparent"
54 >
55 <X />
56 </Button>
57 {children}
58 </View>
59 </View>
60 );
61}