frontend/components: make sections rely on layout helpers and add subtitle
Parents:
87bfdbe1 file(s) changed
- frontend/components/ui/Sections.tsx +37 -20
frontend/components/ui/Sections.tsx
@@ -6,6 +6,7 @@ Pressable,
6 6 ViewStyle,
7 7 } from 'react-native';
8 8 import { ThemedText } from '@/components/misc/themed-text'
9 + import { Row, Between } from '@/components/ui/LayoutHelpers';
9 10
10 11 import { Colors, Typography, Spacing, BorderRadius } from '@/constants/theme';
11 12 import { useThemeColor } from '@/hooks/use-theme-color';
@@ -26,6 +27,7 @@ };
26 27
27 28 interface SectionHeaderProps {
28 29 title: string;
30 + subtitle?: string;
29 31 actionLabel?: string;
30 32 onActionPress?: () => void;
31 33 style?: ViewStyle;
@@ -35,6 +37,7 @@ // XXX: A Section must either have a label as a pill/informative thing
35 37 // or it should be a link
36 38 export const SectionHeader: React.FC<SectionHeaderProps> = ({
37 39 title,
40 + subtitle,
38 41 info,
39 42 actionLabel,
40 43 onActionPress,
@@ -42,12 +45,10 @@ style,
42 45 }) => {
43 46 const textColor = useThemeColor({}, 'text');
44 47 const tintColor = useThemeColor({}, 'tint');
48 + const textSecondaryColor = useThemeColor({}, 'textSecondary')
45 49
46 50 const styles = StyleSheet.create({
47 51 headerContainer: {
48 - flexDirection: 'row',
49 - justifyContent: 'space-between',
50 - alignItems: 'center',
51 52 marginBottom: (Spacing.cardGap * 2),
52 53 },
53 54 title: {
@@ -55,6 +56,12 @@ fontSize: Typography.headlineMd.fontSize,
55 56 fontWeight: Typography.headlineMd.fontWeight,
56 57 color: textColor,
57 58 },
59 + subtitle: {
60 + fontSize: 14,
61 + color: textSecondaryColor,
62 + lineHeight: 20,
63 + marginTop: 4
64 + },
58 65 actionButton: {
59 66 padding: 4,
60 67 },
@@ -68,26 +75,36 @@
68 75 // TODO: Rework these when we finally have chips/badges
69 76 return (
70 77 <View style={[styles.headerContainer, style]}>
71 - <ThemedText style={styles.title}>
72 - {title}
73 - </ThemedText>
78 + <Between>
79 + <ThemedText style={styles.title}>
80 + {title}
81 + </ThemedText>
74 82
75 - {info && !actionLabel && (
76 - <ThemedText>
77 - {info}
78 - </ThemedText>
79 - )}
83 + {info && !actionLabel && (
84 + <ThemedText>
85 + {info}
86 + </ThemedText>
87 + )}
88 +
89 + {actionLabel && !info && onActionPress && (
90 + <Pressable
91 + style={styles.actionButton}
92 + onPress={onActionPress}
93 + hitSlop={8}
94 + >
95 + <ThemedText style={styles.actionText}>
96 + {actionLabel}
97 + </ThemedText>
98 + </Pressable>
99 + )}
100 + </Between>
80 101
81 - {actionLabel && !info && onActionPress && (
82 - <Pressable
83 - style={styles.actionButton}
84 - onPress={onActionPress}
85 - hitSlop={8}
86 - >
87 - <ThemedText style={styles.actionText}>
88 - {actionLabel}
102 + {subtitle && (
103 + <Row>
104 + <ThemedText style={styles.subtitle}>
105 + {subtitle}
89 106 </ThemedText>
90 - </Pressable>
107 + </Row>
91 108 )}
92 109 </View>
93 110 );