1import { Pressable, View } from "react-native";
2
3import { AppText } from "../../components/ui/AppText";
4import { SymbolView } from "../../components/ui/AppSymbol";
5
6export function BrowserPreviewButton(props: {
7 readonly count: number;
8 readonly onPress: () => void;
9 readonly compact?: boolean;
10}) {
11 const compact = props.compact ?? true;
12 return (
13 <Pressable
14 accessibilityRole="button"
15 accessibilityLabel={props.count === 1 ? "View browser" : `View ${props.count} browser tabs`}
16 accessibilityHint="Watch and control browser tabs open in this thread"
17 onPress={props.onPress}
18 className={
19 compact
20 ? "size-11 shrink-0 items-center justify-center rounded-full active:bg-subtle"
21 : "h-11 shrink-0 flex-row items-center justify-center gap-2 rounded-full px-4 active:bg-subtle"
22 }
23 >
24 <SymbolView name="globe" size={20} tintColorClassName="accent-icon" type="monochrome" />
25 {!compact ? (
26 <AppText className="font-t3-medium text-xs text-foreground">
27 {props.count === 1 ? "One tab open" : `${props.count} tabs open`}
28 </AppText>
29 ) : props.count > 1 ? (
30 <View className="absolute right-1.5 top-1.5 min-w-4 items-center rounded-full bg-primary px-1">
31 <AppText className="text-2xs font-t3-bold text-primary-foreground">{props.count}</AppText>
32 </View>
33 ) : null}
34 </Pressable>
35 );
36}