Pick any line to see why it is the way it is: the commit, the pull request and issue it came from, and what the agent was thinking.
| The phone app: Chat in full with phone notifications, plus Code and Customize (#4) | 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 | }); |
This file's history is long; its oldest lines are credited to the oldest commit read.