stream.place
Live video on the AT Protocol
1import { zero } from "@streamplace/components";
2import { View, ViewStyle, useWindowDimensions } from "react-native";
3
4const maxContainerWidths = {
5 xxs: 440,
6 xs: 440,
7 sm: 440,
8 md: 660,
9 lg: 740,
10 xl: 800,
11 twoXl: 1260,
12 threeXl: 1660,
13};
14
15interface ContainerProps {
16 children: React.ReactNode;
17 style?: ViewStyle;
18}
19
20function getMaxWidth(width: number): number {
21 if (width >= 1660) return maxContainerWidths.threeXl;
22 if (width >= 1260) return maxContainerWidths.twoXl;
23 if (width >= 800) return maxContainerWidths.xl;
24 if (width >= 740) return maxContainerWidths.lg;
25 if (width >= 660) return maxContainerWidths.md;
26 return maxContainerWidths.sm;
27}
28
29export default function Container({
30 children,
31 style,
32 ...props
33}: ContainerProps) {
34 const { width } = useWindowDimensions();
35 const maxWidth = getMaxWidth(width);
36
37 return (
38 <View
39 style={[
40 zero.flex.values[1],
41 { justifyContent: "center" },
42 { alignItems: "center" },
43 ]}
44 >
45 <View
46 style={[
47 zero.w.percent[100],
48 zero.px[8],
49 { marginHorizontal: "auto" },
50 { maxWidth },
51 style,
52 ]}
53 {...props}
54 >
55 {children}
56 </View>
57 </View>
58 );
59}