tangled
alpha
login
or
join now
stream.place
/
streamplace
74
fork
atom
Live video on the AT Protocol
74
fork
atom
overview
issues
1
pulls
pipelines
feat: update title without notifying users
Natalie B
9 months ago
85ef3d6e
8f508e5f
+52
1 changed file
expand all
collapse all
unified
split
js
app
components
button-selector.tsx
+52
js/app/components/button-selector.tsx
···
1
1
+
import { YStack, XStack, Text, Button, View, YStackProps } from "tamagui";
2
2
+
3
3
+
export default function ButtonSelector({
4
4
+
text,
5
5
+
values,
6
6
+
selectedValue,
7
7
+
setSelectedValue,
8
8
+
...props
9
9
+
}: {
10
10
+
text?: string;
11
11
+
values: { label: string; value: string }[];
12
12
+
selectedValue: string;
13
13
+
setSelectedValue: (value: any) => void;
14
14
+
} & YStackProps) {
15
15
+
return (
16
16
+
<YStack ai="flex-start" gap="$2" pt="$2" {...props}>
17
17
+
{text && (
18
18
+
<Text fontSize="$base" fontWeight="semibold">
19
19
+
{text}
20
20
+
</Text>
21
21
+
)}
22
22
+
<XStack
23
23
+
ai="center"
24
24
+
jc="space-around"
25
25
+
gap="$1"
26
26
+
w="100%"
27
27
+
bg="$background"
28
28
+
borderRadius="$xl"
29
29
+
>
30
30
+
{values.map(({ label, value }) => (
31
31
+
<Button
32
32
+
key={value}
33
33
+
onPress={() => setSelectedValue(value)}
34
34
+
f={1}
35
35
+
height="$2"
36
36
+
variant={selectedValue === value ? "outlined" : undefined}
37
37
+
>
38
38
+
<Text
39
39
+
color={
40
40
+
selectedValue === value
41
41
+
? "$color.foreground"
42
42
+
: "$color.mutedForeground"
43
43
+
}
44
44
+
>
45
45
+
{label}
46
46
+
</Text>
47
47
+
</Button>
48
48
+
))}
49
49
+
</XStack>
50
50
+
</YStack>
51
51
+
);
52
52
+
}
stream.place