Live video on the AT Protocol
stream.place
1import { Text, zero } from "@streamplace/components";
2import { View, useWindowDimensions } from "react-native";
3
4export default function BreakpointIndicator() {
5 const { width } = useWindowDimensions();
6
7 // Simple breakpoint detection based on width
8 let current = "xs";
9 if (width >= 1536) current = "xxl";
10 else if (width >= 1280) current = "xl";
11 else if (width >= 1024) current = "lg";
12 else if (width >= 768) current = "md";
13 else if (width >= 640) current = "sm";
14
15 return (
16 <View
17 style={[
18 zero.r.full,
19 zero.bg.blue[600],
20 zero.h[32],
21 zero.w[32],
22 { justifyContent: "center", alignItems: "center" },
23 ]}
24 >
25 <Text style={[{ fontSize: 14 }, { color: "white" }]}>{current}</Text>
26 </View>
27 );
28}