Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | 13x 13x 3x | import React from "react";
import {
StyleSheet,
Text,
View,
type StyleProp,
type TextStyle,
} from "react-native";
import { useTheme } from "../../hooks/useTheme";
export type SettingsLabeledValueRowProps = {
title: string;
subtitle?: string;
valueLabel: string;
titleStyle?: StyleProp<TextStyle>;
subtitleStyle?: StyleProp<TextStyle>;
valueStyle?: StyleProp<TextStyle>;
};
/** Header row with title/subtitle on the left and a value label on the right (no switch). */
export function SettingsLabeledValueRow({
title,
subtitle,
valueLabel,
titleStyle,
subtitleStyle,
valueStyle,
}: Readonly<SettingsLabeledValueRowProps>) {
const { colors } = useTheme();
return (
<View style={styles.row}>
<View style={styles.textCol}>
<Text style={[styles.title, { color: colors.text }, titleStyle]}>
{title}
</Text>
{subtitle ? (
<Text
style={[
styles.subtitle,
{ color: colors.textMuted },
subtitleStyle,
]}
>
{subtitle}
</Text>
) : null}
</View>
<Text style={[styles.value, { color: colors.primary }, valueStyle]}>
{valueLabel}
</Text>
</View>
);
}
const styles = StyleSheet.create({
row: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
},
textCol: {
flex: 1,
minWidth: 0,
marginRight: 12,
},
title: {
fontSize: 16,
fontWeight: "600",
marginBottom: 2,
},
subtitle: {
fontSize: 13,
},
value: {
fontSize: 14,
fontWeight: "500",
},
});
|