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 | 3x 3x 3x | import React from "react";
import {
StyleSheet,
Text,
View,
type StyleProp,
type TextStyle,
} from "react-native";
import { useTheme } from "../../hooks/useTheme";
export type SettingsRowHeaderProps = {
title: string;
valueLabel: string;
titleStyle?: StyleProp<TextStyle>;
valueStyle?: StyleProp<TextStyle>;
};
/** Title on the left, emphasized value on the right (e.g. brightness %). */
export function SettingsRowHeader({
title,
valueLabel,
titleStyle,
valueStyle,
}: Readonly<SettingsRowHeaderProps>) {
const { colors } = useTheme();
return (
<View style={styles.row}>
<Text style={[styles.title, { color: colors.text }, titleStyle]}>
{title}
</Text>
<Text style={[styles.value, { color: colors.primary }, valueStyle]}>
{valueLabel}
</Text>
</View>
);
}
const styles = StyleSheet.create({
row: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
},
title: {
fontSize: 15,
fontWeight: "600",
},
value: {
fontSize: 14,
fontWeight: "600",
},
});
|