stream.place
Live video on the AT Protocol
1import {
2 Button,
3 Text,
4 useTheme,
5 View,
6 ViewProps,
7 zero,
8} from "@streamplace/components";
9
10const { gap, pt, w, bg, r, spacing, layout, colors } = zero;
11
12export default function ButtonSelector({
13 text,
14 values,
15 selectedValue,
16 setSelectedValue,
17 disabledValues,
18 style,
19 ...props
20}: {
21 text?: string;
22 values: { label: string; value: string }[];
23 selectedValue: string;
24 setSelectedValue: (value: any) => void;
25 disabledValues?: string[];
26} & ViewProps) {
27 let theme = useTheme();
28 return (
29 <View align="start" style={[gap.all[2], style as any]} {...props}>
30 {text && (
31 <Text variant="body1" weight="semibold">
32 {text}
33 </Text>
34 )}
35 <View
36 direction="row"
37 align="center"
38 justify="around"
39 style={[gap.all[1], w.percent[100], r.full]}
40 >
41 {values.map(({ label, value }) => {
42 const isSelected = selectedValue === value;
43 const isDisabled = disabledValues?.includes(value);
44
45 return (
46 <Button
47 key={value}
48 onPress={() => setSelectedValue(value)}
49 variant={isSelected ? "outline" : "ghost"}
50 size="pill"
51 disabled={isDisabled}
52 style={[
53 { flex: 1, maxHeight: 20 },
54 isSelected
55 ? { backgroundColor: theme.theme.colors.primary }
56 : { backgroundColor: theme.theme.colors.secondary },
57 isDisabled && { opacity: 0.5 },
58 ]}
59 >
60 {label}
61 </Button>
62 );
63 })}
64 </View>
65 </View>
66 );
67}