| 1 | import { Pressable, StyleSheet, View } from "react-native"; |
| 2 | |
| 3 | import { Text } from "@/components/ui"; |
| 4 | import { radius, space, useColors } from "@/theme"; |
| 5 | |
| 6 | /** A row of choices, one picked: the site's tabs, on a phone. */ |
| 7 | export function Segments<T extends string>({ options, value, onChange }: { options: { value: T; label: string }[]; value: T; onChange: (value: T) => void }) { |
| 8 | const colors = useColors(); |
| 9 | return ( |
| 10 | <View style={[styles.row, { backgroundColor: colors.raised }]}> |
| 11 | {options.map((option) => { |
| 12 | const on = option.value === value; |
| 13 | return ( |
| 14 | <Pressable |
| 15 | key={option.value} |
| 16 | accessibilityRole="tab" |
| 17 | accessibilityState={{ selected: on }} |
| 18 | onPress={() => onChange(option.value)} |
| 19 | style={[styles.option, on && { backgroundColor: colors.surface, borderColor: colors.lineStrong }]} |
| 20 | > |
| 21 | <Text size="small" style={{ fontWeight: "600", color: on ? colors.fg : colors.muted }}> |
| 22 | {option.label} |
| 23 | </Text> |
| 24 | </Pressable> |
| 25 | ); |
| 26 | })} |
| 27 | </View> |
| 28 | ); |
| 29 | } |
| 30 | |
| 31 | const styles = StyleSheet.create({ |
| 32 | row: { flexDirection: "row", borderRadius: radius.md, padding: 3, gap: 3 }, |
| 33 | option: { flex: 1, alignItems: "center", paddingVertical: space.sm, borderRadius: radius.sm, borderWidth: 1, borderColor: "transparent" }, |
| 34 | }); |